Responsive Web Design. IT MATTERS.

One of the most important innovations in web design in the last few years is the concept of Responsive Web Design (RWD). The idea is simple: your website should look great on any device, in any size, viewed in any orientation. Modern web design needs to be “responsive” to the user’s device and platform. With the proliferation of smartphones and tablets, web designers and digital marketers had a problem: desktop-focused web design looked awful on mobile devices. Even within the mobile space, you have all sorts of screen dimensions, different pixel counts, and a wide variety of competing platforms. Smartphones keep getting bigger and better, so it’s a real challenge to design web content that works in all cases. Marketing is a visual medium, and all that hard work put into good design in a certain format (i.e. desktops with landscape monitors) is completely wasted when you scale down to a smaller screen with a completely different format (mobile devices with portrait screens). From banner ads and images to text layout and font choice, it can be a total disaster unless you implement Responsive Web Design.

Without proper design practices and better development software, your web-based content doesn’t offer much value to mobile-based users. At the same time, your desktop users deserve content served to them in an effective format. We’ve all visited websites using desktop computers where the images, text, menu buttons, and other features are all out of whack because the designer opted to focus on the mobile user audience first and foremost. With Responsive Web Design, you don’t have to choose one or the other. You can be everything to everyone without sacrificing the effectiveness and attractiveness of your content if you incorporate the ideas behind Responsive Web Design into your content creation and web design. Your audience wants your content in all shapes and sizes – it’s up to you to provide it.

A watershed moment in digital marketing and web design happened in April 2015 known as “Mobilegeddon.” Google announced that it planned to boost the quality ratings and search rankings of pages with “mobile-friendly design.” While this change in the search ranking algorithm came as a shock to many, the concept of Responsive Web Design had been around for over a decade. As content creators and web designers dealt with the technical challenges of multi-device design, marketers had to adapt their approach to incorporate these new design challenges.

The introduction of these new devices made for some big changes. Aside from the orientation and size differences, these new devices offered completed different input technology.  Touchscreens replaced the mouse, and that brought new hurdles for web designers relying on drop-down menus and other design features that didn’t translate well to a smaller, more compact interface. Radio buttons and other inputs were a lot different for touchscreen devices, so good design meant more than simply scaling the page properly.

The first attempts at Responsive Web Design aimed to do “graceful regression” with the desktop versions as the starting point. The mobile versions of these websites didn’t make for a great final product, but it offered some relief to smartphone and tablet users trying to view pages on their handheld devices. The stronger and more effective approach is “progressive enhancement,” where a web designer and digital content creator STARTS with mobile and works up to desktop. It may seem simple at first, but this was a revolution in the field and became standard for anyone following “good design” practices.

One of the basic design techniques for creating Responsive Web Design is the use of relative measurement for your content (text, banner ads, photography, art, etc.) instead of the historical practice of absolute values, such as pixels or inches. Using relative values (often expressed as percentages”) means that your final product looks great, no matter what the resolution and orientation of the viewer’s device may be. Banner ads posed a real challenge, given they are typically crafted in a short and wide format – not necessarily well-suited for portrait orientation on mobile screens. If you simply scale them down, the text and images become illegible. Another key innovation to help digital designers and content creators produce effective content is “media queries,” an invaluable tool that allows the content server to ping a user’s connection to discover what kind of device they have in their hand (along with other key facts like their resolution, orientation, browser type, etc.), all before the content gets displayed. Although Apple, Google, Microsoft, Firefox, and other browser developers are getting better at providing “client-side” fixes to design issues, it’s arguably more effective to solve these formatting and other problems from the “server-side.” While the big browser companies do a great job to accommodate all sorts of different design and formatting issues, the better solution is controlling your content yourself at the source with a deliberate approach. Don’t rely on others to make your content work for your audience.

Whether you’re in Chicago or Cambodia, the future of internet marketing lies in paying attention to mobile platform users as well as other formats. Without prejudicing one format over another, designers can create great content without choosing to ignore or downplay the desktop or mobile community. Responsive Web Design is now a crucial element in the design process when you sit down to build a website. With billions of internet-enabled devices in the hands of consumers, digital marketing now encompasses every type and size of screen you can imagine.  I’m sure you have a few horror stories from trying to book a ticket, buy something, or find some information from a poorly-designed webpage. We’ve all been there, and now there’s simply no excuse to keep doing things the same way. 

Lucky for us, software developers created better web design platforms and integrated approaches that incorporate the new standards for web design. Any good designer can now see their work in many different formats, orientations, sizes, and resolutions to make sure that their ideas translate well to every circumstance on the internet. It’s no longer enough to deliver a final product that looks great on either mobile or desktop. Clients expect their pages to look good and have an impact with their messaging and art on EVERY platform and orientation. Like water, your content should take the shape of the container. Fluid design is hard to achieve, but the results are worth it!

For many years, web developers and digital marketing professionals only had to cater to PC users with small monitors. Now, their audience might be using a 40” landscape monitor on a desktop or a 4” portrait screen on a smartphone - and everything in between! With good design practices and proper attention paid to the diversity of users’ devices out there, it’s well within your reach to get your content out there in every possible format to have an impact on your audience. Whether your target segment has a smartphone, tablet, desktop PC, phablet, or whatever new technology may yet come to market, you’ll be sure that your content looks great in every format. Whether it’s artwork, advertising, text, photography, videos, applets, or whatever else you use to reach your audience, it’s crucial to adapt yourself to everything out there and what’s yet to come. 

Responsive Web Design is a simple idea with big consequences for designers and marketers in the digital age. Google formally recognized the importance of mobile-optimized sites for their users in 2015, and it’s important for website creators and marketing professionals to incorporate the concepts of Responsive Web Design into their planning and design process. It’s a new way of producing your content, and it offers great opportunities for savvy designers and marketers to reach out to their audience with effective messaging and beautiful content, no matter what the required format might be! Check out our blogs on Squarespace for web design solutions and contact us so we can help you get that website looking good!