Content Prototyping In Responsive Web Design: Related Resources

This overview features the useful resources related to the article Content Prototyping In Responsive Web Design1, written by Ben Callahan.

Related Resources

Content Precedes Design2
An intense debate was born when this citation was made by Jeffrey Zeldman himself. The question indeed is, “Should content always precede design?”

Content Precedes Design3

A Richer Canvas – Mark Boulton4
On the Web, we usually have to abandon the notion of a page. Let’s look at this practically. To design a layout system for a website, we now have to consider many different variables.

A Richer Canvas - Mark Boulton5

Content First – Jeremy Keith6
This is a really exciting time for Web design. The increasing diversity of modern devices is driving people to try to figure out how to deal with mobile devices in the best possible ways.

Content First - Jeremy Keith7

Media Queries – W3C Specification8
A media query consists of a media type and a zero or more expressions that check for the conditions of particular media features. Among the other media features that can also be used in media queries are ‘width’, ‘height’ and ‘color’. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.

Media Queries - W3C Specification9

Fluid Grids – Ethan Marcotte10
Fluid layouts are an undervalued commodity in Web design. They put control of our designs firmly in the hands of our users and their browsing habits. They’ve also utterly failed to seize the imagination of Web designers.

Fluid Grids - Ethan Marcotte11

Powerful New CSS Techniques and Tools – Smashing UX Design12
The hard work of front-end designers never ceases to amaze us. Over the last months, we’ve seen Web designers creating and presenting a plethora of truly remarkable CSS techniques and tools. Smashing Magazine has collected, analyzed, curated and featured thr latest useful resources for your convenience, so you can use them right away or save them for future reference.

Powerful New CSS Techniques and Tools - Smashing UX Design13

Make Your Mockup in Markup – Megan Fisher14
A big thanks to our design hero Dan Cederholm; Megan Fisher came to the conclusion that a website’s design should begin where it’s going to live: in the browser.

Make Your Mockup in Markup - Megan Fisher15

Using Media Queries in the Real World – Peter Gasston16
In order to make pages that adapt easily to different device viewports, you must make decisions about how to mark up your content in a way that allows for that adaptation…

Using Media Queries in the Real World - Peter Gasston17

Ethan Marcotte18

Ethan Marcotte19

Responsive Web Design – Ethan Marcotte, A Book Apart20
From mobile browsers to netbooks and tablets, users are visiting your sites from an increasing array of devices and browsers. Are your designs ready? Learn how to think beyond the desktop and craft beautiful designs that anticipate and respond to your users’ needs.

Responsive Web Design - Ethan Marcotte, A Book Apart21

The Goldilocks Approach – Chris Armstrong22
With over 4 billion mobile devices in use around the world, mobile browsing is rising fast. We can no longer assume that our sites will be viewed on a desktop monitor with an average resolution.

The Goldilocks Approach - Chris Armstrong23

Media Query Bookmarklet – Rob Tarr24
One thing that quickly gets noticed when starting building responsive websites is that we constantly resize our browsers. We would resize the browser to the largest media query, and then step down and watch the changes so we know what media query we are looking at. This is not quite the best way to design a website.

Media Query Bookmarklet - Rob Tarr25

Samsung Smart Zipel Refrigerator – Gizmodo26

Samsung Smart Zipel Refrigerator - Gizmodo27

The Mobile context – Mark Kirby28
The mobile context is being discussed at a great deal at the moment in regards to mobile Web. What does it mean? How can we use it? How can we make assumptions about the context a user is in, based on their device?

The Mobile context - Mark Kirby29

You Say Responsive, I Say Adaptive – Ben Callahan30
You’ve probably read the opinions floating around about how the term “responsive Web design” isn’t an adequate name for the technique. A lot of smart folks have weighed in, providing critique, explaining what they would call it if they had written the article — some even stating that it’s a great name.

You Say Responsive, I Say Adaptive - Ben Callahan31

Footnotes

  1. 1 http://mobile.smashingmagazine.com/2011/09/26/content-prototyping-in-responsive-web-design/
  2. 2 http://www.zeldman.com/2008/05/06/content-precedes-design/
  3. 3 http://www.zeldman.com/2008/05/06/content-precedes-design/
  4. 4 http://www.markboulton.co.uk/journal/comments/a-richer-canvas
  5. 5 http://www.markboulton.co.uk/journal/comments/a-richer-canvas
  6. 6 http://adactio.com/journal/4523/
  7. 7 http://adactio.com/journal/4523/
  8. 8 http://www.w3.org/TR/css3-mediaqueries/
  9. 9 http://www.w3.org/TR/css3-mediaqueries/
  10. 10 http://www.alistapart.com/articles/fluidgrids/
  11. 11 http://www.alistapart.com/articles/fluidgrids/
  12. 12 http://coding.smashingmagazine.com/2011/04/18/powerful-new-css-techniques-and-tools/
  13. 13 http://coding.smashingmagazine.com/2011/04/18/powerful-new-css-techniques-and-tools/
  14. 14 http://24ways.org/2009/make-your-mockup-in-markup
  15. 15 http://24ways.org/2009/make-your-mockup-in-markup
  16. 16 http://www.broken-links.com/2011/02/21/using-media-queries-in-the-real-world/
  17. 17 http://www.broken-links.com/2011/02/21/using-media-queries-in-the-real-world/
  18. 18 http://ethanmarcotte.com/
  19. 19 http://ethanmarcotte.com/
  20. 20 http://www.abookapart.com/products/responsive-web-design
  21. 21 http://www.abookapart.com/products/responsive-web-design
  22. 22 http://www.designbyfront.com/workinprogress/article/the-goldilocks-approach-to-responsive-design
  23. 23 http://www.designbyfront.com/workinprogress/article/the-goldilocks-approach-to-responsive-design
  24. 24 http://seesparkbox.com/foundry/media_query_bookmarklet
  25. 25 http://seesparkbox.com/foundry/media_query_bookmarklet
  26. 26 http://gizmodo.com/156257/samsung-smart-zipel-refrigerator
  27. 27 http://gizmodo.com/156257/samsung-smart-zipel-refrigerator
  28. 28 http://mark-kirby.co.uk/2011/the-mobile-context/
  29. 29 http://mark-kirby.co.uk/2011/the-mobile-context/
  30. 30 http://seesparkbox.com/foundry/you_say_responsive_i_say_adaptive
  31. 31 http://seesparkbox.com/foundry/you_say_responsive_i_say_adaptive

President and Founding Partner of Sparkbox, a web studio building sites that are just as brilliant for mobile as they are for the desktop.

Advertising
  1. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top