Adaptive & Mobile Design with CSS3 Media Queries

Posted by on May 11, 2011 in Blog | 8 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:

8 Comments

  1. curtismchale | May 11, 2011

    While media queries certainly work they’re not the best option for detecting mobile devices. Since a mobile device sits on a constrained pipe (slow) already having to download all the CSS for the regular site, then the CSS for it’s screensize is certainly slow. With this method you also end up downloading the full size images then they get scaled down. Basic web optimization says we serve the image size we need not larger images that are scaled down.

    Server side detection of mobile devices is a much better option since you can then only serve the code specific to the device in question. Then if you want to query for specific landscape/portrait orientation go for it. You’d only serve the image sizes required by the device as well.

    Media queries are great but only if they’re used properly by an informed developer.

  2. gBaniya | May 11, 2011

    Thanks very much for your reply. It helps. :)

  3. Catalin Red | May 11, 2011

    Lovely article and thanks for sharing! I enjoyed the “Media Queries Javascript” fallback part.

  4. CHEWX | May 11, 2011

    GBaniya, There is no code to keep the image sharp, it just resizes to 100%, if you want to keep the image sharp you have two or three versions of the picture and then swap them depending on viewport.. the downside to media queries. That is why image heavy websites tend not to use media queries.

  5. Benjamin Reid | May 11, 2011

    Really nice explanation – something we should all be doing now.

  6. Shaza Chua | May 11, 2011

    Wow! This is great! Thank you for sharing this! I really really need this for my upcoming project.

  7. gBaniya | May 11, 2011

    quality stuff…

    which bit of the code keeps the images sharp all the time? Love to try this very soon..

    thanks for sharing.. :)

  8. David Nemes | May 11, 2011

    Wow very good article! ty