The colossal influx of mobile devices, the sheer number of users, and the fact that it’s the information age means more people are connected to the web with devices they can carry around or wear. Even the most skeptic of critics can’t deny the fact that web design has now become ‘mobile-friendly’ and going responsive is the ‘only’ way to go.
Fluid layouts, nested grids, responsive wireframes, mobile components… the elements are endless. The theory is to put ‘mobile-first’ for greater adaptability. Speed requires performance before aesthetics. With all that, designers already have to work hard at curbing their baser instincts and creativity to make everything agile and functional.
No wonder they pull their hair when they run into snags like…
Showcasing Design Drafts
Problem:
This sounds like a non-issue until you’re pulling your hair trying to explain website elements and the 960-grid system to your clients. Working out the re-alignments will be of little use when your clients insist on seeing, with their own eyes, the design drafts.
Solution:
You can do this in two ways. Make sketches of major web pages (Homepage, About Me, Contact, Single Post, etc.) and show how they will look on most popular device dimensions (standard tablet, smartphone, PC, etc.). If the client requested to fit a particular device, include that too, obviously.
Or you can go the old pen-and-paper route and use mock-layout sketches to show the major components on webpage (navigation, side bar, header, footer, etc.) and show how they will fit with different resolutions.
Responsive Navigation
Problem:
Different orientations, sizes, resolutions, browsers… a thousand different devices! How is a designer supposed to create navigation which doesn’t feel cobbled together? Something that allows easy browsing without making them haul ass off your site in the space of a second? How to make something that is simple to use and looks great at the same time?
Solution:
There are no shortcuts to it. If you know your audience (or your client’s audience), the site’s purpose, and content, designing a unique responsive navigation will come easily to you. Depending on those same grounds, you can experiment with multi-level and multi-level push menus, full-width or retina-friendly tabs, off-canvas menus, and so much more.
Adapting Images
Problem:
“Break monotony with images.” –Say the elders (and today’s adept content marketers)
If only it were as easily done as said…
Websites are large, mobiles are small. A high def picture will take up bandwidth just loading on mobile, rest of the page be damned. It either won’t show up, or make your users seek … whatever you have to offer somewhere else. Squashing them may be considered sacrilege (they’re high def!). So what’s a designer to do?
Solution:
Enter: the lazyload_images filter. This little bit of code will save your users’ devices the trouble of loading images that they’re not seeing. Additionally, designers can make the job easier by using SVG format for images. The quality remains the same, but with added benefits of being scalable and light-weight.
Adapting Data Tables
Problem:
“Oh so you were able to adapt images. Well done indeed. Now have fun trying to adapt data tables to unknown dimensions. And remember, they’re important because that much data just isn’t fun to read through and we need our users engaged. So, no simply ‘doing-away’ with them either. (Insert maniacal laugh here)”
This is insane…
Solution:
…And as it happens to be, laughably simple. You simply rotate the table by 90 degrees to accommodate orientations. But that only works with smaller tables… 3×3, for smaller screens, or 4×4 if you’re pushing it.
And if you can’t win, cheat like crazy. In this instance, use a smaller version for mobiles with links to the full one. Or convert the table into a pie chart. And if that’s not possible, hide some of the rows/columns and make them into dropdown menus.
Performance or Experience?
Problem:
Here’s the conundrum of responsive design. Since you’re now available to a considerably larger number of people, it’s a given that your site is getting more traffic than ever. Add heavy-weight responsive sites to the mix, and you’ll probably be able to hear your servers groaning under the strain.
That’s not to mention the spiked up loading times for users. Oh look, the traffic is decreasing. Wait, a second…that’s not a good thing.
Solution:
The only way to deal with this is ‘content-first’ approach in design, with conditional loading sprinkled on top. Content-first means sticking to what’s necessary, because let’s face it, users are here for a purpose, and admiring your design is the last thing on their minds right now.
Content-first is harsh, but necessary. This will not only accelerate performance; it will keep your design lean. When you remove the ‘bells-and whistles’, you get a clean design that looks sharp and loads fast.
Converting to responsive
Problem:
This is the digital equivalent of buying a rusty Shelby Mustang ‘65 and turning it into GT500KR. For non-car-crazy people, this is the digital equivalent of turning Benjamin Button into Brad Pitt.
Conversion is only slightly less difficult than creating an entirely new responsive site. So when is it feasible to make a respectable, long-standing fixed website responsive instead of burying it and making another one? Do you need to do put it through conversion? Can’t it be left alone?
Solution:
No. You can’t leave it alone and you know it.
Conversion is actually easier for smaller, simpler websites. Tougher is converting the more complex designs. Designers can use Greenfield to rebuild. Or you can use Bootstrap or Foundation and add meta tags and break points in your style sheets. Basically it involves going from fixed width to percentage-based queries. Keep in mind that this is a huge undertaking and should be taken one-step at a time, or you risk messing up big time.
Compatibility issues with some browsers
Problem:
Older versions of some browsers and Internet Explorer can create compatibility issues. Basically, if your site has JavaScript and CSS3 media queries, you cannot include people using IE8 or older in your audience (which makes for like, 5 people).
It’s not the immensity; it’s the principal of the matter.
Solution:
You can add an extra style sheet for IE users (aren’t they special). Or use Polyfill.
Wrapping Up
Responsive, ‘mobile-friendly’ design has become so popular so fast that we forget that it’s still relatively new. While that means you are free to experiment like a mad-scientist, you’ll also be (almost) on your own should you get into a problem the size of Frankenstein’s monster. That’s because there’s no official set of solutions to turn to.
That’s changing steadily. Google recently began ranking mobile-friendly sites higher on search results.
So even if you face challenges, work it out, because the world is going responsive and you want to be a part of it.
Author Bio: Tracey Jones is a certified web developer by profession who provides WordPress customization service at HireWPGeeks Ltd. She has vast experience in creative and technical writing. You can follow her company on various social networks like: Twitter, Facebook and GooglePlus.
No Comments