Breezy Hill Marketing logo with black text
Menu
Search
Close this search box.
Search
Close this search box.

The Basics of Responsive Web Design

What is Responsive Web Design?

Responsive web design refers to smart websites that display optimally on any device. Whether a visitor is on a smartphone, tablet, or computer, responsive websites give users the best experience of your site no matter where they meet you.

The Impact of Responsive Design

User experience is one of the most important factors dictating if a new user will continue to engage with your brand. From how your site first appears to how users find the information they seek, how your site looks will greatly impact the impression you put on your visitors. 

According to 52% of mobile users, they are less likely to engage with a brand if their mobile experience was bad. With 85% of Americans now using smartphones, and 79% of smartphone users using their phones to make purchases, you need to accommodate and impress these mobile visitors. Over 50% of all internet activity is conducted via mobile devices, so your audience is probably in the market for a responsive mobile site. 

Consumers are also more informed and proactive than ever before; 40% of consumers will conduct research on a mobile device before making a purchase. Having a responsive site not only means making sure things look good, it also means ensuring your audience can easily access the information they need without frustration. 

Creating a Responsive Website

If you aren’t comfortable with web design, the idea of creating a responsive site might seem daunting. Thankfully, this website optimization can be quite simple. Below are a few steps to create a more responsive website

1. Basic HTML

The first step you can take is setting the viewport of the webpage. The viewpoint will control how the page scales when presented on different-sized screens. 

Without setting the viewport, the text and images will fill the page exactly as entered; setting the viewport will make your site adjust the size of images and text based on the screen dimensions. 

You can enter this meta tag to all your webpages to create a responsive site: 

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

2. Responsive images

Images are engaging and tell a story to viewers, but poorly displayed images tell another story you don’t want to share. Images that display improperly look unprofessional and messy, and will leave visitors with a poor impression of your brand. 

When you define the CSS max-width of every image, you can control how large an image will scale. By setting max-width to 100%, you are ensuring the image will never display larger than the original image you uploaded but can be scaled up if needed. 

If you only set the CSS width to 100%, then the image may scale up larger than desired. By controlling the size of the image, you ensure that the image does not get cut off or cover other important page content.

The following line can be used to set the max-width:

<img src=”img_girl.jpg” style=”max-width:100%;height:auto;”>

For more advanced responsive imagery, you can have different images display based on the display dimensions. Using the HTML picture element, you can have a smaller image appear for mobile devices, and another image appear for larger displays. 

This allows you to customize your content so every page is optimally displayed no matter how they are viewing the site. Some images cannot be scaled to fit a display and still look good; this will prevent awkward scaling of images.

The following block is an example of how this feature is used: 

<picture>
<source srcset=”img_smallflower.jpg” media=”(max-width: 600px)”>
<source srcset=”img_flowers.jpg” media=”(max-width: 1500px)”>
<source srcset=”flowers.jpg”>
<img src=”img_smallflower.jpg” alt=”Flowers”>
</picture>

3. Responsive text

Ensuring your content is readable and accessible across all devices is essential to providing a quality user experience for all visitors. Text must be legible no matter the size of the screen, meaning responsive text is essential for every site. 

To create responsive text, you can use the viewport element again, this time using the “vw” unit, or the “viewport width.” Now text will adjust according to the browser window size. 

In the following example, “10vw” means the text will take up 10% of the viewport width: 

<h3 style=”font-size:10vw”>Hello World</h3>

For HTML references, w3schools.com has free tutorials to help you optimize your site. 

Further Optimizations for Mobile Users

Mobile friendly, mobile optimized, responsive design… You may have heard these terms floating around the web design world, but what is the difference, and how do they impact your business?

Mobile-Friendly

Mobile-friendly sites will display on mobile devices, but will not fully optimize the display. This is the most basic version of a mobile website, where the content will appear as it would on a desktop or tablet, but shrunken down to fit the window. 

Though it will be fully functional, mobile-friendly sites can often be difficult to navigate via touchscreen and can create a lot of frustration among mobile users. Having your site be mobile-friendly is absolutely essential for all businesses, but it is only the beginning of what you can do.

To create a more mobile-friendly site you can…

  1. Add text-based contact information, including phone numbers, email addresses, and physical addresses so the data can be detected by mobile devices. This will make it easier for mobile users to call your number, contact your email, or get directions to your place of business.
  2. Avoid using anything that requires Flash support, as it is unsupported by Apple and other mobile devices.
  3. Limit image sizes to allow for faster loading times.

Mobile-Optimized

Mobile optimized sites are more complicated to create, but offer the optimum experience for mobile users specifically. A mobile-optimized site will have a display designed with mobile touchscreen users in mind. 

Mobile optimized sites often feature navigation aimed at users using touchscreens, which can lead to a much different experience than desktop users. Understanding your buyer’s journey and how users typically navigate your site can help you to optimize your mobile site to your specific audience.

For a mobile-optimized site, you must…

  1. Create simple and thumb-friendly navigation; include larger, thumb-friendly touchpoints for touchscreen navigation and avoid making users type. 
  2. Consider loading times by avoiding large images and complicated graphics that will take longer to load on a mobile connection. 
  3. Give the option to view the desktop version to those who may be more familiar with that version or prefer it. If users seem to prefer your desktop version, it’s probably a sign that your mobile site could be improved.

Responsive Design

We know that responsive websites are designed to accommodate any device, from mobile to tablet to laptop. While creating a specific mobile site can absolutely improve mobile users’ experience, it can be difficult for smaller businesses to try to accommodate users based on device.

Responsive design allows you to create a site that will work for all users, no matter what device they are using. 

If you know you have a significant mobile user base, then you may benefit from investing in a mobile-optimized site, but for small businesses looking to accommodate as many visitors as possible, a responsive site will be easier, in the long run, to maintain and improve. 

Conclusion 

The internet is an incredible tool that allows us to connect with people all over the world. Your website is the key to getting your brand in front of the right audience, but you need to make sure your website is giving the right impression. 

To make the best impression on any customer, you will want to put your best foot forward. Creating a responsive website will ensure that you make a good impression every time, no matter how the customer is accessing your site. 

Thanks for reading,
Shannon

Jeff Hill

Owner / CEO
Jeff is a seasoned operations and analytics expert with a Masters in Healthcare Information Technology and experience in business development, branding, sales and marketing.

Share on Social

Recent Posts