Blog: Tutorials, tips & Tools

Well, actually it’s 2 in 1 (oh, how we love this stuff!) – a template (boilerplate) and  a short tutorial to get you started with mobile web design rocket fast.

The Boilerplate. YAMB   is a small set of tools and best practices that allow web designers to build responsive websites faster.

DOWNLAOD YAMB SOURCE FILES.    ||    VIEW YAMB DEMO.

YAMB includes features that are requested by the clients all the time:

• Fluid grid.
• Drop-down menu with possibility of unlimited sub-levels.
• For small screens drop-down menu is automatically converted into select box.
• Responsive image slideshow with captions.

DISCLAMER: We do not aspire to produce anything even close to frameworks like HTML5 Boilerplate – which are maintained, documented and require constant effort to develop and keep up to date. So, YAMB is just a one-upon-a-time thing. Not something we develop, debug and provide help for. This means that if you use YAMB and have questions about how to incorporate new features, you will have to sort it out yourself .

Tutorial

I’ve split this article in 3 parts:

• Rules: extremely short and confusing schematic explanation of what responsive web design is, and how to optimize a website for handheld devices.
• Tools: dedicated to the YAMB boilerplate, and wonderful tools it was built with.
• Smoking barrel: donno what I shall put there just yet, but sounds just like that movie. Yah:). Did you catch it:)))?

Rules, Tools and a Smoking barrel (yes, I know, there were two of them!)

RULES

If you’re reading this part, you probably are not very familiar with the concept of responsive web design, and it’s a good time to start being reeeeeeeeeeally ashamed of yourself. Just kidding:). If you are familiar with responsive web concept, skip to the next part and read about YAMB.

In two words, responsive web design is a way to make sites that remain usable and look good on screen of virtually any size: from, say, 240 px to sky is the limit. The necessity of responsive web design sprung from the rapid growth of handheld devices usage.

For a proper and solid start in responsive web design one should read at least this book: Responsive Web Design by Ethan Marcotte. The book is AWESOME and features robots!:) And of course there are tons more of great tutorials and books on the subject all over the Web.

But if you need to dive into responsive web design in some 10 minutes and deliver results – you guessed it – yesterday, this article may help.

So, here’s a wonderful Ethan Marcotte’s book squeezed into a short list.

Rules of responsive web design:

1. Don’t use pixels for widths of container elements. Actually, try not to use pixels AT ALL. Use PERCENT instead. If you use PERCENT, your layout will get fluid, or responsive. Meaning – it will respond to the viewing context. Get wider or shrink when you resize browser window or view website on a smartphone.
   • Don’t be scared, it’s not obligatory to convert a nice looking 960px design into 100%. But instead of setting width of outermost container like this #container{width:960px}; do it like this: #container{max-width:960px}. Difference between width and max-width CSS properties is such: Width is rigid. Max-width lets container scale down and shrink below 960px, but doesn’t let it get wider than 960px.
   • Use percent values to set widths of the rest of container elements like content, aside, columns, and so on.
   • To translate widths expressed in pixels into % widths, use formula width=target/context. E.g. you made 300px wide sidebar in 960px wide page. Sidebar width in % is 300/960=0.3125. Move decimal 2 digist to the right and get 31.25%.
   • Margins and paddings are calculated using the same formula.
2. Images need to be responsive too. So, use img{max-width:100%;} in your stylesheet.
3. Handheld devices come in many sizes and screen resolutions. To make website look good on all those resolutions, use CSS media-queries in your stylesheet. Media-queries set “breaking points” for the website. E.g. you use media-querie, that sets styles for devices with maximum screen width of 480px. 480px is a breaking point. Above this point some elements of layout will look in one way, below it – in another.

And that’s pretty much it. Now grab the YAMB responsive boilerplate, read explanations in TOOLS part below, and go design a responsive website!

TOOLS

YAMB stands for Yet Another Mobile Boilerplate. There are many great mobile boilerplates already. So why make yet another? Most of the boilerplates I saw until now are built to cater to developers’ needs (and this is the right way to do it). YAMB, on the other hand, grew from necessity to cater to clients’ needs (and this is a pragmatic way to do it).

YAMB has a set of features, which clients usually ask for:

1. Fluid layout with up to 12 columns
2. Drop-down Menu with endless and limitless levels of subs.
3. Image slideshow with nice big pictures and, yah, captions.
4. Responsive images in content part of the website.
5. And MAKE IT ALL LOOK GOOD ON SMARTPHONES AND IPAD!

How To use YAMB

1. Download archive with all the source files.
2. Unzip and inspect demo.html. The code is well commented.
3. Insert your own pictures, caption, menu links and content into Demo.html.
4. Add new styles for your own content to the main stylesheet: style.css. NOTE: you only need to edit style.css.
5. Test to see what touch ups to CSS and HTML are needed. Don’t forget to resize your browser to see how your content will look on smaller screens.

