Responsive Design: Why you need it and how to do it.

So you’ve designed a website and its perfect. It’s informative, it’s innovative, and it looks pretty spiffy on a computer screen if you do say so yourself. Yes, you’ve really outdone yourself but it’s 2016, my friend. Computers come in all shapes and sizes and in just about any electronic you can think of. Not only does your site have to look good on desktop screens, it has to look good on large screens, small screens, tablets, mobile phones, televisions, car monitors, watches- the list is ever growing and it’s important that you keep up. Not only will Google look over your site in favor of those with responsive designs, but people will too. More searches in the US take place on mobile devices than on desktop computers nowadays and 74% of people will leave an unresponsive site.

So maybe it’s time to take a second look at your site design. But never fear! Responsive design isn’t all that different and certainly isn’t difficult. If you’re looking for a place to start, here is a short list of things to keep in mind when designing:

1. IMAGE RESOLUTION

   With screens getting bigger and display resolutions giving ever-sharper pictures, it’s important to use high-res images so they don’t appear blurry or pixelated when enlarged. Your images will be stretched and shrunk depending on the device and what’s fine for a smaller screen won’t necessarily fly on larger screens. Another thing to note is that full width websites are rising in popularity as opposed to fixed width sites, meaning your headers and background images will be stretched across the full width of the browser window instead of being contained in. In this case resolution is especially important.

   
   (Agrecon’s homepage as seen above is fixed width with all homepage content contained in a central position while Appleton’s homepage on the right is full width, spanning the entirety of the screen.)

   TIP: Even though they’ll be converted to 72dpi in order to be uploaded to the Internet, try to use images with a minimum of 300dpi when designing to ensure image quality after this conversion. Also make sure to save your files as JPEGs, GIFs, or PNGs if transparency is needed. Just be aware that PNGs have large file sizes as well (about 5 to 10 times larger than JPEGs). 

   

   Relevant article: What higher resolution means

2. GRAPHICS ARE GREAT

   Having to find high-resolution photos stressing you out? Well, you can get professional photos taken, use high quality stock photography from such fantastic sites as thinkstock or istock, or you could embrace the euphoric joy of illustrated graphics! People love visuals and they REALLY love a good infographic. These are great ways to get information across in a fun way people will actually want to look at. Not only that but the use of graphic icons and symbols throughout the site further helps the viewer understand it as they are easily interpretable and responsive friendly. And just because it’s cool, here’s a little science and a great example! 

   

   Here you can see how pictures and illustrative icons can be used together in the callouts used on Calhoun County’s tourism site.

   

   TIP: Condense large amounts of information into a graphic or separate with icons to generate interest.

   Relevant article: 13 Reasons Why Your Brain Craves Infographics

3. NIX THE ROTATOR

   Image rotators, while still very common, are fast becoming a thing of the past. As mentioned before, most people don’t really have the patience and attention span to take in 3 to 5 different messages. With roughly an 85% drop off in clicks between the first and second slides, people just aren’t clicking through them all. These also require 3 to 5 large, high-res images that can take a toll on the site’s load time and don’t help in the SEO department.

   So instead of multiple images with multiple messages, try showing just one image striking enough to draw the attention of both new and returning visitors with just one clear statement or call to action. Being direct has it’s advantages especially in messaging and marketing. You might also try a cool, attention grabbing effect like a parallax or a moving cinemagraph (as seen below)!

    
   (Here is an example of a cinemagraph.)

   

   

   (These site examples use their homepages just to welcome the viewer with a simple greeting expressing something about who they are or what they strive to do. They manage to be simple, modern, and personal all at the same time.)

   TIP: Try and imagine the first impression of your site like an elevator pitch of sorts. You have mere seconds to let your audience know what you’re about and to grab their attention. Now think how you can covey that in as few images and words as possible and give them an avenue to learn more.
   

   Relevant article: Alternatives to Using a Slider for Better Home Page Conversions

4. USABILITY – MAKE YOUR SPACE COUNT

   Keep in mind what your visitors want! Think about what people are coming to your site for and how best to get it to them. Keep your homepage as simple as you can. Don’t bog it (and your viewers) down with unnecessary or wordy information. You want your information to be laid out in a way that is easy for the average user to navigate and understand. Keep the relevant things up front and center and easy to find. Especially with mobile, you don’t want your users swiping all around the screen zooming in and out trying to find what they need. Again, they don’t have the patience for it and more often than not just won’t do it. Keep it simple, keep it clean. For example, switching to a hidden or dropdown menu on mobile frees up space and is more visually appealing.

   

    (On the left we see an example of mobile hidden navigation where the stacked icon brings out the menu list and on the right is an example of a drop down menu where the arrow button reveals the menu list)

   TIP: When designing focus on simplicity and functionality. You may find it helpful to start with the mobile design first to determine the most necessary elements and expand from there. You can also minimize your browser window to see what your site would look like in tablet and mobile views to check yourself.

5. KEEP YOUR LOOK CONSISTENT

   Determine how you want your site to look and feel and keep that theme throughout all of your platform designs. This is another area where starting with the mobile design might help so you can see what design elements will work at a smaller scale and then scale up from there.

    

   (Here is an example of the way a site’s appearance changes from desktop to tablet to mobile. Note that the same design elements are used in the designs of all three.)

   TIP: Use one of the many sites available to view your site on multiple platforms side by side. It can really help to see the big picture! One of our favorites is this Multi Device Website Mockup Generator.

So there you have it! Five things you can do to make your site responsive friendly. That doesn’t sound so bad, right? But just in case you think you might need some help, feel free to give us here at Red Sage a call! We’ll get your website responsive and running in no time.