As a business owner, your website is an essential part of marketing, lead generation and driving profits. It wasn’t long ago that simply having a website–any website–was a distinct advantage for any business.

As the impact of a global economy and the Internet continues shape daily life, more people are getting online to spend their money and research purchases than ever before.

However, many of them are no longer doing this at their desk or from their laptops.

Web usage is making a dramatic shift toward mobile devices. If your site doesn’t include a responsive mobile-friendly design, you might be missing out on a massive opportunity. Even worse–you could be losing your existing customers or clients to the competition.

In this guide, we’ll provide you with everything you need to get started tackling a responsive redesign yourself and you’ll find alternative options at the end should you wish to let someone else handle the job for you.

Let’s get started!

In This Guide:

• What is a Responsive Website?
• How Can I Tell if My Site is Responsive?
• Why Do I Need a Responsive Mobile-Friendly Website?
• What Will My Site Gain from A Mobile-Friendly Responsive Design?
• Are There Any Alternatives for Implementing Mobile-Friendly Design?
• How Do I Pick the Best Responsive Design Option for My Needs?
• How Can I Make My Website Design Responsive?
• Responsive Web Design Examples
• Responsive Web Design Best Practices
• FAQs
• Useful Resources
• Responsive Mobile-Friendly Design Services

What is a Responsive Website?

The Nielsen Norman Group defines Responsive Web Design (RWD) as follows:

“A web development approach that creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it.”

But what does this mean?

Here’s a few characteristics typical of RWD:

Responsive sites change layouts using CSS rules to match the screen dimensions

While much of the current focus on responsive design focuses on mobile devices, good responsive design targets screen resolutions not specific devices.

It does so using CSS media queries or breakpoints. As display resolutions meet these rules, layouts, sizing and sometimes entire elements change to ensure a consistent experience across a range of screen sizes.

Although responsive design trends often focus on smaller devices, 4K televisions and other ultra high-resolution displays might trigger another wave of responsive design concerns.

What looks great on a 1080p monitor now will pale in comparison to the potential of a 4K or 8K display.

Shifting to a mobile-friendly design now will help to make accounting for future display trends simple.

Responsive Design is More than Resizing Content

An effective mobile-friendly responsive design doesn’t simply compress everything into one column. It considers the needs of mobile users and their actions.

Often in implementing a mobile-friendly version of a desktop website, you will need to adjust navigation, condense content and rearrange or remove entire sections of content.

The goal of RWD doesn’t stop at making things fit a particular screen–it’s optimizing the entire user experience.

Responsive Design Accounts for Bandwidth Variables

As access to broadband continues to increase, the bandwidth usage of desktop sites increases as well.

While the videos, gradients and high-definitions images on your website might look great and load quick on a computer, they are not great for mobile design.

Not only do many of these elements take more time and bandwidth to load, they lack the impact they might have at larger sizes.

Reducing bandwidth needs through responsive design will ensure that your site loads quickly on any mobile data connection.

Keeping rendering simple and clean will also ensure that your site performs well on the myriad of mobile devices available.

Whether you visitor is using an entry-level prepaid phone or a flagship tablet, effective RWD ensures your site loads fast.

My Site Looks Great! Why Do I Need a Responsive Design?

Just because your site looks great on your laptop or computer, doesn’t mean that it looks good on all devices.

A good responsive site design accounts for a range of screen resolutions and orientations to ensure that your site looks and performs great regardless of how it is viewed.

Mobile browsing is shifting to the main form of web browsing at a shocking rate. Consumers increasingly expect to be able to research information about your business or products on the phones and tablets.

Consider these statistics:

