You probably hear it all the time, "Responsive Design." Maybe you sit there and roll your eyes and think "oh no, not another blog", or maybe you sit there wondering what in the world that term really even means. Either way, this blog is going to help clarify what "Responsive Design" is and why the abundance of blog posts are out there to help you, not hurt you.

Before we jump right into the perks and key factors incorporated with Responsive Design, defining it would be beneficial to all. Simply put, Responsive Design is a web page's ability to conform to a viewer's specific hardware device's screen (i.e. iPhone 7s, LG V300, etc). Have you ever been on a website and constantly had to pinch the screen to zoom in and out just to view a specific part of the website, or to click a button/link? Your answer was probably "Yes!", followed by "it is so annoying!" and I agree. Luckily, this doesn't seem to be as big of an issue as it was a few years back, but sites still have their "responsive flaws." These flaws come with the abundance of hardware devices that are being created year after year. The devices are all similar in one way or another, however that does not include the (screen) size. For example, your brother's Microsoft Surface Pro is much larger than your aunt's Apple iPhone 5. Imagine they are both viewing the same website ( https://www.sharpnotions.com/) on their devices. Examine the images below to view the differences.

Tablet Screen Size:

Sharp Notions Homepage via a Tablet

Small Mobile Device Screen Size:

Sharp Notions Homepage via a Mobile Device

An important factor of Responsive Design is content. Depending which device a user is on, will determine which content they probably want to see. In most cases, desktops or larger screen sizes tend to provide more detailed information for the user, whereas smaller screen sizes provide the user with straight to the point information , so they can quickly find what they are looking for considering they are on a device that is on-the-go. In the image examples above, you can see that on the smaller screen size, both the form and navigation sections have either been removed or condensed, as compared to the medium sized screen. It is important that no matter what screen size you are on, your screen does not feel cluttered but still relays appropriate content- that is an essential part of Responsive Design. Responsive Design makes sure that no matter which device/screen size your customers choose to use, your website will always seemingly adjust accordingly .

You might be wondering why screen size matters so much or why can't someone just view it on their desktop computer. For starters, as of 2014, there were more mobile devices than humans in the world and by 2020 it is even predicted that more people will own a cellphone than have electricity. There are more cellphones in use per year than there are toothbrushes sold! So it is safe to say, with the copious amounts of mobile devices out there, you can guarantee that your business's website will be viewed on many of these.

Perks Of Responsive Design

The concept of viewing your website on multiple devices not only is important to your business, but it has now become a necessity. Which leads me to my next topic surrounding Responsive Design, the perks. Having your website adjust for different screen sizes but maintaining its design among devices is great for branding. Having a seamless user experience helps the customer remember who you are, no matter the device.

Responsive Design helps immensely with SEO and G oogle rankings. Google itself favors websites which are responsive. When websites have one URL, it’s less work for Google Bots to search and crawl through. Therefore ranking it higher in search results, since analyzing the website’s content is faster and easier.

Responsive Design has also been proven to help increase traffic and improve the user experience. Since the content among different screen sizes is similar and seamless, your viewer won’t feel as if they are missing out on essential information when they are on mobile and will continue to click through your site. Also, the simple fact that they can view your site on a wide variety of devices, making it accessible, will allow the user to stay on your website rather than find one that is friendly to their specific device.

Lastly, another perk of Responsive Design is it involves faster maintenance, making the price cheaper as well. With Responsive Design, you have ONE website- it is built (coded) to be seamless to view on different devices, rather than editing different websites per screen size. Responsive Design incorporates different k ey f actors for making this approach so beneficial.

Key Factors To Incorporate

Majority of Responsive Websites use the concept of a "Fluid Grid". Fluid grids consist of columns, usually 12 and equal 100% width of the screen size. That is what causes the "magic" to happen. T he screen size will determine how many columns are shown. For example, on a desktop you might see 4 columns for a section, on a tablet you'll see 3 columns and on smaller devices you will see either 1 or 2 columns.

Frameworks such as Bootstrap ( https://getbootstrap.com/), Inuit ( https://github.com/inuitcss) and Foundations ( https://foundation.zurb.com/) are all Front-End scalable/responsive grids. Incorporating these into your site will make for faster, and easier web development. Choosing a framework will depend on what you’re looking to get out of it. Some frameworks consist of a lot of CSS styles, whereas some others are simply just grid focused. For example, Foundations has a ton more built in styles, like button appearance, than Inuit does.

Within these fluid grids , you want to make sure you have flexible images/media. You'll want the width of the item to be set to 100% in order for it to become flexible. The image will then fill up the space that the container provides. For example, if the container is 2 columns out of 4, so 50%, the image will occupy 100% of that 50% its allotted. Flexible images are essential to simplifying content on mobile devices. You don’t necessarily want images to take up more space than content on smaller devices.

Lastly, another important factor to consider when using Responsive Design is media queries. Media queries are essential when wanting to display and manipulate the way elements are viewed at different screen widths.

Overall, Responsive Design is the best thing you can do for your website in this day and age. It’s proven to improve SEO and Google rankings, increase traffic, help build a strong consistent brand and satisfy the user experience.

About Betsy Gunio

Jr. Front End Developer
Linkedin Icon