Responsive Design




Responsive Design – Why it’s so important

 

What is ‘Responsive Design’?

Websites should be flexible where they can be visible and well formatted in any environment. This includes desktops, notebooks, tablets and mobile phones. The code behind the website should be able to detect the visitor’s screen size and orientation, and then display the webpage with an appealing layout. The layout for a large screen size should differ from a very small screen size. The design should enable the images, font-size and format to resize.

The following example is a three column display on a large screen, and then the same webpage on a small mobile device:

Example 1 (Responsive Design)

Large screen:

Example 1 - large screen

Small screen

In the large screen, the format of the screen is 3 columns, with 4 items in each column. The font is the appropriate size for the wide screen. In the small screen, each of the items is displayed on only 1 column, where the visitor uses the vertical scroll bar to scroll down on the page. Additionally, the select font-size is large enough where it is easy to read on the mobile device.

Example 2. Website that didn’t use responsive design:

Large screen:

Example 1 - large screen

Small screen

In the large screen, the format of the screen is 3 columns, with 4 items in each column. The font is the appropriate size for the wide screen. In the small screen, each of the items is displayed on only 1 column, where the visitor uses the vertical scroll bar to scroll down on the page. Additionally, the select font-size is large enough where it is easy to read on the mobile device.

 

Example 3. Website not using responsive design.

Small screen

The font is very small, and many people including myself will have a very tough time reading the paragraph.

I hope that you can see why a website using responsive design is important. It’s imperative that you keep your visitor’s interest, and a well formatted website draws them in. A website that is difficult to use and read, will turn off potential customers.

Diamond Gait Web Design uses responsive design in each of the custom websites that we create.


error: Content is protected !!