Course Hero Logo

Throughout the book weve been using the robot or not

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 128 - 131 out of 160 pages.

Throughout the book, we’ve been using the Robot or Notsite to demonstrate how a fluid grid, flexible images, and mediaqueries work together to provide a more responsive approachto design. We began by taking our rigid mockup, designed inPhotoshop, and converting it into a fluid grid. As we saw inChapter 4, that caused no end of problems when we startedresizing our browser window; our initial design wasn’t intendedto scale beyond its original context. So we introduced mediaqueries to address those issues, and to provide alternate small-and widescreen layouts. And finally, for browsers lacking nativesupport for media queries, we included therespond.jslibraryto provide access to our alternate designs.However, this approach raises another very real prob-lem: what if an@media-blind browser doesn’t have access toJavaScript? In that case, they’d be forced to render our full,desktop-centric design, regardless of whether that’s appropri-ate for their device. And for many mobile devices, that’s exactlywhat they’d see: a design intended for a much wider screen,shoehorned into a tiny space (fig 5.11).And there’s another problem with the way we’ve built thesite. Here’s a brief snippet from the CSS:
124RESPONSIVE WEB DESIGN.blog {background: #F8F5F2 url("img/blog-bg.png") repeat-y;}@media screen and (max-width: 768px) {.blog {background: #F8F5F2 url("img/noise.gif");}}fig 5.11:No media queries? NoJavaScript? No good: our flexible,desktop-friendly layout tries to craminto a small space.
BECOMING RESPONSIVE125First, we’re setting a background image on the.blogelement.(Specifically, the two-tonedblog-bg.pnggraphic we used inChapter 2 to create the illusion of two columns.) Then for small-er displays, those narrower than768pxwide, we’re instead plac-ing a simple tiled GIF on the blog element, since we’ve linearizedthe display of those narrower pages.The problem with this approach is that some browsers willactually downloadbothgraphics, even if only one is ultimatelyapplied to the page (see developer Tim Kadlec’s tests for moreinfo:). While smaller screens don’talways equate to lower bandwidth, we might be punishing userson smaller screens with the download of a much heavier imagethan they’ll ever see.Thankfully, these aren’t problems with responsive designin and of itself—we just need to rethink the way we’ve imple-mented it.“Mobile first” meets media queriesSpeaking broadly, responsive design is about starting from areference resolution,and using media queries to adapt it to othercontexts. A more responsible approach to responsive designwould mean building our stylesheet with “mobile first” in mind,rather than defaulting to a desktop layout. So we’d begin bydefining a layout appropriate to smaller screens, and then usemedia queries to progressively enhance our design as the reso-lution increases.

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