What is Responsive Design?

Tweet
11 years ago

People often ask us what Responsive design is.  Wikipedia tells us it is “…a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).”

So what the heck does that mean and how does that impact my website and my customers?  Simply put, a website built with responsive design is a positive experience for those users viewing your website from any device including tablets and smart phones.  Worldwide, 50% or more of queries on Google are now happening from mobile devices. 

Recently we had a customer say to us, “So what?  I don’t need to worry about mobile.”  Instead of arguing the point, we let data drive the conversation.  A quick analysis of their site showed that 61.24% of their users were coming from mobile devices.  The point was well taken!  Dismissing the need for a mobile-friendly website would be like ignoring half of the people visiting their site.  Can you imagine walking into a brick and mortar store and watching the staff acknowledge and help half of the patrons and completely ignoring the rest? 

What steps can you take to make your website using responsive design:

1. Think about the mobile first.  What will your site look like to your users?  What is the most important content to display and how will the graphic design of your site look like to those individuals. 

2. Design your site with a grid structure in mind.  By organizing the content of your site into a grid, it makes it a lot easier to rearrange and adjust your content to fit all of the possible devices easily.

3. Use the proper tools to control the look and feel of the site otherwise known as the “theme” or “layout”.   New features in CSS3 allow for a lot of the functionality that used to be done by manually manipulating images.   This helps to intelligently retain the proper look and feel across all devices.  

4. Think in percentages.  Part of mobile design is to no longer have a fixed width of 800px or 960px wide, you have to think in terms of percent of screen width.  Fill the space.

5. Ask your developer or web designer about responsive design.  If they don’t know what it is or how to implement a responsive design website, it’s time to look for a new designer. 

We love responsive design and are constantly researching the latest techniques to maintain our expertise.  If you have more questions on creating mobile sites for your businesses or your customers, contact us.  SquareHook will be happy to give advice and show you how you can improve your appearance in the mobile sector.