The internet has been changing radically over the last few years.  We have the ability to access the internet in more ways than we ever have before.  Within the twenty first century, we have the convenience of accessing the internet from multiple devices, such as, a laptop computer, tablet, or a smart phone.  In the summer of 2014, internet access use on mobile devices surpassed those on desktops.

Responsive Websites Are a “Must”

The use in mobile technology to access the internet and social media has grown steadily in the last three years.  Based on “Mashable’s Responsive Design Best Practices,” 2.1 billion mobile-broadband subscriptions are reported, while 87% of American adults own a cell phone.  Within those who own cell phones, 45% of them have an internet capable smart phone, and 90% of them access the internet.  With the increase in mobile users, it is no wonder why responsive website design is the new standard.

Responsive Web Design Model

What is responsive web design?  In a nutshell, the responsive model you will continue to hear throughout the web industry is a “one size fits all” approach to building a website.  Building multiple websites to capture every current and potential device that accesses the internet would be difficult next to impossible.  Not only that, you would have to maintain many websites for small to large scale requests.  This approach is a waste of the client’s time and business resources.  In the responsive model, you work on one website and capitalize on all devices, saving in time and money.  With so many people moving from desktop to tablets and smart phones to access the internet, we need to bridge the gap on how websites are built to give users the best possible experience.  That is when the term Responsive Web Design was born.

Responsive Impact on Return of Investment

As more and more people choose to build their websites responsively, they will continue to see a return.  Many companies and businesses who already have responsive websites are quickly seeing a return on their investment.

An article on presents the results on a large retailer, Skinny Ties.  It documents how using the responsive web strategy contributes to the overall successes of the company’s online sales:

“The combination of responsive design and flexible taxonomy contributed to a massive boost in revenue, SEO value, and conversion rates across every platform and form factor.”

  • 58% increase in transactions year over year
  • 8% increase in AOV
  • 187% increase in revenue from Android devices
  • 224% increase in revenue on iPads
  • 437% increase in revenue from iPhones

Skinny Ties choice to have a responsive website not only gives their customers a better user experience, they have also increased their customer base and expanded their audience.  They are just one of many businesses who enjoy the benefits of responsive web sites.

Responsive Web Design Best Practices

The vast array of devices we have at our fingertips does create new challenges and opportunities in how we present information to our users online.  As we formulate a plan to successfully build out a website product, there are many more angles we did not have to worry about five years ago.

Every part of the website has an important part to play in the success of the end product.  When it comes to the visual aspects of the website, layout and framework, interactivity, placement, and how a design renders are all so extremely important.

VipaSolutions wrote an article reporting on 15 Design Trends for 2015 at the end of 2014 that could influence how we approach design and development for years to come.  Some of these trends include:

  • Flat Design – Flat Design focuses on content without overwhelming users with the bells and whistles that can potentially hurt site performance.
  • Large Images – Images used appropriately can connect clients with their users. Pictures have an ability to further capture the audience’s attention more than just content.
  • Typography – Websites built for mobile devices are not as design centric as they were ten years ago. However, the use of typography can offer “personality” to a client’s website with intent of engaging users.
  • One Page Scrolling – When using a smart phone, we navigating a site can at times be a little tricky and cumbersome. One page scrolling offers ease of use without a lot of clicking and limited page load response times versus navigating a multiple page website.
  • Animations and Triggered Movement – To further engage users on a website, websites today use animations and triggered movement, such as swipe and touch, as well as animations. They offer our users a more interactive experience when viewing a responsive website.

Of course, these are not set in stone, and this is not a finite list.  This is a look into the patterns that in the design of many responsive websites.  These practices serve as a guide when designers start on a new creation.  However, the one thing to keep in mind before starting any responsive project is the user; user interaction.  User accessing your website will most likely use a finger to scroll, click, and navigation your website.  They are looking for information quickly and efficiently.

Front End Development and Responsive Design

Since the responsive web development concept is only a few years old, designers and front end developers have the opportunity to share their knowledge into helping the responsive methodology mature and grow.  There are some practices already in place that have attributed to high performing websites. offers some great insight as to some current best practices we should already be employing in our work.

  • Images should be flexible – Images should scale using img { max-width:100%; height: auto; }
  • Use percentages instead of fixed pixels – Pixels are set and do not adapt well to various screen sizes; use percentages.
  • Use your own fluid grids – Use your own grids that are unique to your website and its content.
  • Search Feature – Users rarely click through a website, especially if they are large in size. Instead, they would like to search for the information they need quickly.
  • Headers should be small and simple to keep focus on content – Headers offer a good presentation, but the purpose of the site is to offer content. Make sure the design of your website does not trump your content.
  • Forget about being pixel perfect – Gone are the days of pixel perfection. Every browser renders a site slightly differently, and it is extremely time consuming to capture them all without a guarantee.
  • Lazy Loading – To save on bandwidth, hide content until all primary content is loaded and the user is ready to view it. Lazy Loading also promotes less clicking.

Search Engine Optimization (SEO) and Responsive Design

Responsive Web Design does not just impact how a website looks and functions, but how it performs as well.  Optimizing our responsive websites for search engines is just as important as their visual aesthetics.  Google announced responsive websites have become the industry best practice based on the article, “How Does Responsive Web Design Affect SEO?” written by Jon Correll.  Since Google is king in the search engine world, the way we optimize our websites will greatly impact how we rank among our competitors.  We should look into what we see coming in 2015 that will influence our optimization process.

  • Usability is King – You will hear a lot about “Content is King,” but that may not be very accurate. Initially, every website needs content for people to have a reason to engage.  However, I believe usability of a responsive website is just as important.  If you cannot interact with a website easily, your audience will get frustrated and find the information somewhere else.
  • Social Media - Social Media has been of the best tools to drive traffic to your website.
  • Website Security - Securing our websites are very important. Hackers have the capability to take down our sites, or have the potential of stealing confidential information we do not want the public to share.
  • Mobile Friendly SEO – There are over three hundred ways to cover with mobile friendly SEO. It encapsulates more than just meta description and keywords.  The speed at which a page loads, bounce rate, image optimization, and touch elements are just a fraction of what we should address to make our websites more mobile friendly.
  • ROI vs. Rankings – It is a big step to see our websites ranking high on popular search engines, but if they are not producing any real return, it becomes a waste of business resources and time. Everything costs money, so it is important our website brings in more revenue and qualified traffic.

These SEO trends focus more on a legitimate representation of website owners, which can give end users peace of mind when engaging with a potential business.  Gone are the days where black-hat search engine tactics, like keyword stuffing were widely used.  Those strategies only delivered poor user experience.  The best practices we see today start to create cohesion between buyer and seller, retaining clients, and ultimately building a lasting relationship.

Responsive Web Design is paving the way for websites of the future, and it is vital for all who wish to have a website to get on board.  If that is not enough, Google has just released a new algorithm favoring mobile websites over websites who are not mobile friendly.  Responsive Web Design offers better return on investment and more conversion because it is able to target more devices than any other web solution today.

The use of responsive web design offers many advantages as well as its own challenges.  However, with these challenges come opportunities for professionals in the web industry to contribute to the growth and maturity of responsive web sites and their user’s experience.