Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
CSS: Page Layouts introduces basic layout concepts, gives advice on how to create properly structured HTML based on prototypes and mockups, and goes into critical page layout skills such as floats and positioning. Author James Williamson shows how to combine these techniques to create fixed, fluid, and responsive layouts. Designers are also shown how to enhance their pages through the creative use of CSS techniques like multi-column text, opacity, and the background property. Exercise files are included with this course.
If there's one thing you need to embrace to become a successful web designer it's that the web is a constantly evolving place, and you're going to need to evolve right along with it. While a few years ago, we were arguing over the merits of fixed layouts versus flexible layouts, a very odd thing happened. People began using the web in a way that made this argument moot. Now over the past few years, the explosion of smartphones and tablets means that your content is now consumed by a wider array of screen sizes, resolutions, and browser types than ever before.
As a designer, that means you have to decide whether you're going to target one view over any other possible views, design a flexible layout that has to have the ability to grow from one extreme to another, or whether you are going to build a layout that is responsive. So what's a responsible layout? Well, responsive layouts do just that; they respond to the environment in which they're viewed. On desktops, the design could be enhanced for the larger screen, with increased graphics size and layouts that target wider aspect ratios. On a tablet, they could change layout and functionality based on the device type or the orientation of the device.
On smartphones, they could again change layout based on smaller size, hide some elements, and even take advantage of smartphone features like geolocation and messaging. And if you're wondering, all three of the layouts that I just showed you are the exact same page, just viewed at different sizes. Now if it sounds like I'm describing multiple layouts, you're not too far from the truth. Now responsive layouts typically use a combination of layout techniques and multiple layout types to serve the proper layout to the proper screen or device. Now with that in mind, here are few pros and cons to consider when thinking about using responsible layout.
Now the biggest reason to use them of course is that it allows you to control how users experience your content, based on the device or screen size. This allows you to create unique experiences for every device type or screen size that consumes your content. You can also use this as a way of reorganizing or even eliminating content based on the context. Mobile users can experience a site that's tailored for the mobile experience, while desktop users can interact with a site designed around that context. It also means that in many cases you don't have to create separate sites for mobile devices or redirect them to mobile-specific pages.
Now the downside to responsive layouts is that they require much more work, in terms of planning and executing the designs. You are essentially designing around multiple contexts all at the same time, and that requires you to be much more rigorous about how you build your site. Failure to plan one aspect properly can cascade into having to rework multiple areas of your site, as they are all tied into one another. You also have to rely on newer features. So in the short term you are going to need to expend a great deal of energy into providing fallback features for browsers or devices that don't have the support needed for your responsive layout.
So even if you want to take things slowly and not try to master responsive layouts right off the bat, at least understand the concepts and how the techniques of fixed and fluid layouts are used to help create more responsive designs. In a few years, my guess is we are going to be looking at layouts that aren't responsive, and wondering, how in the world we ever got away with it.
There are currently no FAQs about CSS: Page Layouts.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.