Creating a Basic Page Structure - CSS3 Foundations - page 107

Figure 6-4 The image is now rescaled to fit perfectly in the browser window with a width of 500px.
Mobile First Design
While on the subject of responsive and adaptive design, let's cover another buzz phrase you may have heard of: mo-
bile first design.
The purpose of mobile first design is to begin creating a website with mobile devices in mind first.
This mobile first mindset forces you to think about what is the most important content to display in the space avail-
able. You can then slowly build up the less relevant content as and when you have more space to play with. This ap-
proach has performance benefits too—for mobile devices that typically have less processing power and generally
less bandwidth than other devices.
Because a responsive site unavoidably has some styles on a web page that need to be overwritten to change the lay-
out appropriate for the device on which it is being viewed, it is better to begin with a mobile layout. This way, the
mobile device doesn't have to process styles or download images that it doesn't need. Instead, you can leave the
overwriting of styles to devices with more processing power and bandwidth, where speed and efficiency aren't quite
as critical.
So why isn't this type of design practiced in CSS3 Foundations ? Well, for a few reasons. First, not every website
needs to be responsive, so it is better to learn how to create a web page as you are doing now—by building the
desktop version first. In the future, you may find that if you are creating web pages for clients or other people, they
request only a desktop version of a website but then later ask you to modify it to be more efficient and accessible for
mobile devices. Although “mobile first” is best practice, “desktop first” is a real-world practice, too, especially dur-
ing this time when the web is transitioning from fixed to responsive layouts. You can apply the method of adding
media queries, which you do in Chapter 16, in the same way if you decide to try a “mobile first” approach in the fu-
ture. So by learning the “desktop first” approach, you don't miss out on any techniques, and learning is more effi-
cient.
Summary
In this chapter, you learned about the various layouts that are commonly used for web pages; you also learned what a
few of the web industry's most recent buzz phrases mean. The Cool Shoes & Socks web page now has a hybrid lay-
out, and the contents within that layout are scaling relatively to it. With this new overall page structure applied to the
page, in the next chapter, you learn about the box model and box-sizing , concepts which are used to structure the
elements within the main page.