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. Many modern templates have responsive code already.
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.
- Embedded video
- Analytics code
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, if a user zooms in to read the text easier, it makes the text larger and easier to read, the video is cut off.
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.
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.