• Data highlighted by comScore indicates that 60% of the average adult’s digital media usage takes place on a mobile device. (Source)
• Adoption rates indicate that this trend will increase. Between 2010 and 2016, smartphone usage rose 394%. Tablets increased a staggering 1721%! (Source)
• As life with mobile data becomes the norm, all age brackets are tapping into the endless stream of information in their pockets. 21% of millennials in a comScore study don’t use desktop at all. Users age 55+ are the fastest growing segment adopting mobile usage. (Source)
• A cohesive cross-device experience is essential! SmartInsights highlights that in the case of retail sites, 57% of site views take place on both a mobile device and desktops. (Source)
• Google continues to prioritize mobile-friendly listings on mobile searches. This makes a mobile-friendly site essential to good search engine rankings. According to Google’s Mobile Path to Purchase report, 59% of consumers research their purchases on a business website before purchasing. 48% of all consumers start researching their purchases through a search engine. (Source)

Mobile-friendly design is no longer optional!

In 2012, Mashable dubbed 2013 “The Year of Responsive Design.”

In a 2013 Forbes article, Josh Steimle highlighted the need for businesses to implement mobile designs.

The next year, RWD made the Forbes list of 3 Major Web Design Trends in 2014.

In 2015, Creative Bloq included it in their 10 Web Design Trends that Will Change Everything in 2015.

Notice a trend?

At the start of the list, responsive design is heralded as groundbreaking and innovative.

By the end, they’re already talking about the future of RWD and how it has molded the modern web experience.

Responsive design is no longer a new technique or buzzword. It’s an industry standard.

Much like maintaining a social media presence, creating a mobile-friendly experience for your market or audience is quickly transitioning from a competitive edge to an essential element.

ComScore reported that in 2015, the percentage of people in the U.S. using only a mobile device for internet access (11.3%) exceeded that of people using only a desktop computer (10.6%.)

Still, the vast majority of U.S. adults (78%) use both their mobile devices and a desktop or laptop to consume digital content.

Failure to offer a mobile-friendly experience has real ramifications.

You will continue to see increased bounce rates, decreased conversions, reduced user confidence in your business or brand, reduced search engine performance and less traffic.

All of this results in decreased revenue.

While investing in a mobile-friendly responsive site isn’t a negligible cost, failing to create a mobile-friendly option might have far greater costs long-term.

Non-responsive Designs and the User Experience

Sometimes, it’s easier to show the problems older designs create than explain them with words. In these examples, we’ll highlight common issues that your site visitors might face if you’re not using a responsive design.

[no-resize-phone.jpg]

In our first example, there’s nothing responsive about the site. Imagine trying to poke those links with your fingers or read the text without zooming. Even once they zoom, they’ll be forced to scroll back and forth to read the text.

This doesn’t cut it anymore. Every action a visitor has to make to view your site is one more chance that they’ll leave. With the number of responsive sites available now, it won’t take visitors long to find a competitor who makes it easier for them to spend their money.

[scales-to-fit-doesnt-format.jpg]

This example improves upon the first. The site scales itself to fit the display. However, none of the content resizes with it. Fonts remain at the desktop sizes, the navigation bar is far too small for touch interaction and the lack of contrast in the design makes things hard to read.

[nav-not-optimized-bad-fonts.jpg]

Our last example features a mobile-friendly responsive design. Unfortunately, it doesn’t polish the design. Bad font choices, a wrap on the navigation bar and weird alignment in the header all detract from the appearance of the site.

With just a bit of extra work, this site could go from looking like a community flyer to wowing customers. It’s proof that going mobile doesn’t fix everything, you still need to take the time to optimize the design for the best experience and impact.

With the examples out of the way, let’s get into what a responsive website can do for your business!

How Can I Tell if My Site is Responsive?

There’s a simple way to check if your website’s design is responsive–load it on a computer and resize the window.

If the layout shifts to fit the size of the window, some level of responsive design is at work.

However, the mobile guidelines laid out by Google and other major web companies are a bit more complex.

If you want to see if your site is currently up to Google’s standards, their Mobile-Friendly Test is simple.

Paste your link in the box provided and hit analyze!

[Google-Mobile-Test-1]

