Design it Forward with Responsive Web Design

Ezbiz Mobile was originally started in 2012 to provide quality mobile websites in a time when mobile internet usage was growing exponentially. I quickly learned just how fast things were changing. It wasn’t long before the big “G” recommended having a responsive website design(one version that adapts to fit all screen sizes), instead of having a separate version of your website for mobile devices.

So I began researching and using different responsive web design frameworks and techniques. I absolutely love responsive web design, and enjoy finding new and creative ways to use those techniques.

Google’s new “Mobile-Friendly” algorithm has made it mandatory for websites to be optimized for mobile devices (or “Mobile-Friendly” ), in order to rank for mobile search results. Using the latest responsive techniques will enable you to create a website that displays correctly on any screen size. It is still important to test everything across multiple devices and browsers. Things are getting better when it comes to cross-browser compatibility, but there are still steps that need to be taken. Visit caniuse.com for browser support comparison. Taking the necessary steps will ensure that your “Internet Presence” is engaging, and will keep people coming back to visit your website again and again.

Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction 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)~Source: Wikipedia

The first aspect that is mentioned in the definition is “optimal viewing and interaction experience”. We all know how frustrating it can be to browse a website on your smartphone that is not mobile-optimized. This frustration is something that you want to completely remove from your visitors minds when they browse your website.

Media Queries

The key here is to make your website adapt to any screen size. This can be done through the use of media queries.

Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen vs. computer screen). It became a W3C(World Wide Web Consortium) recommended standard in June 2012, and is a cornerstone technology of Responsive web design.
~Source: Wikipedia

Frameworks/Boilerplates

By using breakpoints, we can resize the content dynamically depending on the screen size. If you’re just starting out, you should probably go with a framework like Bootstrap or Foundation. These frameworks are great, but they can sometimes be too large for what you need. Both of these frameworks offer the ability to create your own custom download, which lets you get only the parts that you need.

If you want a dead simple, responsive boilerplate, then check out Skeleton. Skeleton is a lightweight, mobile-first, responsive boilerplate. It is not a responsive web design framework, and is meant to be a starting point for your reponsive website. A “mobile first” approach is the preferable method of organizing CSS. It means that all styles outside of a media query apply to all devices. The media queries then target (min-width) for enhancement on larger devices. This keeps the mobile devices from having to parse tons of unused CSS before rendering the site. As the screens get larger, the media queries style the content respectively.

/* Mobile first queries */
@media (min-width: 400px) {}

/* Larger than phablet */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}

Large “Tap Targets”

Now that you’ve optimized your website to display correctly on all screen sizes, people will most likely stay on your longer. It is important to make it incredibly easy for them to interact with your website once they are there… Simple is better!

Simple call and email buttons for mobile devices.

You will want to use responsive web design techniques such as, toggle(off-canvas) menus, drop-downs, accordion sections, select options, etc. You should also pay close attention to the size of your “Tap Targets”(areas the user is required to touch for certain actions). Make sure these areas are large enough for a finger to easily touch. Be aware that many of the responsive frameworks already have touch support built in, but you may have to add this manually for some. People have become accustomed to using mobile applications, which means the behavior of your website should mimic this native application behavior as closely as possible.

Social Sharing

Social interaction is a huge factor for getting website traffic these days, so you also need to have easily accesible social sharing buttons on your web pages. This can have a huge effect on your website’s popularity. Having great content is a given, but if no one sees or shares it, it becomes useless.

Page Speed

I realize that we are just scratching the surface regarding responsive web design, but I wanted to mention one more thing. Optimizing for page loading speed is very important, especially when wi-fi is not available for mobile devices. Google takes page loading speed into account when ranking your website in search results. It is important to test this and take necessary steps to optimize for the best performance. Besides Google Page Speed, there are many tools you can use to check how your site measures up. YSlow, GTMetrix, and Pingdom are just a few on that list.

Resources

Here are a few resources you can check out for Responsive Web Design:

Again, this is only a handful of resources. Here is a link to a much more complete list that Claire Dansey put together. Definitely worth a look! 44 Responsive Web Design Resources: The Ultimate List

I’m Here to Help

If you need help creating or optimizing a responsive web design, or just have a question, please feel free to contact me. I will be glad to help you in any way that I can. Obviously this is the first blog post on the new and improved Ezbiz Mobile website. Please bookmark ezbizmobile.com, and stop back often for more great content regarding responsive web design, as well as tips and tricks for WordPress, CSS, Javascript, and much more.

Responsive Web Design – Design it Forward