If you are currently in the market for a new website, you should be familiar with the term “Responsive Design”. If you’re in the market for a new website, and you aren’t familiar with this term, stop reading this blog and call us right now. Not all sites need to be designed in a responsive layout, but any web designer talking to a potential customer who does not bring up this concept is not working with the most modern methods.
Responsively designed websites maintain the look of the “traditional” or desktop site across different screen sizes and resolutions, but provide a level of usability customized to the screen it is displayed on. In essence, it is the same exact content, simply formatted in a way that provides a better user experience. No one wants to have to pinch and zoom all over a four inch screen to read things. You don’t want a completely different user experience on mobile devices either, because users of both the desktop and mobile platforms would feel lost on one or the other. That’s where responsive design comes in.
We could completely geek out, and give you a technical description of how sites need to be built using a combination of percentages rather than only fixed pixel widths, and discuss CSS media queries and html5 canvas rules, but we don’t want anything to get lost in translation. That’s not what matters to your customers. Instead, we’re going to talk about the actual effects that a responsive design provides for the end user.
Since we’re on a site that was built using responsive elements, let’s play with this page, so we can see the effect. Hopefully, you’re sitting at a desktop or laptop. If you’re already on a mobile, this demonstration isn’t going to make a lot of sense. First thing we have to do is make sure you’ve got this site in full screen. See how everything is laid out? Pay close attention to the menu across the top, the sidebar showing our Facebook information on the right, and the menu along the bottom. Now, we’re going to restore down, otherwise known as showing other windows in the background. You should be able to see some of your desktop in the background. You do this by pushing the middle button at the very top of your broswer window.
Now we’ll play. Grab the right-hand side of the window with your mouse. As soon as it turns into a sideways pair of arrows, click it and resize it down about halfway. See how the text isn’t off the screen? It’s shrunk to fit this new form factor. The menu bar at the top turned from a horizontal menu to a drop-down menu, so that you can access different pages from it without having to pinch and zoom. The bottom menu also stacked, and the Facebook information swung around to the bottom of the page. Neat, right?
What you’re looking at is a responsive design. It didn’t break your usability of the site. It didn’t destroy the branding colors, text, or feel of the information. If you came across the desktop version, and then also came across the mobile version, it would be obvious that the two were one and the same.
Does your site do that, or do you have a completely different mobile site? Do you even have a mobile site, or do you force people to pinch and zoom all over the place to use your site on a phone? Sound off in the comments below.