If your site is already responsive, you’ll get a screen that looks like this:

[Google-Mobile-Test-2]

If your site is not using responsive design, you’ll see this instead:

[Google-Mobile-Test-3]

If you’re greeted by the screen above, you have some work ahead of you. However, the time and investment is well worth keeping an essential part of your business up to date.

Keep reading to find out the options available and resources for getting your site to pass Google’s Mobile-Friendly test.

What Will My Site Gain from a Mobile-Friendly Responsive Design?

Creating a mobile-friendly responsive website–or updating an existing design to follow RWD best practices–offers benefits to both your business and those viewing your site.

Key benefits of responsive design include:

1. RWD allows a seamless user experience across any display size. Whether viewers are checking on your latest posts on the morning commute or creating a wish-list from your eCommerce site with their tablet in bed, they’ll find the site familiar and intuitive across all of their devices.
2. RWD allows greater flexibility to adapt the user experience to the type of device they’re using. You can offer a flashy, immersive experience on desktop and a dialled back experience on mobile without the need to duplicate code, copy content or keep track of multiple links to your site.
3. RWD reduces the chance of SEO errors and makes marketing easier. Instead of having links and analytics split between subdomains, everything funnels through your main domain name. This reduces the chance of crawl errors and makes it simple to create links for email marketing, link building or social media marketing campaigns.
4. RWD makes site upkeep simple and lowers maintenance costs. Should you wish to update your site, design trends change or you need to add new products or services to your pages, it only takes one update to a responsive mobile-friendly site push changes to a wide variety of devices.
5. RWD makes social marketing and sharing simple. Data from comScore shows that 79% percent of the time U.S. adults spend on social media is through a mobile app or mobile site. This means if you’re investing in social media marketing, a large portion of those shares are opened on mobile devices. A responsive site allows you to share a single link that will look good on any device and encourage conversions, interactions and further sharing.

The Nielsen Norman Group offers a great summary of the benefits of RWD:

“For the vast majority of tasks, mobile users will get a vastly better user experience from a well-designed mobile site than from the full site. For a small minority of tasks, mobile users will be slightly delayed by the extra click to the full site.”

While some of the methods in their article are dated, their thoughts on the benefits of mobile-friendly responsive sites versus traditional sites remain as true today as they were 4 years ago when the article was first published.

Are There Any Alternatives for Implementing Responsive Design for My Site?

You might be thinking, “So it’s mobile-friendly responsive design or nothing? Surely there’s something in the middle, right?”

The truth is complicated.

Are there options to get a mobile-friendly experience without responsive design? Yes…
Are there options to get a mobile-friendly experience without the need for redesigning your site at all? Yes…

However, none of these options offer the easy maintenance, future-proofing and sheer flexibility of a full mobile-friendly responsive redesign.

In some cases, they’ll also increase maintenance and upkeep costs. This means that you’re spending more than you would on a full redesign over the long-term without the benefits to show for it.

We’ll go over two popular options and their pro’s and con’s to help you decide the best solution for your needs and budget.

Option #1: Create a Dedicated Mobile Site

This method was popular before the rise of RWD and still has unique benefits to offer. Instead of creating a single site that changes layouts and content based on resolution, you create an entire separate site for each view and serve it instead based on user agent or other browser checks.

Pros of a dedicated mobile site include:

• The ability to create a mobile-friendly experience without altering your existing site

Cons of a dedicated mobile site include:

• Separate sites are needed for varying resolutions to have full benefit
• Each additional site adds another layer of maintenance and increases upkeep costs
• Failure to incorporate elements of the desktop design into your mobile site will create a disjointed experience. This weakens branding, marketing and other essential sales elements.
• As display trends change, you’ll need to continue to update your mobile sites to adjust.

As you can see, while creating a dedicated mobile site does allow you to avoid some of the time and cost of updating your main site to a mobile-friendly responsive design, it’s still a ton of work. In the end, you still don’t enjoy every benefit of RWD.

