Our Marketing Blog

Our industry is ever-changing. Get insights and perspective from our experts as we share our knowledge and experience on how to successfully navigate the marketing landscape.

What is Responsive and Adaptive Web Design?

No website is complete these days without at least considering mobile. Based on comScore's latest annual report on the mobile landscape, '2012 Mobile Future in Focus'?,

smartphones and tablets were responsible for nearly 8% of all observed internet traffic in the United States at the end of 2011.

Another study from comScore showed that more than 70% of users who use mobile social media use it daily. It's imperative now, more than ever, that your site is both accessible via mobile devices and easy to interact with. So, how to make that happen? Let's dive into some geek speak'?¦

Responsive Design

A responsive website is simply a design that can stretch and rearrange itself based on the width of the browser rendering the site. In the past, servers would serve up whole different websites after detecting whether a user was viewing their site on a PC or a mobile device. These standalone, mobile-formatted sites were simplified versions of their parent sites, usually with limited functionality to increase page speeds over a slow connection.

When tablets started becoming more prominent, there was a need for websites that sat somewhere between a smart phone and a PC. Then, as smartphones became smarter, you had higher quality resolutions with different layout modes -- which ultimately meant a lot to account for if you were developing individual sites for each device.

Responsive design solves the problem at a very low level by resizing and rearranging elements on the screen to fit the user's device. This is usually accomplished through a combination of fluid grids, flexible images and media queries.

Responsive design is a lot easier to implement and maintain as websites evolve with more functionality.

Progressive Enhancement

Sometimes you will run across a website on your phone that simply does not work. Sometimes you can't navigate the dropdown menus. Other times, there is just too much content.

Progressive enhancement is the practice of catering to the lowest common denominator and selectively adding functionality based on a user's capabilities. Web developers have been using a similar approach for a while in order to ensure features in newer browsers (e.g. Chrome and Firefox) degrade nicely in older browsers (e.g. IE6).

Responsive Design + Progressive Enhancement = Adaptive Design

Now, take what we've learned about responsive design, add in our concept of progressive enhancement, and we have adaptive design. There is still some debate over the use of "adaptive design" vs "adaptive layout," but I don't want to argue semantics as the idea is much more important.

The important thing to note is by using progressive enhancement along with a responsive layout, we can conditionally introduce functionality like multi-touch, geo-location and native smartphone integration. This allows us to create a better user experience based on a user's capabilities.

There are plenty of excellent resources out there to help guide you down the responsive/adaptive road, so for the purpose of this post I'm going to try and keep things as simple as possible. You can learn more in this A List Apart article about Responsive Design and this Smashing Magazine article about Responsive Design.

Don't Fight The Future

The web is changing to meet the changing needs of its users. We started with crazy flash intros and entire websites stuffed into tables. Now, we're starting to see the importance of accessibility and developing sites to meet different use cases. If you think this is just a trend, you will get left behind.

If you made it this far, it's time for you to test your own site on your phone. Make sure to click around a bit. Even better, ask a friend to access your website on their own phone and give you feedback. Here are some online tools to help with testing:

Happy smart phone browsing!

Related Posts

Predicting the 2020 Console War Winner With Google Trends

