Show full Blog

  • Mobilize your site

    Want to make your site look good on mobile devices, but still look good on all browsers? Media Queries are your friend. It’s really not that hard and you can serve the same data to all page requests. You just modify your css to target different page widths. You can see how it works by changing the width of your browser on the neonenigma.com (moved to neonguru.net) website.

    The first thing I did was change the doctype to html5:

    <!doctype html>

    Pretty simple and seems to work in all browsers. I also added a viewport meta tag for mobile devices:

    <meta name="viewport" content="width=device-width; initial-scale=1.0">

    Then I looked at the site and modified the css as I changed the width of the browser. I use the chrome browser mostly but it should work in any of the latest browsers. I noticed that Firefox has a minimum that it will shrink to though. The key to modifying your css is to create sections for certain widths:

    @media screen and (min-width: 970px)
    {
    //css to override for wide widths
    }

    I created the wide width css first, then looked to see how the page transitioned as I shrank the browser width. The end goal is to make the default css at the top apply to most browsers, then a section for minimum width and mobile devices:

    @media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px)
    {
    //css for mobile and widths less than 600
    }

    Then override that with incrementally larger widths further down in the css. For my page, I have the default section, then sections for mobile and less than 600, 840, 845, and 970 pixels.

    As I shrink or grow the browser width, I tried to make it fairly seamless in the transitions. So your min-width settings will vary depending on the width of the contents. You also want to make prodigious use of percentage widths. 100% is your friend here. Then, as the browser shrinks, your images and divs will resize to a percentage of the available width.

    For older browsers (IE!), you can use css3-mediaqueries javascript to use these techniques. That’s it! Check out  neonenigma.com (moved to neonguru.net) source and css for just how easy this is!

    leave a comment