Option #2: Use a CMS Plugin to Create a Mobile-Friendly Experience

CMS makes deploying complex eCommerce systems, create web-based storefronts and deliver dynamic content easy.

This makes CMS-based sites a popular approach for businesses looking to build an online presence.

If your site uses a CMS, there is a good chance there’s a plugin to add a mobile experience to your site with a few clicks of your mouse.

Leading options by CMS include:

• WordPress: WPTouch or JetPack.
• Joomla versions older than v3.0: Responsivizer and JoomlaShine Mobilize
  (NOTE: Joomla 3.0+ natively supports mobile responsive design. Their update documentation can walk you through the upgrade and migration process.)
• Drupal versions older than v8.0: ThemeKey or MobileTheme.
  (NOTE: Drupal 8.0+ natively supports mobile responsive design. Upgrade instructions are available in the Drupal Community Documentation.)

Pros of a plugin-based mobile site include:

• Easy implementation–many only take a few minutes to install.
• Most incorporate a responsive template to allow for handling the various sizes needed without the need for a subdomain or separate site.

Cons of a plugin-based mobile site include:

• Most plugins require costly upgrades to achieve the best results
• Even with upgrades, most plugins do not offer the flexibility of a mobile-first design
• Mobile design templates used by plugins might not integrate with your existing design creating a disjointed experience from desktop to mobile
• You must rely on plugin developers to update and maintain the plugin. If the plugin is abandoned you may need to find another option or stop updating your site to maintain compatibility.

For sites using a CMS, the plugin option has potential.

Particularly for simple sites without in-depth formatting, custom content or an emphasis on media.

However, even with the best plugins, you will never achieve the level of cohesion and performance available from a full responsive redesign or mobile-first design.

Option #3: Progressive Web Apps

Combining the design potential and cross-platform ease of a website with the robust features and offline use of a mobile app, progressive web apps are poised to change the way apps work on mobile phones.

These apps don’t rely on app stores or user installs to function.

Their coded much like a website but used advanced JavaScript, APIs, caching and other techniques to create an app-like experience right in the mobile browser.

For an in-depth look at the concept, check out this AirBerlin feature on how their app works.

While this option holds great potential, it’s still not cost effective or mature enough for most small businesses or businesses without a dedicated team of programmers and designers.

Support for progressive web apps is still inconsistent across platforms as well.

At the time of writing, Apple’s Safari mobile browser doesn’t support many of the features driving these new apps.

Pros of progressive web apps include:

• App access via URL instead of app store or download
• Ability for users to interact with your app offline
• Push notifications allow for easy interaction with visitors

Cons of progressive web apps include:

• Inconsistent support across browsers
• Standards and best practices still stabilizing
• Development cost is significantly higher than responsive website design

How Do I Pick the Best Responsive Design Option?

Now that you know your options, it’s important to consider which is the best fit for your site and business needs.

Each situation is unique, so we can’t cover every variable or business requirement here. However, these guidelines should be a good starting point for narrowing down the best option for your site.

eCommerce Sites and Online Storefronts

If you’re selling a product or service online, you’ll find limited support from most plugins. Those that do support popular eCommerce platforms often require an upgraded license, so be sure to check the fine print and feature lists before deciding.

In most cases, creating and maintaining a dedicated mobile site for an eCommerce site is extremely labor-intensive.

Our recommendation for this type of site is a mobile-friendly responsive design.

Static Sites (Informational Pages, Landing Pages, Portfolios)

If the content on your static site rarely changes, a dedicated mobile design might work well.

However, as display technologies change, the template will need regular updates to offer the greatest return on investment.

CMS plugins offer a simple option but often do not offer the level of customization needed to optimize conversions for landing pages or present complex portfolios in an intuitive way.

Our recommendation for this type of site is a mobile-friendly responsive design or dedicated mobile site.

Dynamic Sites (Complex CMS sites or Sites with Interactive Elements)

