Respon­sive design has become a pop­u­lar buzz­word, every­one wants to use it, but the ini­tial start can be a daunt­ing process. It’s become com­mon­place to stay con­nected to the online world 24/7. Your web expe­ri­ence car­ries over from your desk­top com­puter at work, to your mobile/tablet device on the bus, to your tele­vi­sion and gam­ing con­soles or even your car’s con­sole interface. With the demand to main­tain a seam­less expe­ri­ence across all plat­forms, respon­sive design has become a key solu­tion for web devel­op­ers to tackle this ever-growing environment.

Respon­sive is a front-end devel­op­ment tech­nique for devel­op­ers to achieve mobile, tablet and lay­outs across vary­ing breakpoints. Responsive design uses a com­bi­na­tion of fluid grids and CSS media queries to cre­ate designs that adjust while still keep­ing the site both attrac­tive and usable. It requires a vig­or­ous plan­ning process and thor­ough research for your site’s usabil­ity. Once achieved, how­ever, respon­sive design reduces the cost of main­tain­ing your web and mobile sites and ensures that your con­tent remains updated, and your brand image remains con­sis­tent across all channels.

Given you may already have famil­iar­ity with respon­sive design, today’s post will focus on clar­i­fy­ing some key chal­lenges and pain points for mak­ing the switch to respon­sive design.

Respon­sive vs. Adap­tive: What works for me?

Respon­sive and adap­tive are used as dif­fer­ent front-end devel­op­ment strate­gies in achiev­ing the same goal of imple­ment­ing a mobile site. Both meth­ods allow web­sites to be viewed on var­i­ous devices and pro­vide vis­i­tors with a bet­ter mobile user expe­ri­ence. The key dif­fer­ence is respon­sive is treated as a sin­gle web­site, whereas adap­tive can be treated as two sep­a­rate mobile and desk­top web­sites. Respon­sive can be an all-encompassing web­site to build and main­tain, but it does come with it’s tech­ni­cal con­sid­er­a­tions. Devel­op­ers can’t re-arrange con­tent on the site arbi­trar­ily. The con­tent can show/hide and morph in style, but must be in the same struc­tured order. If your mobile expe­ri­ence varies much dif­fer­ently from the desk­top, adap­tive may be the best route to take.

Mov­ing from a fixed-width web­site to a respon­sive site is not always a fea­si­ble solu­tion. Fixed-width sites don’t need to take mobile-first design into account so the con­tent will be struc­tured dif­fer­ently.  The code is engi­neered in a less flex­i­ble way, and rebuild­ing the tem­plates and stylesheets almost cer­tainly takes less time in devel­op­ment than retro­fitting an old fixed-width layout.

Ulti­mately, it comes down to the tar­get audi­ence and goals. Under­stand what the site’s users are look­ing for and how they inter­act on dif­fer­ent device envi­ron­ments. Your web­site might serve a pur­pose as infor­ma­tional, but your audi­ence may be using it for strictly social pur­poses on mobile. Tai­lor your strat­egy to deliver the most rel­e­vant con­tent in the quick­est and short­est path pos­si­ble. While respon­sive may be the ‘lat­est and great­est’, it might not always be the most effec­tive solu­tion for your mobile strat­egy. Ana­lyze what your mobile require­ments are, and work with your front-end devel­op­ers to decide on the best imple­men­ta­tion method.

Mobile First

The key for plan­ning ‘mobile first’ in respon­sive design helps keep the focus on many vari­ables such as mouse point­ers ver­sus fat fin­gers, device capa­bil­i­ties, load­ing times, and con­tent hier­ar­chy. This plays a part in estab­lish­ing the most impor­tant con­tent on the site and deter­min­ing a clear, short path for users to access what they are look­ing for. It can elim­i­nate unnec­es­sary ele­ments, reduce page load times and uti­lize built-in device fea­tures such as geo-targeting. As you work out­ward in the lay­out, you can enhance for wider screens rather than attempt to squeeze in.

Con­tent Hierarchy

Spend the time/effort/budget to define your con­tent before start­ing the design. Talk to your stake­hold­ers, legal depart­ments or any­one else with a vested inter­est ahead of time, or you may be scram­bling later to imple­ment a solu­tion in a ‘hacky’ way. Deter­mine your site archi­tec­ture and pri­or­i­tize con­tent. Go in depth with spe­cific ele­ments; Not just header ver­sus footer, but also the search bar if it’s key in the tablet expe­ri­ence, or per­haps social actions if your users are more drawn to them in the mobile envi­ron­ment. Con­dense menus that may con­tain unnec­es­sary links in a spe­cific envi­ron­ment. The ele­ments can morph in design or be hid­den, but the order of the struc­ture must be the same. Hiding and show­ing ele­ments at var­i­ous break-points plays into the con­tent strategy.

Break­points

Instead of try­ing to pre-determine each break-point, design comps serve their pur­pose as more of a mood board. A sin­gle JPG only shows a por­tion of the lay­out poten­tial of a fully flex­i­ble respon­sive site. Coding the HTML and CSS struc­ture involves a level of experimentation. Determining break-point cen­ters around how real con­tent will shift and reflow at var­i­ous widths, so this lay­out can’t be pixel per­fect. It’s impor­tant to see how real con­tent will inter­act with visual ele­ments, so steer away from using ‘Lorem Ipsum’. This entails a bit of ‘QA’ time to play around with the code; use min-width media queries from the small­est view and shuf­fle code to work out­ward from there. Be sure to test on desk­top, tablet and mobile con­cur­rently while developing.

Above all, allow your devel­op­ers and design­ers to help lead the way. Don’t be afraid to sketch, pro­to­type and dis­cuss. Respon­sive design requires open com­mu­ni­ca­tion and seam­less col­lab­o­ra­tion. It takes a few steps to rethink how you approach web design solu­tions, but with the right plan­ning and antic­i­pa­tion for chal­lenges ahead, you’ll be able to imple­ment your new solu­tion respon­sive design smoothly and successfully.

3 comments
JTech communications
JTech communications

We are a web development company that can build responsive sites, and one of the main benefits of going responsive is that you can be prepared for situations that you didn't know existed.  For example whatever comes next after phones and tablets could look very different, and it is likely that responsive will be cheaper and easier to adapt to that environment than an adaptive or static website.  The problem with responsive is always the upfront cost, but we have started recommending that any of our clients who are building a site should have it be responsive.  Rebuilding a site with responsive is very expensive, but if you need a new site anyway it should probably be responsive.


Our human interface designer wrote a blog post about some of the design challenges associated with responsive design, it is at https://www.jtechcommunications.com/blog/blog-detail-7 if you would like to read it.

jacobfavre
jacobfavre

"allow your developers and designers to help lead the way" - this is a great point. Developers need to also work with the designers to ensure the design fits into the framework of the site.  Great article.

scottjenni
scottjenni

The responsive are much more attractive then the static design. User love to interact with the design... I like your article..Keep posting