Console wars were back in late 2020 with the release of the next gen systems. Although one console was the clear winner, both Xbox Series X and PS5 saw record numbers for units sold. We looked to Google search trends to see which console would come out on top. As we continuously look at search trends throughout the year, we noticed that one console stood out over the other. We wanted to see if we could use this data to predict which console would sell more units. Major Date Announcements On September 9th, Microsoft announced that the Xbox Series X would release November 10th. Microsoft also announced the price of both editions, $499 for the Xbox Series X and $299 for the all-digital Xbox Series S. Pre-orders were announced to go live September 22nd. Sony did not release their pre-order or release date info for another week. During the PlayStation Showcase on September 16th, Sony announced the PS5 would release November 12th and would cost $499 ($399 for the all-digital). Sony then ended the event with a surprise announcement that pre orders would go live the following day, September 17th. Pre Orders Google searches for both Xbox Series X and PS5 skyrocketed after the announcements. The search queries with the highest increase in volume were queries related pre orders, price, release date, and retailer availability. Comparing exact match queries, PS5 had almost 4 times as many searches as Xbox Series X for pre orders, price, and release date. According to search trends, the most popular retailer to pre-order an Xbox from was Amazon, and for PS5 was Walmart. Xbox searches September 2020: Xbox series x pre order – 1,800,000+ queries    Xbox series x price – 550,000+ queries    Xbox series x release date – 370,000+ queries Xbox series x pre order amazon – 110,000+ queries PS5 searches September 2020: PS5 pre order – 7,500,000+ queries PS5 price – 1,800,000+ queries PS5 release date – 1,500,000+ queries PS5 pre order Walmart – 300,000+ queries Post Launch According to Google trends, search interest for the PS5 pre orders was double that of Xbox Series X pre orders. The sales numbers confirmed these trends. Through the first 4 weeks of sales, the PS5 sold 1.5 times more units than the Xbox, both globally and in the US. Consoles sold globally through first 4 weeks: PS5 Global sales – 3,368,098 units Xbox Series X global sales – 1,817,303 units Consoles sold domestically through first 4 weeks: PS5 US sales: 1,389,963 units Xbox Series X US sales: 988,641 units After launch, we saw “restock” queries skyrocket as retailers everywhere were completely sold out. We saw similar trends here as we did with pre order queries, with PS5 restock queries outnumbering Xbox Series X queries almost 4 to 1. “Restock” searches November 2020: PS5 restock – 2,200,000+ queries Xbox series x restock – 500,000+ queries “Restock” searches December 2020: PS5 restock – 5,000,000+ queries Xbox series x restock – 800,000+ queries Overwhelming Demand Crashes Retailer Websites Both consoles saw an unprecedented demand online due to COVID-19 restrictions at physical retail locations. This caused retail websites to struggle to keep up with the demand. In some cases, the demand was too much, and the websites went down temporarily. When these sites were down, consumers turned to Google search for answers. During the month of September, the Best Buy website went down multiple times. The queries “is best buy website down” and “best buy site down” had the most volume during that time. “is best buy website down – 5,400+ queries “best buy site down – 2,400+ queries During November, the Walmart website went down on multiple occasions. The queries “Walmart website down” and “Walmart site crash” had the most volume during that time. “Walmart website down” – 6,600+ queries “Walmart site crash” - 5,400+ queries As we continued to track search interest daily, we found there was more buzz for the PS5 over the Xbox Series X. When we compared the most popular keywords for each, PS5 queries had over twice as much volume as Xbox queries. We were able to accurately predict that PS5 would outsell the Xbox Series X, as the search trend data directly correlated to sales. All brands should be paying attention to search trends in order to have a better understanding of the marketplace, their own brand health, and the search interest in their competition. If you liked this article, we invite you to learn more about our SEO services.

AMPlifier - Social Media Industry Update - Week of March 1, 2021

Welcome to the AMPlifier – a spotlight on the latest and greatest industry updates. Whether you want to learn more about this week’s marketing trends, the newest updates to your favorite social media platforms, or simply what meme is currently taking the internet by storm, then read on. You never know what you might learn. TWITTER RE-LAUNCHES TEST OF WARNINGS ON POTENTIALLY HARMFUL TWEET REPLIES Twitter is now re-launching the alerts, with a new format, and further explanation as to why each reply has been flagged. Read more CLUBHOUSE FACES NEW SECURITY QUESTIONS AFTER SIGNIFICANT DATA BREACH The latest comes as a result of hackers gaining access to Clubhouse audio, and re-recording that data into third-party streams. Read more 15 TIKTOK TIPS TO MAXIMIZE YOUR BRANDED CONTENT EFFORTS This overview of tips from the team at Socialtyze covers everything from choosing topics to user demographics to hashtags on the platform. Read more That’s a wrap on this week’s feed. Stay tuned to see what happens next.

AMP Agency Wins 4 Hatch Awards

AMP Agency took home 4 awards last night at the 60th annual Hatch awards that celebrates creative excellence in New England. AMP won bronze awards for the below work: “Eastern Bank’s Color & Capital for Good closing Boston’s wealth Gap” Work for Good Category “Facebook’s Gaming Just Like Us” Film Category “Stop & Shop’s On Your Terms”Design Category AMP also won a Merit award for work done with RXBAR.  Be sure to check out AMP’s article featured in the Boston Globe that looks at the virtual realities of advertising and how flexibility led to a creative growth spurt in marketing in 2020.