Adaptive & Responsive Design with CSS3 Media Queries

Posted by on Aug 19, 2011 in Blog | 20 comments

Screen resolution nowsaday ranges from 320px (iPhone) to 2560px (large monitor) or even higher. Users no longer just browse the web with desktop computers. Users now use mobile phones, small notebooks, tablet devices such as iPad or Playbook to access the web. So the traditional fixed width design doesn’t work any more. Web design needs [...]

Advertise here with BSA

View full post on Web Designer Wall – Design Trends and Tutorials

Vancouver graphic design, Vancouver web design, Vancouver seo, Vancouver internet marketing, Vancouver social media, web design Vancouver

Incoming search terms:

20 Comments

  1. Peter Schreiner | August 20, 2011

    I have to thank you again for this! It’s changed my whole approach to designing websites. SALUTE!

  2. Vconde | August 20, 2011

    please, is it possible to use a flexible slideshow (some kind of script), instead of flexible images? it would be so nice of you to help me. thank you.

  3. Javed Saifi | August 20, 2011

    Wow! This is simply great and Excellent resource. This article helps me understand a lot of things around mobile web. Thank you! :)

  4. Marcel | August 20, 2011

    Video still seems to be super unreliable. When trying out both iframe and object, there are issues in addressing height in my project.

  5. Oral ÜNAL | August 20, 2011

    This is really an amazing technique.. I’m going to try to adapt it to my website

  6. Icondice | August 20, 2011

    Very Great article!
    It is very help full for my next webdesign project.
    Thank you

  7. j_hatfield | August 20, 2011

    Great article, I found this one for keeping your design of a mobile site simple.

    http://www.back40design.com/news/m.blog/22/mobile-website-designers-need-to-do-less

  8. Web Designer | August 20, 2011

    Really very useful article. Some great information when considering all platforms – thanks again!

  9. ReikoSarah | August 20, 2011

    “I love your blog. I really like the “wall graphics”. I also have a “wall graphics” support website at http://www.wall-graphic.net/”

  10. Adam Weso | August 20, 2011

    Hi I have a question. I’m playing around with the this demo and when i open the page on an ipad landscape it’s fine – rotate to portrait it’s fine but when I rotate back to landscape it goes back to full size? Is this an iPad thing or a media queries thing and what’s the fix?

    Thanks and this is an awesome demo!
    Adam

  11. Hira Kumar Maharjan | August 20, 2011

    It is helpful article for my personal projecst. thanks a lot.

  12. Lucas del Río | August 20, 2011

    This is simply great! It’s not easy but you made it pretty clear how to work every case in particular. Never seen any post like this one being so clear about adaptive structures… thanks for shearing this, I’m going to take the time to work with this and for sure share my results =) Thanks once again

  13. AmiShael | August 20, 2011

    Thank you very much! This article helps me understand a lot of things around mobile web. Thank you! :)

  14. Pilot | August 20, 2011

    Nice tutorial, thanks :)
    I checked out the demo with Firefox on my PC and on my Nokia E63 with default S60 browser, Opera mini/Opera mobile. Nokia’s default browser shows unscaled full page as on desktop, Opera mini showed scaled version but page is little wider than phone’s screen and Opera Mobile shows the page properly scaled.

    So do the trick in most device browsers.

    How to make page compatible with those mobile browsers which doesn’t support media query like Nokia’s default browser?

  15. el | August 20, 2011

    Great article and demo. Only problem is, and I’m not positive on this, the iPhone initial-scale=1.0 line locks that in, true. But it also locks it in only on the initial view mode you start viewing the build in. ie – if you open this page on your iPhone in portrait mode, looks great. But flip over to landscape mode and nothing scales properly. The page is too wide, and elements scale up making them too large.

    Great starting point though.

  16. Eric | August 20, 2011

    Idk, i think mobile design is all over the place.

  17. Keith | August 20, 2011

    forgive my ignorance, but what is the significance of the 650px width? i know its one-column, but it seems a bit arbitrary.

  18. Cass Toyne - web design tauranga | August 20, 2011

    certianly takes a bit to understand the mobile sides of things, might have to read again :) Nice writeup tho

  19. SEO Website Design | August 20, 2011

    I’m not gonna kid you. This info on mobile website design is gonna take some time to absorb. But thanks for posting it and explaining in detail.

    Your willingness and patience in sharing your knowledge is quite refreshing.

  20. latest hindi songs | August 20, 2011

    awesome article thanks for the post..i was surfing for this thanks for giving me such great stuff