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.
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.
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.
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.
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.
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.
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…
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.
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.
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.
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?
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.
- 1 http://mobile.smashingmagazine.com/2011/09/26/content-prototyping-in-responsive-web-design/
- 2 http://www.zeldman.com/2008/05/06/content-precedes-design/
- 3 http://www.zeldman.com/2008/05/06/content-precedes-design/
- 4 http://www.markboulton.co.uk/journal/a-richer-canvas
- 5 http://www.markboulton.co.uk/journal/a-richer-canvas
- 6 http://adactio.com/journal/4523/
- 7 http://adactio.com/journal/4523/
- 8 http://www.w3.org/TR/css3-mediaqueries/
- 9 http://www.w3.org/TR/css3-mediaqueries/
- 10 http://www.alistapart.com/articles/fluidgrids/
- 11 http://www.alistapart.com/articles/fluidgrids/
- 12 http://coding.smashingmagazine.com/2011/04/18/powerful-new-css-techniques-and-tools/
- 13 http://coding.smashingmagazine.com/2011/04/18/powerful-new-css-techniques-and-tools/
- 14 http://24ways.org/2009/make-your-mockup-in-markup
- 15 http://24ways.org/2009/make-your-mockup-in-markup
- 16 http://www.broken-links.com/2011/02/21/using-media-queries-in-the-real-world/
- 17 http://www.broken-links.com/2011/02/21/using-media-queries-in-the-real-world/
- 18 http://ethanmarcotte.com/
- 19 http://ethanmarcotte.com/
- 20 http://www.abookapart.com/products/responsive-web-design
- 21 http://www.abookapart.com/products/responsive-web-design
- 22 http://www.designbyfront.com/workinprogress/article/the-goldilocks-approach-to-responsive-design
- 23 http://www.designbyfront.com/workinprogress/article/the-goldilocks-approach-to-responsive-design
- 24 http://seesparkbox.com/foundry/media_query_bookmarklet
- 25 http://seesparkbox.com/foundry/media_query_bookmarklet
- 26 http://gizmodo.com/156257/samsung-smart-zipel-refrigerator
- 27 http://gizmodo.com/156257/samsung-smart-zipel-refrigerator
- 28 http://mark-kirby.co.uk/2011/the-mobile-context/
- 29 http://mark-kirby.co.uk/2011/the-mobile-context/
- 30 http://seesparkbox.com/foundry/you_say_responsive_i_say_adaptive
- 31 http://seesparkbox.com/foundry/you_say_responsive_i_say_adaptive
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.