Post Featured Image

Taking A Website From Good To Great - Part 2: The Devil Is In The Details When It Comes To Responsive Website Design

What is responsive website design?

Responsive website design is a way of using css code within website templates to automatically adjust the website to fit the size of the screen on the end users device.

Why is responsive web design important?

Responsive website design is important for web designers and for end users. The advantage to web designers is the ability to create one website that works well across all platforms. In the past, web designers had to create specific to computers, tablets and phones. In fact web designers even had to create websites specific to the brand of device, such as Apple, Android, Windows, Blackberry.

For users, the advantage to responsive web design, is a consistent user experience no matter which device they are using, and even as they transition between different devices.

Potential problems with responsive design.

In today's world of web design and rich media, there is a lot of opportunity to embed third party content within your website. The diverse sources of content is a good thing for creating a compelling website, but it requires some thought and testing to ensure a good user experience. Some embedded content requires additional code to display properly, or it breaks the responsive design.

Common elements that get forgotten during responsive web design.

  1. Embedded video
  2. Analytics code

Embedded Video

This example shows a website that forgot to embed a YouTube video responsively. In the first picture, which shows the entire width of the video, the text is so small it is hard to read on a phone. In the second picture, which makes the text larger and easier to read, the video is cut off. The company information from the website in these screenshots has been removed.


Embedded Analytics

Modern website templates use a grid system to determine the placement of columns and rows within a template. Many of these templates have a footer row that crosses the entire width of all of the columns. If you embed code such as analytics in such a footer row, what happens is it stretches all the way across all the columns, and breaks the one column view that mobile devices would otherwise revert to. Again, the company information from the website in these screenshots has been removed.



Responsive website design has a lot of benefits for designers and end users, but testing on multiple devices is always required to ensure an optimal user experience.

See other posts in this series:

Taking A Website From Good To Great - Part 1: Protecting Privacy Is Good For Profits

Taking A Website From Good To Great - Part 3: Website Usability Factors To Consider



Leave your questions and comments below. Thanks for reading!



Jonathan Kervin

Kervin Marketing

Building Engagement & Driving Sales

No comments (Add your own)

Add a New Comment


Comment Guidelines: No HTML is allowed. Off-topic or inappropriate comments will be edited or deleted. Thanks.