1. CSS3 Animated Media Queries →

    A new trend in website design is the use of media queries, this is because of the amount of devices that can now access the internet all the websites need to usable on any device type. This is where responsive design comes into action, this is the process of discovering what device the visitor is using so we can change the design to adapt to the visitor.

  2. How to Create Stunning Effects With 165 Media Queries or Less →

  3. Respond to Different Devices With CSS3 Media Queries →

    As a hater of horizontal scrollbars, I’ve always been intrigued by layout design that resizes with browser windows. And as a lover of usability and accessibility, I have a keen interest in layouts that resize with text resizing. So when fluid/liquid and elastic design became the trendy web topics in the mid 2000s, I experimented alongside every other bandwagon jumper.

    What I discovered was 1) I still suck terribly at math 2) the lazy designer in me much prefers the “known” parameters of fixed design and 3) while both elastic and fluid design were heading in the right direction, they had their limitations:

    • Without setting max-width (which isn’t supported in < IE7) values, line-lengths can become unreadable in fluid layouts. 
    • Elastic designs don’t resize unless text is resized.

    Using both fluid and elastic together was an acceptable compromise, but the design “flexibility” was limited to size … font size, image size and layout size. Further, the end result of fluid and elastic solutions, particularly for very small or very large resolutions, wasn’t always aesthetically pleasing or as usable as desired. Neither approach provided the finer layout or design control to truly optimize all viewing experiences. (more)