Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

(singke) #1
ptg16476052

Mobile Devices Should Come First 445

16


Why RWD Is Important


RWD is important because the number of browsers and devices capable of viewing web
pages is only growing. And every time a new device joins the market it adds new features
to support and often changes the way it supports existing features. A designer of a cook-
ing website might have his pages shown in a 5K monitor at one house and a touchpad
screen on a refrigerator at another. And the smart designer wants the pages to work well
in both places.


RWD Is More Than Just Changing the Number of Columns


It’s very common to see people dismiss RWD as a form of layout adjustment. And often
the most striking changes to a design come from how the pages are presented on a desk-
top screen versus a mobile screen. But good RWD does more than that. Good RWD
includes the following:


n Adjusting the content to put the important things first for each device
n Recognizing what the critical content is for a page, and making sure that everyone
who visits can see and access it
n Providing alternatives for elements that don’t work on smaller screens
n Keeping bandwidth costs in mind when designing a page
n Using technology that is appropriate and providing fallback options for critical
features

Mobile Devices Should Come First


As I mentioned previously, it used to be very common for web designers to use the most
modern, up-to-date browsers on huge monitors. Their web pages would look amazing
at 5120 pixels wide on the latest nightly of Chromium, but anyone viewing on a smaller
screen or with an older browser was out of luck. But what these designers forgot is that
they are not their customers. When I bought my first 4K monitor, my mother was still
browsing the Web on a 12-inch screen. Her monitor was about the same size or a little
smaller than my tablet! And before you dismiss my mother as a Luddite, as of January
2015 over 50% of visitors to W3Schools had a resolution of 1366×768 or lower (see
http://www.w3schools.com/browsers/browsers_display.asp)..)


But resolution is only part of the picture. More and more people are moving to tablet
and mobile phones. In fact, in 2015 Google began penalizing sites that were not mobile

Free download pdf