Simple Responsive Template. New freebie from Prowebdesign.

Simple Responsive Template is a continuation of YAMB (Yet Another Responsive Boilerplate) project. This tutorial on YAMB v.1 will give you a short overview of responsive design concept and idea about why YAMB was created. In this article we will mainly speak about how  to use Simple Responsive Template and how it is different from the YAMB v.1.

What is Simple Responsive Template

Simple Responsive Template is a small set of tools and best practices that allow web designers to build responsive websites faster. Websites built with Simple Responsive Template will be optimized for screen widths between 320px and anything. Simple is only a simple skeleton, meant to jump-start your responsive project. It is not a plug-n-play cover-all-possibilities template. It’s intended to be minimalistic.

Features

• Mobile first approach.
• Fluid layout & fluid grid.
• CSS drop-down menu with possibility of unlimited sub-levels.
• For small screens drop-down menu is automatically converted into toggle menu.
• Responsive touch enabled image slideshow with captions.
• Responsive images in content part of the website

How To use Simple Responsive Template

1. Download archive with all the source files.
2. Unzip and inspect basic.html or colorblocks.html. The code is well commented.
3. Read HTML tutorial to build a complete site with Simple without changing how it looks
4. Read CSS tutorial to learn how to change fonts, colors, and understand the media queries structure of Simple

What’s new in comparison to YAMB v.1.

• Cleaner, better layout.
• Mobile first approach.
• Pure CSS drop-down menu, that automatically converts into toggle menu on small screens.
• All scripts are updated to the latest versions.

The Mobile First approach is the biggest change. YAMB v.1 used traditional media queries, which loaded desktop design first and then would gradually hide less important elements as the screens went smaller. This approach was a safety net for older browsers without media queries support. But it is essentially faulty. With mobile last approach all the Kb-heavy assets meant for desktops were actually downloaded by ALL devices, even if they were only visible on large screens. With mobile first approach this doesn’t happen, because CSS authoring starts with minimum of necessary styles, and then you add styles and eye-candy as progressive enhancement for larger screens.

New mobile first media queries structure of Simple is inspired by wonderful WordPress starter theme – Bones.
Here’s a good article for further reading about Mobile First approach.

Simple media queries structure

Open and inspect basic-style.css of Simple. First go all base mobile size styles. If you want to see how those look on desktop, resize your browser window and make it less wide than 920 px. As you see:

• The main menu on smaller screens becomes a toggle menu. This solves 2 problems at once. One – toggle menu takes up almost no space, while holding latge number of links. Two – :hover interactions don’t exist on touch screens. And unlike drop-down menu, toggle menu works on click. If you want to learn more about dealing with :hover interactions, you can read this article and fine tune Simple.
• All structure elements flow one under another, there are no floats yet. Grids didn’t kick in – they will not till the screen is at least 920 px wide (you, of course, can change that to any width by adjusting media queries).
• Less important elements, like image slider, are not yet visible.

Remember to keep those styles simple, load speed on hand held devices depend on that. In the same time, ALL styles that are available to template independent of screen resolution should go here. E.g. if you have a blue button, which looks the same on 320 px wide screen or on 1920 px screen, it should go here.

Then we start adding styles for larger screens. What break points to use is entirely up to you. Simple uses:

• 481
• 920
• 1030
• 1240
• Special query for iPhone5 (just for fun)
• Query for retina displays
• print query

481 px query merely repositions logo and toggle menu a bit, so they are side by side, instead of one under another.

920 px query is where the whole lot of things happen: toggle menu becomes drop-down menu, grids appear, fluid layout floats are finally, well, floated side by side.

Rest of the queries is for you to fill up.

IE below 9 will – hell yah! 🙂 – not understand mobile first approach, because all the styles in media queries are “invisible” to it. You can either serve IE7 and IE8 the mobile version of the site. Or you can have an extra ie.css (Simple approach), which will repeat all the desktop styles from the main style sheet. In this case, don’t forget to dub any desktop styles you write into the ie.css.