These days, I get a lot of questions about responsive web design. The main two are “Should I use it?” and “What exactly is it?”. The first answer is easy – YES, YES, YES! The second takes a little longer to explain, but here’s some things to consider.
Responsive web design means that the layout of your site reconfigures itself for optimum viewing from desktop screens to tablets to mobile phones. Some people mistakenly believe that it also means that it also “sizes up” for larger screens, but that’s not the standard and there are a few reasons why that’s not a good idea.
You can see from this example of excellermarketing.com that as the screen size gets smaller, horizontal elements collapse. Backgrounds disappear. Sidebars drop to the bottom. Sometimes the menu becomes a drop down menu or an icon. There are many different options, but their layout always changes so elements stay readable and buttons stay clickable for fingers on smaller screens.
The reasons for using it are many:
- Higher Google ranking for sites that are responsive
- Only have to maintain one site instead of also maintaining a separate mobile site
- User Experience -Your customers will be able to utilize your website no matter what device they are using
- Also, it’s super cool
But, when you use a responsive design, you need to be as flexible as the design. The elements of the design must move to work so your static design of years ago just doesn’t fly anymore. You need to make allowances for big fingers. There are no mouse-over affects, so your users need to know what is clickable. PDF’s can be very hard to read so tiny and should really be converted to HTML. Flash animation is out for mobile design. It just doesn’t work on iOS devices. And some things just don’t work on a small scale and need to be adjusted.
Responsive Design for Larger Screens
As I said before, standard responsive design does not take into account larger screen sizes. The largest screen size I recommend designing for is 1140px. Yes, I know you have a 24″ screen and you want your new website to look good on YOUR screen, but web design is about finding a happy medium for all your viewers. One of the most important things is designing for your customer. If you use Google Analytics, and I hope you do, you can check to see what screen sizes your customers are using. You can see from a quick look at my own stats, about 21% of my visitors have a screen resolution of 1920px x 1080px.
When we add in the people with 2560×1440 and 1920×1200, I’ve got 36% of my visitors with screen resolutions of 1920px wide or more. But that also means that 64% have smaller screens. I can’t leave out 64% of my viewers by designing for larger screens. Note: to find the screen resolutions for your customers in Google Analytics, go to Reporting > Audience > Technology > Browser & OS then click the Screen Resolution link over the statistics and under the graph.
And what about height? Keep in mind that most responsive design is set up for screen WIDTH not screen height. So even though your visitor may have a very wide screen, it may not be very high. This is especially true for laptops, which more and more people are using now. So even if they have 1920px across, how many pixels high do they have? You may say, well, it looks like a lot have at least 1000px high, but let’s consider how people view sites. Do you have your browser window open to full monitor screen, or are you using only part of your screen so you have access to your desktop icons? And now take a look at the top of your browser window – how much of it is taken up with menus, icons, address bars, etc? For me, it’s about 300px, but I know many people have a lot more toolbars open than I keep. So we just cut that 1000px down by a considerable amount. And that means that when you design bigger, a lot of stuff gets cut off at the bottom unless you are very careful to correct for that. Certainly if most sites were to be increased would get cut off. This is especially true for a site with large images. Give it a try now by visiting your favorite site and pressing Ctrl and + on your keyboard at the same time (Cmd plus + on the Mac). Does that look optimal? Press Ctrl and – to get your screen back to normal size. Those bigger pictures also add more loading time, and in case you don’t know, Google penalizes ranking for slow loading sites. Also, maybe your customer has great internet speed – except when they are out with their ipad and are getting bad reception and their battery is running out. Will they wait for your site to load? I’m not saying that designing for larger screens is a definite no, but there are certainly things to consider before you implement a larger design.
Conclusion So, overall, definitely choose a site with responsive design. Not only will it be good now, but it will be good as more and more devices are created with more and more screen sizes. It will be good for your Google ranking, and more importantly, it will be good for your customers.
Have comments or questions about responsive design? I’d love to hear them.