Responsive Design and Development Framework

So you are sitting in a meeting this morning and you are hearing the word responsive web design being thrown around. So what is it exactly? Responsive design and development is not new by any means. It was available in CSS2, but it being browser supported now that tablets and mobile devices are becoming more prevalent for business applications.

So what does this mean for your role?

You need to develop the site so that the text, media, and navigational elements scale with browser size.

How do you do that properly? I prefer to build it in a fluid environment where I utilize min and max widths to help restrict confusion and keep a consistent brand that scales as you make the browser window smaller.

The three images are just with my browser on the desktop scaling, it looks great on a tablet and phone. Everything is touch-enabled thanks to Twitter bootstrap.

My Framework at www.Lechlak.com


.row-fluid [class*="span"]:first-child {
margin-left: 0;
}

.row-fluid .controls-row [class*="span"] + [class*="span"] {
margin-left: 2.127659574468085%;
}

.row-fluid .span12 {
width: 100%;
*width: 99.94680851063829%;
}

.row-fluid .span11 {
width: 91.48936170212765%;
*width: 91.43617021276594%;
}

.row-fluid .span10 {
width: 82.97872340425532%;
*width: 82.92553191489361%;
}

.row-fluid .span9 {
width: 74.46808510638297%;
*width: 74.41489361702126%;
}

.row-fluid .span8 {
width: 65.95744680851064%;
*width: 65.90425531914893%;
}

.row-fluid .span7 {
width: 57.44680851063829%;
*width: 57.39361702127659%;
}

.row-fluid .span6 {
width: 48.93617021276595%;
*width: 48.88297872340425%;
}

.row-fluid .span5 {
width: 40.42553191489362%;
*width: 40.37234042553192%;
}

.row-fluid .span4 {
width: 31.914893617021278%;
*width: 31.861702127659576%;
}

.row-fluid .span3 {
width: 23.404255319148934%;
*width: 23.351063829787233%;
}

.row-fluid .span2 {
width: 14.893617021276595%;
*width: 14.840425531914894%;
}

.row-fluid .span1 {
width: 6.382978723404255%;
*width: 6.329787234042553%;
}

.row-fluid .offset12 {
margin-left: 104.25531914893617%;
*margin-left: 104.14893617021275%;
}

.row-fluid .offset12:first-child {
margin-left: 102.12765957446808%;
*margin-left: 102.02127659574467%;
}

.row-fluid .offset11 {
margin-left: 95.74468085106382%;
*margin-left: 95.6382978723404%;
}

.row-fluid .offset11:first-child {
margin-left: 93.61702127659574%;
*margin-left: 93.51063829787232%;
}

.row-fluid .offset10 {
margin-left: 87.23404255319149%;
*margin-left: 87.12765957446807%;
}

.row-fluid .offset10:first-child {
margin-left: 85.1063829787234%;
*margin-left: 84.99999999999999%;
}

.row-fluid .offset9 {
margin-left: 78.72340425531914%;
*margin-left: 78.61702127659572%;
}

.row-fluid .offset9:first-child {
margin-left: 76.59574468085106%;
*margin-left: 76.48936170212764%;
}

.row-fluid .offset8 {
margin-left: 70.2127659574468%;
*margin-left: 70.10638297872339%;
}

.row-fluid .offset8:first-child {
margin-left: 68.08510638297872%;
*margin-left: 67.9787234042553%;
}

.row-fluid .offset7 {
margin-left: 61.70212765957446%;
*margin-left: 61.59574468085106%;
}

.row-fluid .offset7:first-child {
margin-left: 59.574468085106375%;
*margin-left: 59.46808510638297%;
}

.row-fluid .offset6 {
margin-left: 53.191489361702125%;
*margin-left: 53.085106382978715%;
}

.row-fluid .offset6:first-child {
margin-left: 51.063829787234035%;
*margin-left: 50.95744680851063%;
}

.row-fluid .offset5 {
margin-left: 44.68085106382979%;
*margin-left: 44.57446808510638%;
}

.row-fluid .offset5:first-child {
margin-left: 42.5531914893617%;
*margin-left: 42.4468085106383%;
}

.row-fluid .offset4 {
margin-left: 36.170212765957444%;
*margin-left: 36.06382978723405%;
}

.row-fluid .offset4:first-child {
margin-left: 34.04255319148936%;
*margin-left: 33.93617021276596%;
}

.row-fluid .offset3 {
margin-left: 27.659574468085104%;
*margin-left: 27.5531914893617%;
}

.row-fluid .offset3:first-child {
margin-left: 25.53191489361702%;
*margin-left: 25.425531914893618%;
}

.row-fluid .offset2 {
margin-left: 19.148936170212764%;
*margin-left: 19.04255319148936%;
}

.row-fluid .offset2:first-child {
margin-left: 17.02127659574468%;
*margin-left: 16.914893617021278%;
}

.row-fluid .offset1 {
margin-left: 10.638297872340425%;
*margin-left: 10.53191489361702%;
}

.row-fluid .offset1:first-child {
margin-left: 8.51063829787234%;
*margin-left: 8.404255319148938%;
}

[class*="span"].hide,
.row-fluid [class*="span"].hide {
display: none;
}

[class*="span"].pull-right,
.row-fluid [class*="span"].pull-right {
float: right;
}