eyelearn

a look at design for the web & all it entails

· view menu ·

media queries for adaptive design

Kyle Bean - The New Industrial Revolutionimage: "The New Industrial Revolution" © Kyle Bean

Hope you all had a productive break and that your portfolio websites are coming along nicely? :)

Let's take a look at adapting your designs to different screens - Ethan Marcotte wrote this now famous article, called "responsive web design", which discusses the approach via media queries.

Ethan quotes John Allsopp who stated in his article "A Dao of Web Design" in 2000:

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.”

With this in mind - let's read Ethan's original article and study his beautiful example:

☛ Responsive Web Design

☛ “Give me problems, give me work.”
 [demo]

useful reading:

references and tools:

quick tip:
In Firefox - you can preview your pages quickly in different screensizes via TOOLS > WEB DEVELOPER > RESPONSIVE DESIGN VIEW (or CMD/CTRL + ALT + M), very handy :)

final sessions - content

As we discussed already - I'm open to your suggestions on topics for our last 3 sessions. I imagine that there will be some ideas for your portfolio you might struggle to implement - please feel free to suggest topics, techniques or recaps and I'll try to plan that in. Use the comments below to share your thoughts, thanks :)

Comments are closed.