DON’T GET LOST (IN YOUR SHEETS)

Browsing is in the air and everywhere, from smartphones to the smart TV’s. Such variety of screen sizes got birth to one quite cute method for creating style sheets that adjusts your HTML just fine, for every screen. It is known to all by name of responsive web design. It sizes the headlines, move DIVs and float paragraphs just like a charm. Like many, I got right in to it with mouth wide open. Typing and typing like there is no tomorrow. At this point you might ask, what this is about, where this guy is going with this, well…
classic layout

Assume you are freelancer, doing all the coding by yourself. Few pages including forms, images, tables, etc. and you probably found yourself in the maze of code lines, not knowing where is that one particulate selector, you need ASAP. For god sake, you just want to change font color to red! If, as we usually do, separate screen sizes in tree most common groups, 0-480px, 480-780px, 780px and above, it is quite possible that work of writing appropriate CSS can triplicate itself. So what can we do to avoid getting lost in that mishmash of code lines?
moblie layout

Big problem is often solved more easily when divided into few smaller. Following some simple steps, through procedure of creating CSS, made my sheets much more readable and easy to navigate. Well, here’s what I did, and maybe it will be of some use for you either.

1. Know how every good movie has a good scenario. Why don’t I write my own scenario, better yet, a storybook? Point is to have sketches of your pages, with main elements of those pages on paper. Sketch every page, name the elements and mark their changes. After days of typing it’s easy to get confused about your thoughts and ideas. One look at your storybook will get you right back on the track.

2. Group your elements. Make group of elements by their significance and specificity. Start with main containers and define their dimensions, positioning etc. Then define headlines, links, and paragraphs in general, for all the screen sizes you are designing for. By doing this you’ll have your page behave just as you planned.

3. Now for fine tuning. Check out that storybook from the beginning and shape up main container’s (DIVs) specific content. Whatever that can be, text, links, tooltips etc. it simplifies finding that specific rule if you clearly distinct it from the rest of code. Of course, don’t forget to include comments in your sheets. It is always good practice.

4. Crazy little thing called form… is easy to style…, yeah, sure. Anyone who tried to step out of box of predefined rules imposed by browsers and OSs know what I’m talking about. So what should poor designer do? Should he put another couple of hundreds lines of code to already pretty nice pile. Of course not. Simply put it aside! Well not aside for good, otherwise, how can you make that astonishing look? Create that neat style sheet just for your cool looking form. Consult those sketches again and think for a second, where that form will fit just fine. What’s left is to call it’s own special style sheet when and where is needed and voila.

You’ll have your pages shaped up just as you intended, fitting nicely on every screen. Best of all, your style sheets will be neat as they can be, making it easy to find your way around, anytime you need to.