The sales for smartphones and tablets around the world have increased significantly in the past couple of years. One of the biggest advantages of these devices is the ability to browse the web wherever you are in a convenient fashion. In recent years, statistics have shown that there are huge growths in smartphone and tablet web browsing.
From the graph shown above, the percent of mobile and tablet users that browse the web have increased from about 1% in early 2009 to about 10.3% by late 2012. We expect this growth to continue along with more diverse web viewing devices. Since different devices have various screen sizes, it is important to make sure that your website looks and fits nicely across all the devices, and this is where responsive web design comes into play.
“Responsive web design (often abbreviated to RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)” (Source: Wikipedia). Responsive web design is different from building a completely separate mobile or tablet website, because responsive web design uses a single template that “responds” to different viewing situations, such as different screen sizes and devices, whereas a mobile website uses a different template and stylesheet from a desktop website. Thus instead of starting from scratch or updating the same contents across different versions of your website, you can essentially make minimal modifications to an existing design layout and apply it to a new screen display! It can save quite a lot of time and it helps with design consistency.
The three key elements of responsive web design are media queries, fluid grid concept, and flexible images.
Media queries are CSS modules that developers can use to detect different aspects about the device that the user is using. One of the most used features of media queries is the ability to detect screen width and height of the user’s device. Media queries can detect different screen sizes, screen resolutions of devices, etc… Let’s say we decided to take out a section of our website just for people with a small screen because we don’t want all the content to be jammed together. What we can do with media queries is to apply a rule to take out that section whenever it detects a screen size smaller than 600px. It’s that simple!
The next element is the fluid grid concept, which emphasizes the use of a size measurement unit named “em” instead of the commonly used “pixels” and “points”. The advantage of using “em” is that it is scalable, while the other two are not. With “em”, you do not have to scroll when you are viewing a particular website on desktop and when you are viewing on a mobile device. Different blocks in the website can also “flow like fluid” with a fluid grid design. Content displayed in four columns on a bigger screen can be made into two columns by flowing the third and fourth column under the first and second column, making it viewable to mobile and tablet users without forcing them to scroll horizontally.
The last element is flexible images, which simply means that images on the website are scalable and looks correct across all screen sizes. It is important to make images on a website scalable because we do not want oversize images that are intended for large screens to be covering up other contents on the website, making the website looks messy and unprofessional.
Responsive web design, is without a doubt, the web design trend of 2013 and many years to come simply because the web browsing market for smartphones and tablets continues to increase each year. It is important to not leave them out for a more pleasant experience while browsing the web. Contact Ready Artwork now if you are interested in building a responsive website!