Responsive design is one of the fastest growing design techniques on web related matters, mostly due to the fact that the World Wide Web it's not limited anymore to the standard PC monitor. It has turned out that mobile devices and tablets have become the number one choice for browsing the web both indoors and outdoors.
There is in fact a large number of different configurations (in terms of operating system, browser, versions, screen size, battery life, etc.) that have triggered evolution to a new device friendly - web design and resource optimized web development. Now designs have to be thought from a different perspective as they should be flexible to grow and take advantage of that space available on the device and at the same time keep the user environment optimized. This is where responsive design comes into play.
Let's backup a bit and analyze, the web before and the web now:
In Silicon Valley - San Jose, we often interact with a large density of people who own high-end devices. However, we must not assume that everyone has a top-of-the-line smartphone or tablet. We must not assume that our cultural patterns apply to the rest of the world in terms of our behavior, wealth level, or even fashion-wise. So if our target audience is diverse, we must be flexible to show our website or application properly on low end devices and take advantage of the latest technologies that new devices offer to deliver the best experience possible with resources in mind.
In this article, we are going to provide an overview on the steps required to build a customized responsive site that automatically adjusts to a broad range of smart phones, phablets, tablets, and PC monitors (eh... yeah we still have to design for that!). This is a quick guide to businesses looking to jump into mobility on their websites, apps or web properties.
Most responsive web designers will recommend that you design for mobile and grow your design to larger screens. From experience, it seems to be a matter of preference and how your idea is visualized.
If you believe that your app is targeted for mobile users, then start building for mobile and optimize for that. There are many screen sizes already in mobile and you must choose a size that you feel comfortable with. Design with flexibility in mind.
Think about a layout that it's going to work on devices vertically (e.g. device in portrait) and will expand when horizontal area is available (e.g. device in landscape). Think as if your layout is made of blocks and its widest version will allow you to see things in a different perspective but will be as good in either orientation. These blocks will include structured content and will keep its meaning intact when shown either portrait or landscape, device-wise thinking.
Make sure that the designed elements used in your web support correctly the content shown. When using clean and simple icons as guides the user focuses more on the content, appreciate the simplicity, and navigates further.
Sometimes there is a need to show complex elements. Complex elements can be broken down into simple diagrams that can be navigated or swiped between different screens. Take advantage of web programming languages to conceptualize a complex idea into simplified elements and apply interactive patterns to optimize the experience. Take for example our gallery with designs and scroll touch navigation:
The dynamics of testing responsive sites involve much more than looking for bugs in functionalities, but also looking for compatibility and interaction feedback across:
Operative Systems (e.g. iOS vs Android)
Screen Size and Proportion (e.g. 16:9 vs 4:3)
Browsers and Versions (e.g. IE7 vs Latest Chrome)
Screen Pixel Density (Laptop = 100DPI vs iPad @ 264DPI)
Device available features (Gyroscope, GPS, etc.)
Testing related to the above should be done in parallel as the project development advances. As soon as you get a first glance of the site, start emulating with different scenarios.
Our preferred method is testing on physical devices with different versions of the OS and browsers installed. However, even with dozens of devices available at our offices it becomes a tedious task when loading lots of pages and all of them and using cumbersome methods for delivering feedback. This is where developer's kits become handy, for example the Android SDK, which with a simple install allows you to emulate different scenarios.
However, we run into instances where a page (even though it's emulating a specific device configuration) it will not look exactly the same as if tested on the physical device. But then, at the same time, there is not exact way on how a site should display. It is a matter of optimizing until an acceptable balance is reached.
There is no doubt that investing into mobility is a smart move for every brand with web properties. Having a basic understanding of these considerations will allow your business to provide a more meaningful and positive feedback to the developers when creating your next web or application.
Design and development in HTML5/CSS3 using Bootstrap. The final product offers a fully responsive (mobile friendly) website made for jobseekers and employers to connect. It showcases independent menus and retina ready graphics which defines quality and extra care for all users.