The latest Cisco® Visual Networking Index (VNI) Global Mobile Data Traffic Forecast projects that by the end of 2013 there will be more mobile-connected devices than there are people on earth. The growth of myriad screen sizes for these mobile devices has brought the need to recode old HTML or risk losing eyeballs.
Responsive web design was introduced to help fix this. Responsive web design takes advantage of new features in CSS3 to actively modify the sizes in mobile products has brought the need to recode old HTML positioning, size and presence of web page elements based on screen size, orientation, and pixel ratio.
Although the popularity of responsive web design is growing within creative circles, some cite limitations as keeping it from being a viable solution outside of blogs, design portfolios, and news sites. I sat with MorWeb CMS Founder and CEO, Murad Bushnaq to understand how his HTML5-based solution, and focus on back-end usability address each.
ANDRE: Critics will argue that screen size and pixel ratio of responsive design are not enough to determine device type. Is this an accurate limitation?
MURAD: The key is not to focus on device type. At first, we would say to ourselves “it needs to look great on devices,” but the truth is there so many devices and browsers out there that creating the perfect responsive site for each is impractical. To look great on all of them is an extensive amount of work and not affordable for most clients.
We approach responsive design with a couple things in mind. First, we don’t focus on any specific devices or even fixed pixel ratio. Instead we think how will the content behave within a range of device’s pixel dimensions, for example 700px-1000px. The advantage to this approach is you can cover more devices, and in the process, learn which elements within your design need extra finessing for other ranges.
ANDRE: It’s said that responsive design does not allow for the creation of in-depth, touchscreen specific interactive elements when the site is visited on mobile devices. Rather, the solution only focuses on the re-styling of existing elements. Is this accurate?
MURAD: If you think about what responsive design really is…its an alternate version of your website using CSS for a variety of screen resolutions. Touch of course behaves different than a mouse, however, they both still use the same CSS to display a website. So ask yourself first, “Does your website engage visitors and meet business objectives on ANY device?” If it doesn’t be prepared to create additional CSS, Javascript and even new graphic elements to create the responsive design that does. Re-styling of existing elements is merely the beginning.
ANDRE: Tablets like the Samsung Galaxy Note series, are growing in popularity. While they have the pixel count of small tablets, they are closer to phones in size. Does this mean they are better served with phone user experience (UX) and user interface (UI)?
MURAD: Not necessarily. What happens is that HD device’s will scale your website down to the native resolution of your responsive website OR you can define the pixel ratio using the viewport meta tag. For example, your responsive design should include common resolutions such as 720 pixels, the viewport meta will help the device scale its own resolution down to whatever you define.
What does this mean? You don’t need to create additional responsive css or alter your UI, it will simply respond to the closest pixel ratio set in your responsive website.
ANDRE: In responsive design, desktop layouts are transformed into mobile layouts when the browser window is sized down. Does this hinder UX towards touch interaction?
MURAD: It actually helps. The whole idea of responsive design it not to scale down but to make it work better; to almost re-layout the design, if you will. So responsive will detect touch enabled devices and update the layout, for example, making buttons, form fields and navigation items larger for touch.
Responsive design is not a tool, its a conception and is only limited by the imagination of the designer and his/her iteration of how to adapt content for different resolutions. And that’s what we built Morweb Content Management System (CMS) to enable–unbridled flexibility for designers and Facebook-like ease-of-use for non-technical users to maintain incredibly responsive websites.