In most cases, a mobile-friendly responsive design is your best choice. Plugins will remove most of the customized features or intricate design already in place on your desktop site.

If you’re already serving up a wealth of content on your site, creating a dedicated mobile site might require the same amount of work as a responsive redesign without providing as many benefits.

Our recommendation for this type of site is a mobile-friendly responsive design.

Media-Heavy Sites

Of the scenarios here, this one is the most complex.

Any form of mobile optimization will help to reduce the bandwidth requirements and improve the load times of media-heavy websites.

You also must consider if all of the media works well with smaller mobile displays.

Often the impact of video or HD imagery is lost on a smaller display. Image galleries that look great on a desktop might turn into an endless scroll-a-thon on mobile as well.

A dedicated mobile site works well in situations where you don’t mind eliminating content.

However, if you frequently update content, this does mean you need to maintain two versions of the site.

CMS plugins will also work, though few offer the options to help prune content that doesn’t fit mobile devices. However, you do get the benefit of a single site to maintain.

Our recommendation for this type of sites is a mobile-friendly responsive design with a full site audit to assess the best content for mobile.

If you’re still having trouble deciding the best option for your site, this flowchart will help you narrow down your choices.

[Decision Flow Chart]

How Can I Make My Website Design Responsive?

With the decision made to create a mobile-friendly responsive design, you have two options.

Fortunately, like most coding, the base software and system requirements are low.

You’ll need:

• A text editor or coding software–such as Atom, Sublime Text or Dreamweaver.
• A copy of the current popular web browsers to make sure your design looks good on most computers.

One additional recommendation we’ll make is the Blisk Browser. It will let you view your design on both a desktop browser and simulated mobile device.

While it’s not as powerful as many of the cross-platform testing tools around, it’s good for quick checks of your design to check flow and layout.

Most modern responsive websites use a combination of HTML, CSS and JavaScript.

• HTML provides the structure and content.
• CSS handles the styling and responsive layout switching.
• JavaScript is used for advanced feature detection, animations and other advanced styling.

If you already have an existing site, you have two options:

1. Design a new responsive site from scratch
2. Adapt the existing design to use responsive web design principles

For the purposes of this guide, we’ll keep things focused mostly on the core design principles and less on actual coding examples.

If you’re looking for a step-by-step tutorial, W3Schools has a great write up on how to get started with examples of code that you can try yourself.

Finding the Optimal Resolutions for Your Responsive Design

To implement a responsive design, you’ll need to determine the resolutions that you wish to target. If you have an existing site with Google Analytics, finding a customized list of the most common resolutions visitors use is a great starting point.

Finding Common Visitor Screen Resolutions in Google Analytics

1. Login to Google Analytics
2. Be sure that the appropriate site is selected in the upper-left corner.
3. Click the Reporting tab at the top of the page
4. On the left sidebar, choose Audience and then Overview
5. Scroll down the main report frame
6. Click Screen Resolution in the Mobile section

There you have it! A full list of the common resolutions Google has tracked visiting your site!

Remember, creating a good responsive design isn’t about designing for devices, it’s about providing a cohesive, user-friendly experience across a range of resolutions.

This won’t be your final set of breakpoints, we’ll be refining it in a moment.

If you don’t have access to analytics, a good starting set of breakpoints is:

• 320px
• 480px
• 768px
• 1024px
• 1280px

This will cover the majority of phones and tablets while also providing a larger layout for monitors. We’ll need to further refine the list based on your design and content, but we’ll get to that later.

Meet the Mighty CSS Media Query

CSS media queries are the core element in many responsive web design projects.

Essentially, you use the breakpoints mentioned above and tell the browser, “Hey! If the window this site is in is this big, use these rules. If it’s that big, use those rules. Thanks guy!”

Basic media query syntax looks like this:

@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}

You’ll create a rule for each of your breakpoint ranges and apply your styles (font sizes, paddings, margins, etc) to create a clean design at that resolution.

