From Laptops to iPads: Lessons in Responsive Web Design

Let’s face it: we don’t only use desktop computers or laptops in order to view web pages anymore. Recent studies show that there has been a spike in users browsing the web through various devices like tablets and smartphones, which have different solutions as opposed to regular laptop or desktop screens. So what does a modern web developer have to do in order to create websites that are friendly for these devices?

Viewing the same webpage using various devices

Adjusting your website’s design

If you’re a web developer, it’s a good idea to adjust your current web design so that the website can have the same appearance, no matter what the viewer’s screen size is. Every website should work on all devices in order to provide a consistent experience. A web design that works well on all possible devices is called a responsive web design.

Use flexible elements for responsive web designs

In order to create a responsive web design, choose elements that are flexible. The website’s typeface, photos, or the grid, should adjust well to different resolutions. Going for a simple layout will help keep the look of your website uniform for all devices.

Navigational elements for different devices

How do I adjust my site?

Mind the Grid
In order to ensure that your design is responsive, use designs that are grid based. It’s advisable to mind the three different widths of the browsers: 320×480 pixels, 480×768 pixels, and 760 pixels or more.

Image Size and Quality Matters
It’s tempting to add plenty of high quality images, but if you want to make your website friendly for all devices, you should minimize the number of images, since users on mobile devices may have slower internet speeds and may also have limited browsing time. Multiple file sizes and versions should also be available in case you need to attach something for download.

Big Letters? Small Letters?
Remember that choosing a responsive typeface is important. Apart from choosing an easily readable font, one should also choose the right point size. A tip would be having 50-75 characters per line on a desktop, and 35 to 50 characters on mobile.

Tap to Navigate
Tablet or smartphone browsers tap their screens to navigate through websites, so make sure that your navigational elements are easy to tap and are large enough for the convenience of your users.

Take note of browsing habits!

While these tips may be handy now, we don’t know how web browsing will change within the next few years, when new devices come out. If you’re a serious web developer, taking note of trends in web browsing is crucial to ensure that you create the most efficient website design for all devices.

How about you? How do you make your designs flexible?