Mobile optimized Vs responsive design websites

Responsive Web Design for Desktop, Notebook, Tablet and Mobile Phone

Recently I was working on responsive website design and while testing load time of the pages, I started wondering about something, but before I get down to it lets start with basics of responsive design websites and mobile optimized websites

What are responsive design websites?

In common perception, You resize your browser window and magically everything seems to adjust to the size is a responsive design website. Having a responsive design will give the website a consistent look and feel. A couple of things may not be there on mobile which was on desktop or tablet design, but in all its the same websites.

What’s wrong with that?

So, your website responses to screen sizes and changes its layout all by itself, What’s wrong with that? Well, Main problem with responsive design is not its definition but implementation. With the majorityof responsive design loads all the resources at the back like JS files, images, Other framework’s files and then adjust the layout according to screen size. You may hide certain part of a website using CSS displaynone but that doesn’t stop it from loading, it’s still loaded in the browser just hidden. Loading all these files and data which are not required, is a complete waste of network resources. Additionally, if one doesn’t own a high end smartphone or is on a slow network, your responsive site will take much more time and thus your conversion rate will decrease.

What are mobile optimized websites?

A mobile optimized websites are to load “mobile” version of the page. Oh Wait, that’s like going back 5 years in time  and loading a mobile version of website m.websiteURL.com?  m.* version websites are long dead with social sharing, SEO taking front row, providing same page with different URL surely going to impact your analytics.

Solution

There are many ways you can have a mobile optimized responsive design, thus giving your visitors a better UI experience. One of the easiest ways is to conditionally load the stylesheet required for the deviceYou may consider using Javascript multimediainstead of CSS media Queries. Use adaptive-images which delivers device appropriate re-scaled versions of your web page’s embedded HTML images. Similar to CSS, load only the JS file needed for the device and after the page onload event.

There are few server side solutions like WURFL and Device Atlas are available too and adding a serversize layer will make your responsive design smarter, faster and have better usability. But this kind of approach requires constant nudging between front end designer and back end developers. A full stack developers will be better suited for this approach.

Concluding

Responsive designs are here to stay, and having a responsive design is better than having nothing. Most of the site visitors don’t give shit about responsivedesign all they want to fast loading and easy to use website. So before sit back and relax thinking you have got yourself a responsive website, consideroptimizing the it for devices. People will visit your website more often if it opens faster on 3G/4G networks than if it just responses to screen sizes and takes ages to load.