Start with the smallest resolution, load up your page in a browser and then resize the window until things start to look wonky.

We like the Viewport Resizer bookmarklet for testing sizes without resizing the window. It also allows you to easily find the exact resolution to use with your media queries.

Now it’s a matter of repeating the process, tweaking your breakpoints as the design “breaks” until you’re at the largest size.

By starting at the smallest size, you can immediately notice any fluff or extraneous pieces on your site and expand the content range and features as the layout allows.

The Basics of Making a Good Responsive Website

With the basic foundations in place, we want to take a minute to talk about what constitutes a good mobile-friendly responsive design.

1. Good Responsive Design Doesn’t Target Devices

I know–we’ve said this already. But it’s important! To get the most out of your design and to ensure a good fit for all devices now and in the future, your responsive design should address a variety of sizes based on the needs of your content and the usability of your site. Using relative sizes or fluid grids can help to reduce the number of breakpoints while still providing a highly functional design. Devices are constantly changing, if you’re designing for devices, your site will need to change constantly too!

2. Good Responsive Design Accounts for Input Methods

The way the site looks is just one element of responsive design. For sites with interactive elements, it’s important to remember that most smaller displays use touch inputs. This means you need to make links finger-friendly using font sizing, padding or buttons. You’ll also need to find the best navigation option for your site–in most cases, the navigation bar on your desktop site won’t cut it.

3. Good Responsive Design Only Shows the Essential Elements

As we’ve touched on earlier, a good responsive design isn’t as simple as converting your desktop site into a single column layout. Optimizing media for smaller displays, accounting for lower bandwidth, condensing the experience to fit a smaller display and picking the elements of most use and interest to viewers on mobile devices is essential to optimizing performance.

4. Good Responsive Design Matches Features to Display Sizes

This is one area where designing for devices matters. While those flashy animations and effects might render smooth and consistent on a desktop, they can tax mobile devices. Throw in the sheer number of resolutions out there in the mobile market and it’s often best to simplify these elements for smaller layouts. Site visitors get a consistent experience without lag or delays on handheld devices and you can still present a full-throttle experience on larger displays.

5. Good Responsive Design Offers a Consistent Experience

The balancing act of responsive design is tricky. Keep too much of your larger experience and your smaller layouts suffer in responsiveness and ease of use. Trim too much and smaller layouts look completely different from the larger ones. Finding a balance will keep your brand or business and the user experience at the forefront, leading to better engagement, interaction and conversions.

6. Good Responsive Design Doesn’t Simply Shrink Layouts

Lastly, good responsive design isn’t just about shrinking containers. You need to tweak the text size, images and other visual elements as well. Adding contrast to text, boosting heading sizes slightly or massaging the line spacing can all add that little extra something to a good responsive design.

We’ll offer some specific examples in the next section. For further information on these topics, be sure to check out the Useful Resources sections near the end of this guide.

Great Examples of Responsive Design in Action

In this section, we’re going to highlight sites that use mobile-friendly responsive design to its full potential. We’ve provided screenshots for quick reference. However, if you’re still not sure how this all works, taking the time to click through and resize the window might help to clarify things further.

Good: Esquire
[esquire.jpg]
Esquire takes a media-heavy layout and makes it work on any screen size. As the viewport shrinks, columns are consolidated, advertising banners change and the navigation moves to a touch-friendly design.

Good: World Wildlife Fund Earth Hour
[wwf-earth-hour.jpg]
While no longer live to view, these screenshots from 2011 highlight an excellent example of reflowing, resizing and eliminating page elements to provide an exceptional user experience on any screen size.

Good: Stephen Caver
[stephen-caver.jpg]
Though designed as a portfolio site, Stephen Caver’s site shows how you can keep most of the functionality of your desktop site while resizing elements to work well with smaller mobile displays. While the look is different in each slide, the white space is optimized as the screen shrinks to allow easy access to page elements without endless scrolling or tiny buttons.

