Course Hero Logo

So lets roll up our sleeves and set to work on a

Course Hero uses AI to attempt to automatically extract content from documents to surface to you and others so you can study better, e.g., in search results, to enrich docs, and more. This preview shows page 103 - 107 out of 160 pages.

So let’s roll up our sleeves and set to work on a widescreen-friendly layout:
MEDIA QUERIES99@media screen and (min-width: 1200px) {.welcome,.blog,.gallery {width: 49.375%;}.welcome,.gallery {float: right;margin: 0 0 40px;}.blog {float: left;margin: 0 0 20px;}}In the live Robot site (),you’ll see a bunch of other changes that occur on this wides-creen layout. But these three rules are really the critical ones.We’re taking our three main content modules (.welcome,.blog,and.gallery), and setting them to roughly half (49.375%) thewidth of the entire page. Then, we’re floating the.welcomeand.gallerymodules off to the right, and the blog to the left. Theresult? A design that’s perfectly primed for reading on largerdisplays (fig 4.22). Our over-long line lengths have been reinedin, and the blog—the key piece of content—has been broughthigher on the page, making it considerably more accessible.In other words, our responsive design is finished.A NOTE ABOUT COMPATIBILITYAfter covering media queries for not a few pages, I suppose weshould briefly quash a few dreams—I mean, um, we shouldprobably talk about browser support.
100RESPONSIVE WEB DESIGNThe good news? Media queries enjoy remarkably broad sup-port in modern desktop browsers. Opera has supported mediaqueries since version 9.5, Firefox 3.5 and above supports them,as do WebKit-based desktop browsers like Safari 3+ and Chrome.Even Internet Explorer 9 () sup-ports media queries ()! Somebodypinch me.And moving beyond the desktop, things are also lookinggood for media queries. WebKit-based mobile browsers, suchas Mobile Safari, HP’s webOS, and Android’s browser all sup-port media queries. And as reported by Peter-Paul Koch (http://bkaprt.com/rwd2/36/), Opera Mobile and Opera Mini are on the@mediabandwagon, as are Mozilla’s forays into mobile brows-ing. And with Windows Phone due to get IE9 in 2011 (http://bkaprt.com/rwd2/37/), we’re facing a browser landscape thatenjoys widespread support for media queries, which is incred-ibly exciting.fig 4.22:We’ve revisited our design, considering how widescreen readers might bestexperience it—and all with a quick media query.
MEDIA QUERIES101But sadly, “widespread” doesn’t mean “universal.” In desktop-based browsers older than the version numbers listed above,we’re out of luck. And no, Internet Explorer doesn’t providenative media query support in versions 8 and below. And whilenearly all modern small-screen devices offer decent support,some legacy browsers don’t understand media queries (http://bkaprt.com/rwd2/38/).So things are far from perfect. But that doesn’t mean thatresponsive layouts are a pipe dream. First and foremost, thereare a number of JavaScript-based solutions that patch olderbrowsers’ lack of support. Personally, I’ve been using a scriptcalledrespond.js(), a nimble littlelibrary developed by Scott Jehl. Wherecss3-mediaqueries.

Upload your study docs or become a

Course Hero member to access this document

Upload your study docs or become a

Course Hero member to access this document

End of preview. Want to read all 160 pages?

Upload your study docs or become a

Course Hero member to access this document

Term
Fall
Professor
N/A
Tags
Web Design, Web designer, Ethan Marcotte

Newly uploaded documents

Show More

Newly uploaded documents

Show More

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture