Search code examples
htmlcssuser-interfacetwitter-bootstrap-3media-queries

Can I use media queries to effectively create a separate mobile site?

I have decided that its probably better to have a responsive site as opposed to a m.domain separate one. However, I do actually want the mobile version to display at a really stripped out level: https://i.sstatic.net/0N69T.png. Is it possible to strip out all the content that appears on the desktop version http://www.traditional-cleaning.co.uk/cleaning-in-durham.htm (and add a new mobile design when viewed on small devices) by using media queries?

Solution

  • Responsive design is built around the concept of media queries that target specific devices and viewport sizes. With this in mind, you can code up your initial CSS given a mobile perspective and then use media queries to selectively serve up additional styling as the viewport size increases. This is likely the opposite of the method that you typically take with responsive design: start big and then reduce.

    With a mobile first viewpoint, we start by loading the absolute bare essentials on the smaller platforms. This leads to a snappier experience that avoids unnecessary lag. The additional resources are loaded strictly on an as-neeeded basis to platforms that can handle them well.

    When using media queries: Use min-width over min-device-width to ensure the broadest experience. Use relative sizes for elements to avoid breaking layout.

    These are some good guidelines which I usually follow when designing a mobile website.

    The 7 key principles of mobile web design

    1. Prioritize... Design for mobile based on most popular and/or important content

    2. Everything should be available... or at least the majority of the content which the users are looking for.

    3. Limit navigation options... be choosy about the information that you put front and center

    4. Buttons matter... use elements that are sized for easy clicking

    5. Watch your media... Keep an eye out for overly large image files, bloated fonts that load too many unnecessary characters, and videos in formats — like Flash — that won't play on certain mobile operating systems.

    6. Pop-ups are problematic... Don't throw too many pop-up surveys or sign-up boxes at your mobile visitors, they're going to get annoyed.

    7. Don't require too much text... Forms are a pain to fill out when you're typing with your thumbs.

    Further reading: Google's web design basics, Mobile first - why it's great and why it sucks