mobile first

or not?

Many web developers advocate a “mobile first” approach to responsive screen design. Most reasoning behind such an approach makes sense, so I won't argue against those who find it to work fine for them.

I usually do not take the “mobile first” approach, as I see no advantage in designing “from bottom up”, or from either end really. I take one content carrying source-code, and style it for the various media it is intended for. That “screens are screens” on both large and small devices, does not change my thinking.

logical split

I prefer the “logical split” approach to responsive screen design. Screens wide enough to present two or more columns on, get “wide screen designs”. Screens so small that only one column can be presented properly on them, get “SSR designs”.

Most important in my approach is that never do the two designs meet or share any styles across the break-point. Thus, no need to style up, or down, override or complement styles from one design to the other.

Designs above and below the break-point (500/501px for this site) are coded from scratch in separate stylesheets, only (for the most part) using the same IDs, classes, and (of course) elements. @media queries keep them apart at the break-point, and are also used to introduce minor optimi­zations within each of the two screen ranges.

In most cases window-width overrides screen-width, making browsers switch layout/design at the break-point when window-width is changed that much.

@mediaquery support

Support for @media queries with arguments, is near perfect across browser-land today. IE9+ support media queries, and the old @import trick works perfect if IE7 and older must be supported – I choose not to.

The only older browser that does not support media queries, still around in high enough numbers to justify styling, is IE8. Not the easiest browser to separate and control in CSS alone, but if one – like me – never liked conditional comments, it can be done.
NOTE: IE8 is pretty much ignored now.

“responsive” equals “fluid”

True fluid design has always been responsive. Someone just gave it a new name as more people figured out that they had to start designing for the wider screen range provided by mobile phones, tablets, and who knows what. Thus, what worked well a decade ago works well today, only that the degree of support in browsers has grown considerable over the years.

Only a few element-width and gutter/gap sizes change from step to step in my design. Having lots of well-organized white-space makes content easy to separate and read on fairly wide screens. On narrower screens, maximizing the percentage of screen-space actual content can spread out on, becomes increasingly important.

In addition to that, font-size gets slightly smaller step by step towards the narrowest screens. On smallest step on regular screens font-size controls some dimensions, assuring content gets enough space to spread out on when space for anything is at a premium.

Width-steps within each screen range, start and end at what may look like arbitrary numbers. No actual screen sizes fit those numbers exactly. This is intentional.

I want as many screens and/or window sizes as possible to fall nicely within one or another of these width-steps, making adjustments fairly stable on each screen these pages happen to end up on.

more code to write?

Yes, my approach results in slightly more CSS code to write, or copy. The improved design-control and ease of maintenance over such a wide screen range, more than weigh up for this in my view.

I am, generally, more interested in visible and functional results than in s.c. optimized code, so having ten to twenty percent larger stylesheets is an alright tradeoff when it shows positively on the outcome.

progressive

My method requires less and less CSS for every old browser that drops in numbers to levels where support is no longer an issue. Reason being that nearly all extra stylesheet code/weight is there to pull old browsers along for the ride.

Disconnecting stylesheets that are no longer needed, is the easiest thing in the world the way I have organized things. With them goes valid and non-valid hacks and workarounds for old browsers, and one day all that garbage will be gone.

sincerely  georg; sign

Hageland 04.apr.2014
last rev: 05.aug.2016



www.gunlaug.com advice upgrade advice upgrade navigation