It seems like people have been predicting the death knell of desktop computers for years: first came the advent of laptops, then palm pilots, smartphones, and finally tablets.But for years, the reliable desktop computer has sustained its position at the top of the digital media pile, until now.
In a 2016 report titled, US Cross-Platform Future in Focus, the website comScore, details how consumers are consuming digital media, and it seems that the tipping point has finally been reached. 65% of digital media is now consumed on smartphones and other mobile devices, while only 35% is spent on desktop computers — mobile is now well and truly the primary touchpoint for internet users.
Of course desktops are still important for business and online transactions. After all, the functionality and practicality of personal computers aren’t likely to be bettered anytime soon. But for any business looking to build a digital media marketing strategy, ignoring the need for cross-platform functionality, means ignoring the lion’s share of the growing digital market. When optimizing your online offerings for the challenges of a digital world where growth is being driven by mobile, there’s no concept more important than responsive web design.
Responsive web design is an idea that was developed by author and web designer Ethan Marcotte back in 2010. Even back then, Ethan saw the writing on the wall. Although smartphone development was just in its infancy, already businesses had started to commission projects demanding “iPhone only website designs”.
Rather than taking these requests at face value and creating separate websites for desktop, laptop, mobile and tablet users. Ethan decided to take some inspiration from the world of architecture where “interactive architecture” was just coming into vogue, basically the idea was that physical spaces could bend, shift and transform according to the needs of the people who passed through them.
Now, in building construction where foundations are laid in brick and mortar, and only become more difficult to change as development continues, that’s no easy task. In website development however, where designs and content is built to be updated and refined over time, the idea of flexibility and adaptation is part of the package.
Ethan decided to simply take this concept one step further by implementing fluid grids, flexible images and adjustable media prompt into his design. Thus, a website could intuitively adjust to the requirements of any device, screen size or screen orientation; customers would receive a consistent experience no matter how they chose to access their digital media.
The Fundamentals of Responsive Web Design
Breakpoints basically define limits for how wide design elements on your website can be. To account for the width of larger desktop screens, content is usually broken up into three columns, while smartphones will usually have just one.
Generally, breakpoints are set according to the most common dimensions used for browsers on different devices. Standard widths are 1200/960 px for desktops, 768 px for tablets in portrait mode, 480 px for mobiles in landscape mode and 320 px for mobiles in portrait mode. However as retina displays have become more and more common on mobile devices, breakpoints have become easier to port as is between devices.
Remember that sometimes you won’t want your content to take up the entirety of the screen, on television displays for example; viewing quality is usually enhanced when a smaller percentage of the screen is utilized.
When design elements are arranged to fit a device, designers must choose a scale for their arrangement. This scale will determine the constant spacing between content, as well as how much of the width of its container it should take up. As the browser increases, or decreases in width these elements will scale accordingly. When it becomes impossible to scale objects according to the browser width, the design will naturally implement a breakpoint, to keep content clean and readable.
On smaller screens, this will create, longer more vertical content, as the limited width forces more and more elements past the breakpoint. Some elements, however, will be designed not to scale at all such as logos and buttons.
Responsive web design must also take into consideration the challenge of adjusting between mouse, and touch-based interaction. Despite the increasing prevalence of touch screens on desktops and laptops, most users still prefer to use their mouse of everyday browsing. An area that is easy to select and click open with a mouse may not be so easily opened using a touch interface.
Customers do not want to wait an eternity for images and media content to load on their screens. In the digital world, anything longer than a few seconds can seem like an eternity. For smaller mobile screens, fewer graphics, and smaller sized ads may be needed to facilitate quick browsing
7 Benefits of Responsive Web Design for Your Business
Despite all these statistics about the growing dominance of mobile media in front of you, you might still be wary of adopting a responsive web design strategy, after all development isn’t cheap. In fact, you wouldn’t be the first business owner to think that. Of the estimated $50 billion being spent on marketing currently, only $13b is being spent on optimizing for mobile, with disproportionate amounts still being spent on rarely consumed print media.
For savvy businesses, this lack of response from other businesses represents a significant opportunity to spend marketing budgets more effectively in order to capture consumers begging for well designed, navigable, multi-platform websites. Here are just a few of the benefits it responsive web design can bring to your business.
Better Search Engine Rankings
Google is constantly updating its search algorithms to better reflect how internet users search consumer content. In 2015, Google confirmed that mobile was at the forefront of their agenda stating that, “more Google searches take place on mobile devices than on computers in 10 countries including the US and Japan”. Even as far back as 2012, Google representative, Pierre Farr, was talking about how Google preferred responsive designs to non-responsive ones as responsive websites were far easier for Google to crawl through and catalog.
Ensuring your business ranks highly on mobile searches is imperative for boosting leads and conversions through your website. Estimates put the number of offline sales influenced by mobile searches at $1.6 trillion, while online-only conversions are at $83 billion, that’s just too big of a pie to ignore.
Better User Experience
Almost 9 out of 10 adults think that mobile browsing experiences should be similar to or better than desktop browsing experiences. According to Google Insights, if a customer lands on your web page and they have a frustrating experience, there is a 71% chance they’ll simply close your website and switch to competitors’.
Google recommends that mobile websites should load in a total of two seconds, trying to load a desktop website on mobile in this time-frame is almost impossible. Responsive websites load far faster than desktop optimized websites, making them perfect for customers on the go. As mentioned, they are also adaptable to all manner and size of device; ensuring customers get the consistent experience they expect from your mobile offerings. 52% of customers say that a bad mobile website experience can stop them from interacting further with a company; you don’t want to lose a prospective customer due to bad design.
Mobile Shopping is on the Rise
We’ve touched on this before but it’s important to reiterate just how important mobile phones are becoming to the shopping experience. 80% of shoppers will make consistent use of their mobile phones to shop online. While a further 70% will check their phones while they’re shopping at physical locations. The result is 4 out 5 conversions for every local mobile search. If your businesses website is slow to load, difficult to find, and non-optimally designed you’re increasing the chances that your prospects will choose the competition.
Aligns with Social Media Strategy
55% of social media use is via mobile phone if your company has a strong presence on social networks and you’re using this influence to guide customers towards your website and online offerings. Then you risk turning your hard-earned following off completely with a clunky, non-intuitive interface.
Responsive websites are also easier to share. When users find content they like on your website and post it to their Twitter, Facebook or LinkedIn pages you want to ensure that everyone in their network is able to access it easily, no matter which device they’re on.
Follow Customers through the Buyer’s Journey
Here’s a familiar scenario, a customer finds your business through social media on their smartphone while at work. They visit your website and find a product they’d like to purchase; they bookmark it, in anticipation of buying it when they get home. At home they switch to a laptop, or desktop to finish the transaction as most customers do, only to be greeted with a completely different interface and website.
By forcing users to search for your products using different interfaces and designs you risk losing easy conversions. Different websites also make it harder to consolidate vital user analytics data, which tracks traffic, bounce rates, demographics and other key marketing information. A single responsive site solves both these problems.
Easier to Manage
Separate websites for desktop and mobile means two designs to update and manage for efficiency, reliability and attractiveness. It also means two separate interfaces, with different demands for content and media. Responsive web design means you can consolidate your marketing and SEO strategies across all platforms, saving vital time and expense on digital management.
Respond to the Changing Demands of Future Technology
We don’t know where technology will lead digital media in the future. New wearable technology and other browsing-enabled devices are constantly coming to the fore. By designing your website to be responsive, you make sure that your digital offerings don’t look clunky and outdated no matter how they’re being viewed.
8 Tips and Tricks for Implementing Responsive Design
If you’re convinced that responsive design is the best way to go for your website, and you’ve enlisted the help of a reputable web development company in New Jersey to help implement it. Then you might be wondering how to best optimize your new website for cross-platform use; while your marketing partner will definitely have some suggestions. There’s definitely some tips can make the process easier for you.
Do Your Research
Before attempting anything on the design end, it’s important that you have a good idea about how customers interact with your website. Google analytics can help shed some light into where your traffic is coming from, desktop, tablet or mobile. Based on this data you can figure out which dimensions you want to optimize your layout for the most.
Some questions to ask are: whether customers visiting your site on mobile are looking for the same things as desktop users; and how to make your content look just as good on a lower resolution screen as a high-resolution one.
Go Mobile First
Generally, the best strategy is to start by designing for the smallest screen first, then scale upwards by implementing breakpoints. Designing for mobile first, solves many of the problems that come with cross-platform functionality, for example, making sure that text is readable, ensuring the site loads quickly, and making all buttons easily clickable.
We also recommend planning layouts for at least three different versions of your website, built around the three most common dimensions. This will facilitate easy scaling between screen sizes, and will also help you create a better user experience, as well as better content delivery between devices.
Content is King
Start with your mobile screen, and figure out which content is absolutely necessary to make the mobile browsing experience satisfying. Your content summarizes the story of your brand, so you should prioritize this according to the main messages you want to convey to users. While long paragraphs are great for more expansive desktop-only sites, extended chunks of text aren’t great for the mobile user. Read over your copy and cut out any unnecessary context.
Many designers make the mistake of adding too many features during planning which disrupts functionality and design on the smallest screens. Navigation is especially important for good responsive design. Make this process as simple as possible by using icons paired with text, building clickable links to allow customers to navigate to areas of interest, adding drop down menus that collapse when no longer needed, and by making links to core pages highly visible. Any good website should have 4 or 5 main clickable links for customers to navigate through from the homepage.
Design your “Call to Action” buttons to be very easy to click. We’ve all had that frustrating mobile experience where we struggled to click the right link. Help your users avoid this, by making all important buttons – large enough to get a thumb on. Mark these buttons in bold colors that are consistent with your brand. Keep the shape simple, circles and squares are used in most elevators and remote controls for a reason. Finally, make sure a good amount of clear space around each button to prevent misclicks.
Focus on Font
On smaller screens, a larger font is a must for easy readability. Make sure that the font type you’re using isn’t overly ornate or difficult to decipher, there’s nothing worse than squinting at a text on a mobile device. Lines should be adequately spaced to ensure text doesn’t look packed together, but at the same time sentences shouldn’t look like they have no connection to one another.
Optimize for Speed
Google has a great guide on optimizing websites to facilitate fast loading on smartphones. Images are one of the main components which can slow down website browsing. In an effort to ensure their images scale; businesses often forget to make their images responsive to different interfaces, causing painfully slow browsing on smaller screen devices.
Test it out!
As they say, the proof is in the pudding. Once the design is complete make sure to test the finished website on multiple platforms to make sure it’s working without issue. Try out a few different browsers on your desktop, and test out usability on a couple of different mobile devices. Google Resizer is a great tool for previewing how your website will look in different dimensions.
Make sure that your website is loading within a couple of seconds on all interfaces, that the design remains consistent, and that all vital images and content are legible and easily visible. Thorough testing will prevent user frustration and costly downtime once your new responsively designed website goes live.