We help you sell more | Request a Free Quote
1-888-553-8776
Nick
Responsive Web Design has quickly become the preferred method for developing website with multi-device friendly scaling. Meaning, your website scales across a large computer monitor, down to a tablet, down to a phone, flawlessly and without looking awkward. With a world where mobile device browsing is starting to beat out desktop browsing, it’s no surprise that Responsive Design has become the new gold standard in Web Development.
The most essential factor in the success of responsive web design has been the ability to create a website that scales across all devices, that is to say a website on a laptop will break down on a tablet and then to a smart phone flawlessly. Websites that aren’t responsive, when viewed on an iPhone, have a high rate of users bouncing off because they’re not mobile friendly. So in an ever growing mobile market, Responsive Design is crucial to retain this substantial market. “Mobile First” design technique is a well known method of building websites where you build from the bottom up. That is to say designing the mobile version first then scaling up to larger devices.
Too often, Responsive Web Design becomes about “fitting” a site onto different viewport resolutions and
screen sizes. One single column layout scales up to span across multiple columns as the screen size expands and eventually ending at whatever the widest supported screen size is. While the fit to size technique makes sense from a purely layout scalability standpoint, the fault it has is that it ignores the actual content that is being presented in the layout. Think about a restaurant’s website. Obviously you will want that site’s layout to fit well on a mobile screen. Context, however, goes beyond just that requirement to consider what content may be most relevant for visitors using those devices. You’d thank that because they are on a mobile device, these customers are looking for reviews or directions to the restaurant, but what if they are already AT the restaurant? In this case, even if they are on their phones, they clearly don’t need directions. Instead, perhaps, they’re looking for nutritional information for that restaurant’s menu. The more data you have available to you(device, location, past visits, ect), the more context is available to inform your User Experience efforts.
The concept of “Thoughtful Reduction” was first introduced by design John Maeda in his book “The Laws of Simplicity”. He says, “When in doubt, just remove. But be careful of what you remove”. While this statement may sound extremely aggressive, an important aspect of that aforementioned “mobile first” approach is to focus on only the content or features that you feel are the most important to people and to eliminate anything you find unneeded. Going through this process for mobile will hopefully carry over into the bigger screen viewports as you accept that these features that you remove really
aren’t necessary in those instances either. So getting to this point requires that aggressive approach to deleting elements from the page. A successful designer will learn how to be precise in this regard while still have a basic strategy of what stays and what goes. Looking closer at Maeda’s quote, he says “when in doubt, just remove”. This is because it is often very clear which elements must stay included in the design. Keep what is important, question what remains, and scrutinize your decisions to trim the fat from your responsive layout.
Switching from many columns for bigger screen viewports to a single column layout for very small screens is a typical trait of responsive sites, however layout changes do not stop with columns. Different content on your site will require different approaches. So take something like article teasers, as an example. You present that content one way for certain screens, but different screen viewports may necessitate a change in that presentation to be most effective. At large sizes, each article teaser is presented with the following info : Editorial image, photo of the author, the date of publication, the author’s name, and the title of the piece. However, when the same page is viewed at smaller sizes, this layout can change a little, with the editorial picture cutting out to save space. But those images, while nice to have, are certainly not critical to the presentation of the content, so as space becomes tighter, it can safely be removed without taking away from the content as
a whole. This is a perfect example of the same content being laid out and certain aspects taking priority for various instances.
Next is navigation. Navigation is one of the most challenging aspects of a responsive site. To do it effectively is a challenge. Especially when you are dealing with very large, deep menus. What works well for larger viewports will break down completely on other devices. This is why, when designing a site’s navigation, you are not so much looking for a consistent navigation experience across every different screen site or major layout versions of your responsive website. Instead of this,
you are focusing on creating a clear, user friendly navigation every step of the way – even if the navigation is accessed from many different devices. But saying that you do not need to be consistent in your navigation’s design across different devices may sound like a big UX no no, but there is good reasoning here.
You should be consistent in your navigation. This includes labels used on buttons and links and the visual characteristics of all of these elements. Where you should break away from an insistence on consistency is how the navigation works or lays out. A fly-out menu that is operated through a
hover Add to dictionary with a mouse may work perfect on desktop computers, but may fall apart on the mobile version. For these instances, the navigation you design should have a similar feel, but a different functional approach than the desktop version.
On the average web page, the size hovers around 2.1 MBs. One of the biggest culprits in size is the images. As website design trends move toward gigantic, screen spanning images(Very large), the file will obviously grow. Images take up the bulk of space and influence the size of the file on the website. As designers, we want these images to look their best, especially when
they are the primary visual that greet users when you come to their website. As important as that quality is, you must work to find a balance between crisp images and overall page speed and performance. When you design a Responsive site, consider all of the page’s
visual components, then, once again, be aggressive in removing any that aren’t necessary. Reconsider elements like homepage carousels, because they require multiple large images as well as the JavaScript necessary to “animate” those billboard displays. Simply removing a carousel with 4 images
and converting it to 1 static image will significantly lower the size of that page by cutting out 75% of the images plus all the animation script for the carousel. After you have aggressively cut away any images that are not needed, optimize the images that remain and use the appropriate image formats.
When used correctly, icons can improve a responsive website in many ways. Well designed and appropriate iconography can help replace lengthy bursts of text, which is especially helpful on smaller screens where space is limited and therefore very precious. Icons can often be delivered to a website using the SVG file format. These “Scalable Vector Graphics” are a perfect fit for multi-device friendly sites since they can be resized as needed without increasing the size of the file. Very useful!
As well SVGs can be animated with CSS, so you can add some interesting effects to a design without bloating it with extra scripts that will slow your site down and impact the
performance. Fall back support will be required for older legacy browsers that still don’t support SVG files, but the benefits outweigh the negatives, so it’s a useful method.
Typography is an important aspect of website designs, be them responsive or not. But when designing responsive website, you must take special care that your type design choices change along with other areas of your layout. When choosing a typeface, be sure that your selection works well and maintains the overall feel you want whether you scale it larger or smaller. Some fonts with thin letterforms may work well at large or even medium sizes, but those same letterforms lack clarity when they are sized
down too small, and it will affect the site’s readability, which is never accepted. If you must use a particular font with thin letters, make sure that it is readable even at its
smallest sizes or consider swapping the font at smaller sizes. The wider a column of text is, the more line-heights is required to help users find the beginning of the next line.
16pt body type is both the default on most browsers and an excellent place to start for all screen sizes, but it’s not a requirement. Experiment! Make headings obvious. Make them
at least 1.6 times as large as the text they support. Include adequate contrast on all your site’s copy, including the text versus the background color it is set against. As well the color
of links versus the rest of the site’s content.
So you have different devices, that will mean different input methods. Desktop users are likely using a mouse or a trackpad to navigate your site and to input their information.
This is very different from someone using the touch screen on a tablet or a phone with their fingers, so it will have to be adjusted as such. When it comes to user input, (buttons, forms, ect),
be generous with the size of buttons and clickable areas for peoples big fingers. It’s an important aspect of UX to design mobile sized buttons larger so it’s easier to click on them on a mobile site.
If it’s too small, users will be frustrated and leave your site. For smartphone viewports, size buttons at roughly 44 points square as Apple recommends in the iOS Human Guidelines. Lastly, test your
design with at least five users on the actual devices that will be used to access it. So that brings us to our last point.
Planning how your Responsive Website will scale for different sizes is an important part of designing for those devices, but you can’t stop at that. Being able to interact with your designs on real devices
will show you how it really works, by either confirming the decisions you made or showing you where improvements are needed. As well as testing on your own, running usability tests with actual users is another important part of working with your designs in a real world setting. First check existing analytics to see the percentage breakdown for users based on devices. Then prioritize your tests based upon the breakpoint info. If you’re moderating the tests on-site, it’s also worth purchasing commonly used devices.
