“Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.”
~Jeffrey Veen, VP of Products for Adobe
“It’s not the strongest of the species that survive, nor the most intelligent, but the one most responsive to change.”
~Charles Darwin, English Naturalist
And there you have it. Responsive is best. No need to write one. more. word.
Except… there is a need. Some folks are confused about implementing web design that is truly responsive, and with good reason. There is more than one way to make your website appear responsive—even though it’s actually not.
Let’s unpack the trunk and lay it all out on the bottom bunk in neat piles, shall we?
Oh, but first… a little while ago, in “Mobile-first indexing,” we outlined many reasons why mobile sites are important to the success of today’s websites. You might want to read that blog too.
Adaptive design
Photo by Austin Distel on Unsplash
Here’s pile one: Adaptive design. Adaptive design is a way to make your site appear dynamic. That is, when a user brings up your site on a mobile device, they don’t have to pinch and scroll until they’re blue in the face to access your site information. Your site is pulled up with scalable content that fits the screen. The same thing happens when a user brings up your content on a desktop or laptop device. The size of your site is adapted to each device.
Except, wait. There’s a lot going on behind the scenes in this scenario that can harm user access to your website.
The thing is, many well-meaning folks adapt a website to be scalable with good intentions. Adaptive design saves some time. It is tailored to the mobile world and a developer doesn’t have to rebuild an older desktop-oriented site to get results. A developer can either use a plug-in or design a completely different (subdomain) mobile site to accomplish adaptive design.
The thing is, with adaptive design, you really have two websites. One for desktop and one for mobile devices. Your web server is really sending different HTML and cascading style sheet (CSS) files to users who access your mobile and desktop sites.
The problem: the different HTML files can really confuse search engine bots. This confusion hurts your rankings on Google and other search engines.
Responsive design
Which is why you want to choose pile 2: Responsive design. With this solution, mobile device and desktop users are served by the same URL and the same HTML.
The CSS (the file responsible for the design or style of the website) is simply different depending on browser width. You have one site that looks and feels the same across devices, but things like buttons and text, etc. change to accommodate the screen size.
One responsive site is easier for bots to find. Plus, Google recommends it.
It may be a bit more expensive to implement redesign (if you have an older site and depending on what kind of site you now have), but a truly responsive website will be easier to fix later and set you up for a better future. Happily, popular web content management programs like WordPress can help you implement responsive design beautifully.
Your website
Now you might be curious what kind of site you actually have. If your site is many years-old, uses Flash or you are using a plugin to make your site work on mobile devices, chances are your website is not responsive.
Visit Google’s mobile friendly test site to learn if your site is mobile friendly. The tool will also let you know which pages can’t easily be loaded on a mobile site. You’ll receive this message:
Not all page resources could be loaded. This can affect how Google sees and understands your page. Fix availability problems for any resources that can affect how Google understands your page.
You can access a site-wide mobile usability report using the tool as well as a guide to customizing your site and a mobile SEO guide.
Still need help? We’d love to hear from you. Sublime Creations is an eco-friendly company that specializes in website consultation, design and personalized training catering to local and small businesses, individuals, start-ups, and entrepreneurs. Feel free to contact us online or call (720) 443-1407 to schedule your free 30-minute consultation to discuss responsive web design and more.