There are some things YAMB automatically takes care of:

• Adjust width of all the columns for smaller resolutions. Columns begin spanning half of the parent container width when screen size is max. 600px, and 100% of the parent container width when screen size is max. 480px.
• Convert main menu into select list box when screen size is max. 480px.
• Adjust width and height of images in slideshow (scale proportionally) for any resolution.
• Hide address bar after the page is loaded on mobile devices.

When you will add your own content and styles, remember to test often and add necessary updates to the media-queries section of main stylesheet: style.css.

Rest of the CSS files are:

1. normalize.css. Normalization stylesheet by Nicolas Gallagher and with Jonathan Neal.
2. grid.css. Responsive grid by Tiny Fluid Grid.
3. superfish.css. Main menu.
4. flexslider.css. Responsive image slideshow.

It’s advisable that all changes are done in the last CSS file, style.css. They will override the styles in the other CSS files.

And now The Actual Tools, which made it all possible:

Before anything else, I need to mention HTML5 boilerplate. A solid base and every day inspiration for so many web designers!

1. Columns. Many columns, any number of columns. To achieve this grid-like print-like layout in web design we use, well, GRIDS. Naturally. Every web designer is familiar with grids or at least herd of them, so I am not going to go on about grids. Enough said, that grids evolved into fluid grids – all good for responsive design – quite a while ago.
There are plenty fluid grid systems out there. I have chosen to use Tiny Fluid Grid by guys at Girlfriend. Mostly because they have a useful tool to generate variety of grids on their website: you can choose number of columns, max and min-widths, gutter size. In YAMB I’ve used a 12-column grid with 20% gutter. If you want to use different grid, generate it with your settings and then just overwrite grid.css with your own in YAMB css folder.

2. Drop-down Menu with endless and limitless levels of subs.

YAMB uses a fabulous SuperFish menu by Joel Birch. Why is it so fab: a jQuery plugin, allows endless levels of submenus, automatically inserts arrows to indicate parent item, allows you to create mega-subs. To read docs and get to know it better, go to the Official Website.

It is a tricky task to make drop-down menu responsive, moreover one with multiple levels of subs. There are 2 things which need to be done:

a. Hide drop-down subs on smartphones. Smartphones do not have hover states, so accessing drop-downs becomes quite an intricate game of tapping and scratching the screen to make the darn things show up. So, the saner solution is to hide the drop-downs, let user access sections of site by simply clicking the top level links, and display submenus in a section sidebar. Hiding drop-downs is done with media-queries. If you take a look at YAMB style.css, the media-queries section, you will see that drop-downs are actually allowed for tablets. That’s because on tablets they do work:).

b. On smallest resolution, where simply hiding the drop-downs isn’t enough, convert entire menu into a select box. Again, JavaScript to the rescue. Among several nice scripts out there, Responsive select menu by Matt Kersley IMHO is the nicest. It converts both ordered and unordered lists into <select> boxes, including any number of sub-levels. Sub-levels get a proper indent in the select box.

3. Image slideshow. Meet responsive FlexSlider slideshow by (C) Tyler Smith at flex.madebymufffin.com/. Besides being responsive, it has really well designed default theme, which I kept. Also, it’s quite flexible and, yah, got CAPTIONS!

4. Media-queries (thanx W3C!). YAMB has media-queries rules for:

-  iPads (portrait and landscape) min-width : 768px and max-width : 1024px.
What happens there:

• #container, FlexSlider and #colophon width is reduced  to obtain space between content and screen margin.
• Secondary navigation links get more padding. This way it’s easier to hit them with a thumb.

- Large smartphones: max-width: 768px

• Header padding is reduced to save up vertical space.
• Header h1 and h2 font size is reduced to save up space and float headers nicely.
• FlexSlider width is reduced even more to avoid horizontal scrolling.
• Drop-down subs are restricted. User will access different parts of the site by clicking top-level menu links. For further navigation, remember to always include submenus for respective section in the sidebar.
• Drop-down subs indicator arrows are removed.
• Content and aside h1-h4 font size is reduced to save up space.

- Medium smartphones: max-width: 600px

• All columns get half-the-container widths.

- Medium smartphones: max-width: 480px

• #container and #colophon width is reduced further  to obtain space between content and screen margin.
• Logo container is made 100% wide, logo is centered in it.
• Header h1 and h2 are floated under the logo and centered.
• All fluid grid columns are reset to 100% width, as they don’t fit nicely side by side anymore.
• Main navigation is turned into a select box.
• Footer columns get bottom padding and bottom border.

- Medium smartphones, portrait: max-width: 320px.
No special rules here.

Of course, you can add your own break points and rules and/or elaborate the existing ones.

Remember that YAMB is a simple and straight forward tool. Do your home work, read more about responsive web design!

SMOKING BARREL

Still no idea what to put here, sorry