FAQs

With all the considerations to be made before implementing a mobile-friendly responsive design and the sheer number of variations and approaches to doing so, there’s some important concepts that don’t fit neatly in their own sections of this guide.

In this section, we’ll cover common questions about both responsive design and the alternatives available.

Q. What about an app?

A. When smartphones were a new technology, apps were insanely popular. There was even rumblings that apps might kill the need for websites entirely.

As things have settled out–and responsive web design has matured–it’s actually shifted in the opposite direction. This 2014 piece from Quartz highlights that the majority of US adults with smartphones don’t install new apps. Only 8% of adults polled installed one per month.

While there are still situations in which a mobile application is the best option, most businesses can offer everything a viewer or customer needs through a well-designed responsive website or web-based application.

Consider these points:

• Mobile apps are expensive to develop and must be designed for each mobile operating system for maximum compatibility. A responsive site will work on any modern mobile browser regardless of the device.
• Apps must be approved by the official app stores and installed on a device before someone can use it. Your site is available anywhere with an Internet connection with zero setup and no need for a lengthy approval process.
• You must convince a user to install your app before they’ll see your content or business. Worse still, you have to remind them to use the app to gain any benefit. Websites are easily linked, promoted and kept at the forefront of your audience’s attention.

Q. What about AMP?

A. Google’s new Accelerated Mobile Pages (AMP) are the company’s latest effort to optimize the web for mobile devices.

Implementing AMP support for your site is rather straightforward–particularly in the case of CMS-based sites.

However while an AMP page is mobile-friendly, it isn’t a one-to-one replacement for a mobile-friendly responsive site.

AMP pages are based around a rigid set of design principles and requirements from Google.

This means that much of the unique branding, imagery and tone of your site might suffer in the AMP design. This also means you have far less freedom to create a cohesive experience with your desktop site.

AMP offers undeniable speed benefits versus loading a responsive website.

Code is optimized and AMP sites are cached to tap into the power of Google’s cloud distribution network. However, with that boost in performance comes limited formatting and design options.

In most cases, AMP support should be implemented in conjunction with a mobile-friendly responsive design, not in place of one.

Q. What about Facebook Instant Articles?

A. Much like Google’s AMP project, Facebook Instant Articles work to consolidate design elements and optimize articles for view on a mobile display. All Facebook Instant Articles are hosted and viewed on Facebook exclusively through the mobile app.

Compared to AMP, design options are restricted even further. However, Facebook Instant Pages do allow you to use articles for lead generation and mailing list subscriptions.

Since content is not hosted on your site, this option is designed to work in conjunction with responsive page designs, not in place of them.

Q. What if I’m designing a new site?

A. If you’re not redesigning a site, mobile-friendly responsive design is even easier to implement.

As we mentioned above in the redesign basics, starting with the mobile interface and expanding your design as the screen enlarges is the best approach. This will ensure that the site is kept streamlined and only important information is included at each breakpoint.

Be sure to test your breakpoints throughout the design process to be sure you’re making the most of your design. Elements often change and content shifts. What works best at the start, might not be the best when the design is nearing completion.

Like most design projects, approaching a responsive design with an iterative approach will often yield faster development times and better results.

Q. What’s the difference between adaptive and responsive design?

A. Before we answer this question, we want to note that terms and definitions are murky here–even within professional design communities. While there are differences between the two, where the exact line between the techniques lies is debatable.

In responsive design, the same HTML and content is served to the browser regardless of the device, browser or bandwidth. CSS rules then determine what is displayed and content scales–often through the use of fluid layouts or relative sizing and placement–to fill the viewport.

Adaptive design looks at the device itself, features and browser specifics to achieve a similar result. In many cases, adaptive designs used fixed dimensions and layouts. As the browser window crosses the breakpoints, adaptive sites exhibit a sort of snapping resizing.

