There’s a lot to think about when making responsive websites. It’s not just the real design or little widgets that litter the side bars of the screen, and it’s not just the excellent presentation of blog posts.

There are three important aspects that all responsive websites contain:

Layout
Media
Typography

These three ingredients that make up responsive websites are the key to better feedback by users, and more exposure in terms of web traffic and visits!

When defining responsive websites, they could be broken down by this simple explanation from webopedia:

Responsive websites are “designed to respond, as well as adapt, based on the technology and type of device used by the visitor to display the site.” In short, the overall design by its layout, media and typography will look good at any size of the screen it is displayed on, whether it is a large desktop LCD monitor, or even the smaller screens found on mobile phones.

As a result, the “responsive design” will ensure that visitors to the site have a similar, if not the exact same experience that is completely independent from the size used to view the site.

responsive websites

Why Mobile Phones are the Drive for Responsive Websites

It’s not a surprise that more people than ever are using mobile phones when searching online. Whether it’s using Siri or Google to get a question answered, the portability and convince found in mobile phones have led to that rise.

With all these things in mind, responsive websites are important for any business to consider, as they are detrimental to the customer potential that is mostly found on mobile phones.

The last thing people want on their mobile phones are websites that are too big to fit on their screen or almost impossible to read due to their design.

How to Make Responsive Websites

Making responsive websites all go down to those three aspects (layout, media, typography) that were mentioned in the beginning. Keep these design aspects optimized and updated as necessary to avoid dealing with a website that looks different on a PC and a mobile device.

The objective is simple: make the website legible and similar in every platform, including mobile phones. With that said, here are a few manual tricks that make for great and responsive websites for all three aspects.

Layout: The layout for responsive websites is one of the most important aspects.

First, paste the following lines with the <head> and </head> tags on the html page. This will set a 1×1 aspect ratio and remove the default functionality from iPhones and other smartphone browsers that allows users to zoom in and out of the layout by pinching on mobile phones:

“< meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" >
"< meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >"
"< meta name="HandheldFriendly" content="true" >”

(make sure to delete the spaces between the < and > characters when implementing into your own website)

Media: When discussing media, this includes things like videos or images.

Below is the CSS code that will ensure images will never be as big as the parent container of the site. This code will work for most websites, and must be placed on the CSS stylesheet of the site:

img { max-width: 100%; }

Typography: Responsive websites should always have a responsive font, which is why remembering to reset the html font size is very important:

html { font-size:100%; }

Once this code has been implemented, a person can then define responsive font sizes as shown below:

@media (min-width: 640px) { body {font-size:1rem;} }

@media (min-width:960px) { body {font-size:1.2rem;} }

@media (min-width:1100px) { body {font-size:1.5rem;} }

These helpful tips help establish the building blocks of responsive websites. Depending on how a site is optimized by their code, be sure to test this design using this free web design testing tool by Matt Kersley.

Need help with updating your website to respond to all mobile formats? The experts at Workspace Digital are here to help with your website and any other digital marketing services at an affordable price!
Jarek Martinez

Author Jarek Martinez

More posts by Jarek Martinez

Leave a Reply

Call 630-779-9733 today!