…This is invaluable for flexible layouts, Because it means that your padding, margin and border values will always be honored; the browser will simply change the width of the elements until they fit the parent. If the parent changes in size, so will the flexible boxes within it…

W3C working draft

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 or/and mega subs.
• 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

What’s the use of it?

1. Gives you total control: resize to ANY resolution you want, not just presets.
2. You can test the document you’re coding locally on your computer, without even having it online.
3. Easy-peasy

Enjoy: Screen Ruler

Quick tips to save you some time and head scratching (“doh, why is it happening on mobile now?” kind):

• Copy at least @media (max-width: 800px){} into child theme’s CSS file
• As soon as you override any structural element’s width, don’t forget to go and unset those changes in the @media (max-width: 800px){}. At least. Do it right away. Otherwise, you’ll forget which container now floats left with width 50%, instead of being 90%, who got new paddings/margins, etc. So, it’s really a good practice to do it for desktop and for mobile at once.

And now seriously. Get a profession and blog about it;) Stop growing the entropy of Internet!!!

DOWNLAOD SOURCE FILES.

Rounded Rectangle dialog

New rectangle covers top left quarter of sheet rectangle

ALT + drag smaller rectangle to duplicate it and place duplicates over the remaining 3 quarters of the sheet rectangle. Select all 4 smaller rectangles and hit CTRL + [ to place them behind the sheet rectangle.

Intersect

Repeat this with the rest of fold rectangles. You will get 4 fold rectangles perfectly aligned on top of the paper rectangle, each having one outer rounded corner. Select them all and change their fill color to #EDE3D9. Yes, we are making a sepia paper:) .

Select mesh points on inner fold rectangle sides. Change fill color. Click to enlarge this thumbnail.

Now we got the shade, which appears on paper sloping down to its fold. You can drag mesh points and its handles with Direct Selection Tool to play with the shade. You can also add more mesh points to get more elaborate and realistic shading.

Distorting the fold rectangle with Warp Tool

After you finish editing first fold rectangle, repeat steps 6 and 7 (Making Mesh and distorting the shape) with the other 3 fold rectangles. *At this point you need to hide the Paper layer, if you already didn’t, so you can immediately see the “holes” between the folds*. While distorting the folds, it is best if the dints you make on adjacent sides of 2 folds are opposite of each other, because this will give you a more realistic look. Don’t forget to bring fold rectangles back to their original places after editing, so you can see and appreciate the final result. You can select and touch up your fold rectangles till you are happy with the result.
This is what I got:

Click to enlarge

Rectangle placement. New bigger rectangle has darker fill.

With both rectangles selected, hit Minus Front button on your Pathfinder Panel. With Direct Selection Tool select left corner of the resulting shape and drag it up a little (see screenshot below).
Now hit G to call Gradient Fill Tool and click the resulting “corner” shape with it. With shape selected, open Gradient panel, create a third gradient slider in the middle. Set left and right sliders to white, and middle slider to #9B8E84. Dragging Gradient Tool handle, adjust your gradient to look like this:

Gradient shadow

Here are at least 2 very nice sets of free ink splatters (some of those splatters are included in this tutorial source):
http://free-vectors.com/paint-splatter-vector/
http://123freevectors.com/ink-paint-splatter-free-vector/

Most importantly, you can doodle or write on your aged paper with a graphic tablet!

I use my paper as background for my stock illustrations.

NB: if you intend to use old paper as part of stock illustration for sale, you will need to edit it, so it becomes your unique creation. You will also have to create your own ink splatters and grunge textures. The best way to do it is to actually splatter paper with watercolor paint, scan and custom-trace it.

KeyRelevance wanted an upgrade for their logo, including creation of a graphical element, which can be used throughout branded materials.
Prowebdesign came up with a new color scheme and a graphical element, which combines the ideas of: target, hitting the target, search engine location pin.

More for this client: desktop website, mobile website.