• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 6. Different Screen Size, Differ... > Changing the Layout for Mobile Devic...

Changing the Layout for Mobile Devices

If you got very zealous in resizing your window to test the narrow-screen styles, you may have noticed that—even with the changes we made—the layout doesn’t look very good at extremely narrow widths like the ones you find on mobile devices. Well, there’s only one thing to be done: add another media query!

Media queries are a great way to customize the styles on mobile devices quickly and easily. But please be aware that I’m not suggesting they’re the only way you should deal with mobile sites; you may need to add server-side scripting or other techniques to change the content and functionality on the mobile version of your site. While media queries may be enough customization for the mobile version of a small business’s brochure site (such as our example bakery site), a big, complicated news site probably needs to use additional techniques to significantly change the content, navigation, and other functionality on their mobile site. Plus, hiding or swapping in different content extensively using media queries is not efficient—the browser may still download the content it doesn’t need (see www.quirksmode.org/blog/archives/2010/08/combining_media.html for more on this). So don’t think media queries are necessarily going to solve all your mobile web design problems—use media queries as one of your mobile optimization tools.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint