Mobile device development has brought a change to how people monitor their e-mail and interact with the internet. Just a few years ago, users would have to let their PCs dial up to a web server through a telephone line, just to check their electronic mail. The internet operated like a telephone call. Now, users can check their e-mail, view online media, instant message and even video call with mobile devices smaller than a television remote control. It’s safe to say that the internet is advancing from the desktop computer. Gone are the days when you would have to sit at a computer to use the internet. With this change, websites have to be able to flex to be viewed on other devices. Web developers and designers need to take mobile into account. Yes, websites do look great on a 24 inch monitor, but how many people have a 24 inch monitor? Not that many when you think about it. Most people are on the move these days, whether in transit, out with friends or at work. They have mobile devices such as tablet PCs and smart phones. So while desktop PCs are taken into account, the general approach is to build websites that consider mobile devices first. This approach is called the Responsive Website Design (RWD).
Responsive Web Design (RWD)
Responsive Web Design is achieved through these actions when developing a website:
- Fluid grid design – Fluid grid design enlarges or shrinks web pages with percentages rather than with sizing units such as pixels. The code usually has a percentage standard and a maximum size that depends on the type of device that makes the request. So, if a smart phone requests a web page that is shown on a computer screen, just as an example, maybe the output width would be 40% of the normal size with a maximum value 241px (pixels). We have to also take into account that sometimes the device changes the webpage from a landscape view to a portrait, meaning that the width becomes shorter than the height. Some devices even revolve the display and change it from landscape to portrait or vice-versa when the device itself is rotated.
- Mediaqueries – Mediaqueries use CSS (Cascading Style Sheets), a language used to analyze the visual of data, to determine how to fit web pages on devices. It determines the media type and display format internally by answering questions about different media features in true or false statements. Some of these features include, color, width, height, device height, device width etc.
- Flexible Images – Images are able to be sized according to percentages which are relative to their original size.
Responsive Web Design solves device display problems along with many others. It only requires one URL, website and design to serve multiple devices. It also prepares your website to handle future devices. This puts a lot of dependency on the client’s end. What if we could let the server handle some of the work?
RESS ( REsponsive Design + Server Side Components)
Responsive design with Server Side components allows the server to handle requests such as Mediaqueries and optimize on the server. So the server is used to serve files and generate dynamic content. How can this be done effectively? Well, a great idea is to break down the website into fragments and put it back together on the device. The page is put back together depending on the way that users interact with the page, the browser that is used, specifics of the hardware, the speed of the device and the time it takes to run. Mobile devices are very intricate and different. This is the reason mobile is considered first in design.
The Progressive Enhancement approach results in the client side allowing the browser to scale up and the server delivering caches. The client side detects the device and the features. Combining both allows the client side to share the features with the server, and the server sharing knowledge with the client side. Due to the complex nature of RESS, it is a last resort when you need things to work properly.
James Dean is a avid hiker, that lives & breathes the outdoor life, capturing with his childhood passion of photography. Following his interest in business, he writes columns for Drupal developers in Orange County . Follow him on Google