On the first day of fifth grade, I learned a lesson from my math teacher, Mr. Freeman, that I still recall often today. He setup a projector and on it he arranged several blocks into a pattern and told us, “This is one”. Then he rearranged the blocks and told us, “This is two”. He rearranged the blocks a few times and each time told us it was a different number. No one, except for my best friend, Jason, who’s that guy that gets everything, could figure out the patterns. Eventually, Mr. Freeman explained to us how it worked. He would arrange the blocks in a pattern and then he’d lay his fingers on the edge of the screen. The number of fingers he’d put on the screen was the number the pattern was supposed to equal. (The graphic to the right shows this in action.) The lesson was that it is important to look at the entire picture. Don’t get tunnel vision and focus so much on one thing that you can’t see the answer even though it’s right there.
So why am I telling you this? Because for the longest time we have been looking at websites through a tunnel. We worry about how a website looks and performs on our computer. The problem with this is that every person reading this right now is probably looking at it on a different device. Some of us are on a laptop. Some of us are on a giant desktop monitor. Some people are using a smartphone and some are using a tablet. This doesn’t even begin to figure in all of the different browsers; Internet Explorer (8, 9 and 10), Safari, Google Chrome, Firefox, and Opera to name a few. All of these different devices and browsers give the user a slightly different experience.
So what do we do? How do we make sure that our websites work on this huge variety of devices and browsers? It’s a simple answer: Responsive Web Design.
What is Responsive Web Design (RWD)?
Think of RWD as the nicest, most accommodating customer service agent you’ve ever met. RWD has all of the information for your website and it can serve that information up to you in a user-friendly way, regardless of your device or browser.
A very good RWD will not only serve up the information to match your device but it should do it in an efficient way. If you’re on a smart phone with half of a 3G connection then you’re probably not too worried about hi-resolution, stunning images. You just want the information that you’re looking for. When RWD is done correctly, it will strip out all of the glitz and glam that looks really great, but isn’t absolutely necessary, and serve you a fast loading, easy to navigate website.
One of our more recent websites featuring RWD is www.realmccoygenetics.com. On the desktop site we pulled as much information up above the fold as we could without being crowded. When the site opens you’re given an informational slideshow at the top that is meant to draw your attention visually to events, boars and champions. Below that, we have a large, simple menu and an option for users to sign up to receive emails from Real McCoy Genetics. That is followed by a simple welcome, a feed of recent champions added to the website, and news.
On the mobile version of the website we stripped out everything that is non-essential. First, we removed the slideshow because the images and animation that cause it to slide slow down the load on a phone. With this gone we condensed the navigation into a small “drawer” that hides itself off screen. To make it easy to find it is fixed to the top of the screen so that wherever you navigate it is right there within thumbs reach. Then, we condensed the 2 columns into 1 and moved the content in the right column to the bottom. In the recent champions section, we reduced the number of champions that displayed from 6 to 4. If you navigate throughout the site on both a desktop computer and cell phone, you’ll notice many other subtle changes we made to the layout but you will still see all of the pertinent information on both platforms.
The EV Team and I would love to develop the perfect website for you. If you are interested in learning more about Responsive Web Design or our other services you can simply visit the contact page and fill out the form or call us at 940.864.5830.