Illustrator: Bailey Bremmers (Design Apprentice)
A few years ago it would have been acceptable to build a desktop-only site or application. However, in today’s landscape of smartphones, tablets and devices, building a desktop-only experience is a poor decision. One that will frustrate users and lead to high bounce rates. If someone was out shopping and saw a discount promotion available when visiting the store’s website, they would likely take out their phone and visit the site. However, if the site wasn’t optimized for mobile, that person would be frustrated and probably never enter the promotion on a desktop once they arrive home. Alternatively, if the site was built for mobile, users at the store or at home would have no problem accessing the site and entering the promotion. Often, clients today will still choose a desktop-only site because of budget concerns. In the event that one can only develop a desktop or mobile site, mobile is by far the best solution.
Responsive is a buzzword. People toss it around too often and without any merit. Building a ‘responsive’ website or application can be as simple or as complicated as you’d like it to be. The idea of building a responsive website isn’t a new concept, there has always been a variety of screen sizes and resolutions for viewing content. The key concept is that you build content that everyone can access. Since the introduction of smartphones and tablets, this has become a larger challenge, but one that can be easily undertaken with the right amount of preparation.
Planning is everything. Without knowing exactly how you want your website to function, it’s difficult to design and develop a fully responsive website. Some people may argue that since their mobile audience is small, there’s little or no point to accommodate for those users. I don’t believe in any scenario where you shouldn’t accommodate for the mobile users. They are often the same people that use desktops or tablets, they just may be using their mobile device to check or confirm some information.
The most basic guidelines to follow while creating a responsive website are the following:
1. Identify and separate the needs of your mobile and desktop users.
2. Create a relatively simple, flexible/scalable design.
3. Use breakpoints and media queries to adjust the content and layout for desktop, tablet and mobile devices.
4. Remove or hide non-essential content on tablet and mobile devices.
There are of course many other things one can – and should – take into consideration when building a responsive website (Performance, optimized images, conditional loading of assets, etc.). However, since most websites are unique these considerations will be case by case.
Building a smooth-working, responsive site takes more time at the beginning stages of UX and design. Users definitely don’t need the same user experience across all devices. In order to build the most user friendly and cost efficient website, it’s necessary to identify the needs of your mobile and desktop users. Ask yourselves: What type of information will they need access to from their tablet or mobile device? They might not need to see a full screen image slider on their mobile device. Although, they’ll definitely want to access the contact page, contact form or hours of operation. Separate the needs of desktop users and focus your mobile strategy to help users find information on your website quickly and easily. Once you’ve determined the most important information, you can begin to design and develop the site.
I would recommend taking a mobile first design approach. Begin the design with the most necessary information and progressively enhance the content as the viewport gets larger. Thus, giving mobile users simple access to the information they require and adding more complexity to the desktop parts of the site. Taking this approach helps distinguish the most important content from the inception and eliminates the difficult task of how to reduce, remove or redesign content for mobile at a later point.
Depending on how fluid your design and development is, using breakpoints may not be completely necessary. However, since the browsers on tablets and smartphones all support them, why not go ahead and use them. This way we can more accurately design and target specific viewport sizes or devices. We can show exactly what content is needed at the top of the page and move less important info down, or hide it altogether. This is where designing with a mobile first approach will save development time. As long as the pages have been thoroughly planned and well thought out, there will be limited changes to the mobile and tablet portions of the site. Alternatively, the mobile and tablet portions become an afterthought and end up causing many development changes. These changes are often time consuming and cause for complete re-coding of sections or the site itself.
In the end, it’s about giving users the best possible experience. The best way to achieve this is to design and develop a responsive website. Developing a responsive website takes additional preparation and planning. It takes a basic approach and progressively enhances the concept for tablets and desktops. It gives the users access to the necessary information, no matter what device they’re using. It gives the user what they want – content that can be accessed by everyone. The question you should ask yourself isn’t ‘if’ we decide to design/develop responsively. The question should be ‘how’ and ‘what’ are we going to design/develop responsively.