Fast Company offers some quick animations to help reduce the confusion.

In many ways, both approaches offer similar features, benefits and appearances. However, how they work tends to lend itself toward different specific situations.

What’s important to consider here is future-proofing.

A well-designed responsive site will do its best to accommodate the gaps between breakpoints and at both ends of the sizing spectrum.

Adaptive designs require better optimization to avoid obvious gaps and won’t always account for extreme ends of the size spectrum.

For further information on the topic, the Interaction Design Foundation has a great guide.

Q. Will responsive sites work on all mobile devices the same?

A. Yes and no.

In late 2015, OpenSignal reported that there are approximately 24,000 different Android devices on the market. This doesn’t account for Apple, Windows Mobile and other devices.

Will a responsive site do its best to resize and fit itself to the viewport of any device? Yes!

But can a single design promise pixel-perfect duplication across 24,000+ devices? No…

Devices with the same resolution, screen size and browser should yield similar results.

Changing any of these variables might introduce tiny changes to the way the site is rendered. However, with a comprehensive set of breakpoints and a well-implemented fluid design, you can count on a great appearance across the majority of devices.

Useful Resources

Covering everything about responsive web design in a single guide is impossible. Though the techniques and technologies behind RWD have matured since their release, there are still changes and improvements made constantly to deliver better results.

If you’re interested in digging deeper into responsive web design and its benefits, these articles and guides are great places to start.

• 9 Responsive Design Mistakes You Don’t Want to Make – Keeping these mistakes in mind will help to avoid common RWD pitfalls
• Building Your Mobile-Friendly Site – A visual guide with a great set of CMS and framework examples to build on what we’ve covered in this guide
• Responsive Design Breakpoints: The Ultimate Overview – Extra information on finding the perfect breakpoints for your design and performing browser testing
• Designing for a Responsive Web – A deeper look at grid systems, fluid layouts and other advanced responsive web design concepts
• Responsive Resources – An insane collection of links to guides, books, online courses and articles on various aspects of RWD.
• Beginner’s Guide to Responsive Web Design – A good primer on the technical aspects of RWD. Additional courses are available on-site for a fee if you’re looking to improve your skills or create your own designs.
• Responsive Web Design Techniques, Tools and Design Strategies – A collection of guides and articles on plugins and scripts to add features and responsive elements to your site, email campaigns and more.
• How To Use CSS3 Media Queries To Create a Mobile Version of Your Website – A closer look at how to create and implement media queries.
• Notes to an Agency Starting Their First Responsive Web Project – While aimed at professional designers, the best practices and pitfalls in these notes are great things to keep in mind.
• Responsive web design: What the Internet looks like in 2016 – A visual look at many of the concepts and techniques covered in this guide.
• How Important Is Responsive Design? – Undecided about whether your business needs a responsive website? This article offers additional statistics and trends not covered in our guide.
• Responsive Layouts – Want to be sure your site’s design meets Google requirements? Here’s Google’s own guide to responsive layouts.
• You May Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy – A great list of strategies and concepts you can use along with a responsive website to boost site performance and returns.

—————

Give Your Site a Mobile-friendly Facelift in One Week

If everything covered in this guide seems too technical–or you simply don’t have the time to redesign your site on your own–PixelPress offers a comprehensive mobile-friendly responsive redesign package to get you up in running in 7 days or less!

Our experienced design team understands the complexity of converting an existing layout into a mobile-friendly responsive design.

We will manage the entire transition from start to finish, ensuring maximum uptime and optimizing each element of the site for proper display and performance.

For a flat fee, you can sit back and focus on running your business while we take care of the technical needs.

No worries about unexpected additional requirements or surprise charges.

We’ve been creating world-class designs for nearly a decade and followed the rise of responsive design from the beginning.

In one week or less, you’ll enjoy a site with greater flexibility and functionality that is ready for the future of the Internet and better serves both your business and your market.

Contact PixelPress today to get your upgrade started!