• Web Design

Making Responsive Web Design Work For You

If your commercial and business-generating website is any more complex than a few static HTML pages, eventually you will face this question: “What about mobile app access?” Should you create apps for mobile platforms, or should your website be browser-access only? The answer may be a surprising one.

If you are a cloud service provider, or if you are a content aggregator, or if you need to use the devices’ capabilities, creating mobile apps clearly makes business sense. You will have access to native APIs as well as the devices’ own functionality (e.g. camera, microphone, GPS). For most commercial website operators, though, the mobile app ecosystem is not necessarily ideal. It entails app design, coding and support for multiple platforms (a minimum of Android, iOS and Windows). Getting the user experience (UX) consistently right on all platforms can get complicated. All of which equals fewer resources available to actually build your core services.

So, a browser-access-only website may be the more appropriate choice. But now another question arises: “How do I provide a great UX across all screen sizes?” This is where Responsive Web Design (RWD) comes in. The idea behind RWD is to ensure that websites remain perfectly usable and fully viewable no matter how large – or small – the screen size is.

Gettingyour website to follow RWD guidelinesstarts with ensuring that your website building software supports RWD (which most modern CMSes do) and using a responsive template. TemplateMonster, for instance, has thousands of responsive templates covering almost all website building software and CMSes. This takes all the guesswork out of your hands and practically ensures a RWD-compliant website from the get-go.

Testing your website after the responsive templates have been installed is a must. If your site was a pixel-perfect design in the past, get used to the fact that responsive design will break it. As a result, much of your time will be spent in checking that your new layouts work well on a variety of screen sizes.Even as screen sizes and display resolutions increase, the responsiveness of your template and mini-apps will still be important when it comes to aspect ratios, so check your website’s output in both portrait as well as landscape modes.

And above all, make sure that your CMS mini-apps (e.g. plugins in WordPress, extensions in Joomla) also support RWD. Developers create very popular Joomla extensions that are responsive – not necessarily true of all mini-apps, even now. Not all such plugins or extensions need to be responsive, of course – only those that are part of your website’s user interface (UI) – but a single misbehaving extension can ruin all your hard work, so it’s worth checking. There are, after all, times when a plugin or extension that does not itself interact with your UI, and yet may interact with another extension that is UI-centric. So it is highly recommended that you test your website after each plugin or extension is added.

Examples of extensions that should follow RWD guidelines include content sliders, calendars, IM/chat boxes and photo galleries. Remember that your website is only as useful as the content it serves up, and users only care about the content they can easily gain access to. A fully responsive website, with fully responsive extensions, will make it easier for them to access and use, which will encourage them to come back to you against your non-responsive competitor sites.