Our BLOG

Jon Bishop

Recent Posts:

The Year of Intelligent Personal Assistants

As an Android person, I missed the Siri boat. I constantly forget Cortona exists, but it's a thing. Then when Alexa came around, I held out because it wasn't Google. Okay so maybe I'm a Google snob. But now I've had a chance to play with all four as well as develop apps for both Alexa and Google Home (aka Google Assistant). Although Google Assistant is the clear winner for me going into 2017, I'm going to keep this post about Intelligent Personal Assistants (IPAs) in general and the opportunities they present to both marketers and consumers. Two trends I've continued to follow throughout the years are the need for deeper connections and control without confusion. I believe these two needs have driven technology to this point. The move from text chat, to video chat to VR/AR, is logical in this context. With more technology comes more things and with more things more confusion. I think we're still in the beginning phases of an IoT revolution but the technology to properly manage and control these experiences was not ready, until now. What Is An Intelligent Personal Assistant? Right now I'm focusing on the big 4; Google Assistant, Alexa, Cortana, and Siri. IPAs are conversational bots that help you complete tasks. The bots offered by each of the big 4 have slight differences between them, however, I think they compliment each other well. We're also slowly starting to reach a point of stabilization where functionality is relatively similar across each platform. IPAs at the most basic level allow you to get answers to questions very fast. "How cold is it outside?" "Who is the oldest person in the world?" "Why do people still use QR codes?" Now give your assistant access to things like your phone and calendar, and it becomes a powerful tool to keep yourself organized. Add your credit card, and you can buy toilet paper in fewer words than a haiku. The more it knows about you, the more helpful if becomes. How Should Marketers Approach Intelligent Personal Assistants There is a lot of movement in the space right now, so the most important thing you can do is pay attention. Privacy concerns are still top of mind with reports of IPAs ordering things because the TV told them too. The IPAs are also getting new features daily with services popping up to do everything from order Ubers to Pizza. You may have heard a lot about Alexa coming off CES this past year but did you know Google just automatically enabled Google Assistant across all Android phones running the most recent version of the operating system? This is a huge move and instantly brings Google Assistant up to Alexa's level although Alexa has had a huge head start to get up and running. But in case you missed the boat, I'll do my best to get you up to speed on the things Marketers should be paying attention to. Being First To Market The most obvious one is the massive opportunity this new marketplace presents. First, to market services will enjoy the luxury of claiming their turf for premium user queries related to their industry. Getting a ride and ordering pizza were two of the first services created by Uber and Dominos on Google Home when it finally added the option for third party integrations. Although at this point, Domino's can't claim "pizza" as the keyword trigger for the app and instead has to use the more direct "Domino's", It won't be long before your Intelligent Personal Assistant remembers that Domino's is your favorite place to order from and allows you to use "Order me a pizza" as your trigger phrase. This is why being first to the marketplace is incredibly important as your Intelligent Personal Assistants learn more about you and your needs. Deeper Connections Another great thing about Intelligent Personal Assistants is the fact that they are conversational. Some are better at this than others, like Google Home for example. As artificial intelligence and machine learning become more ubiquitous, IPAs are starting to set new standards for what consumer facing AI might look like in the future. IPAs remember your habits and your interaction history which make it possible to ask contextual and follow-up questions in a very casual manner. Now imagine in the case of conversational commerce, an IPA that helps you do your grocery shopping. This could be core functionality of the IPA or a third party service you can install. Based on previous interactions with your brands, the IPA could favor your products over the competition. Furthermore, IPA's become their own channel with unique opportunities to engage users and create memorable experiences. Maybe the pizza brand also helps you make your own pizzas with step by step recipes and alternative ingredients recommendations. Because the platforms are truly mobile and circumstantial its possible to create some of the best contextually relevant experiences we've seen to date. Now instead of catching them before or after they've done the task you'd like to associate your brand with, you can catch them in the act. Doing laundry and can't get that annoying stain out? Just say out loud "How do I get pumpkin spice soy latte stains out of white t-shirts" and your favorite detergent company might respond with answers in that moment. The lines will continue to blur as brands become companions in our lives instead of just packaged goods. Control Without Confusion As technology continues to evolve there is a lot more to keep track of in our lives. Navigating the mess is a huge barrier to entry for a lot of people. IPAs, however, solve a lot of the problems traditional tech has created. You no longer have to remember the "right" way to do something but just that you can do it. Your assistant is smart enough to figure out what you want to do and guide you along the way. This is an incredibly powerful tool for brands to help consumers navigate their complex digital web. IPAs serve both as their own channels but also as a one-stop access points to more traditional channels. I've already seen this trend on websites using Intelligent Personal Assistants as customer support tools. It's certainly a balancing act as we advise clients to carefully approach automated personalized communication but when done right it can streamline incredibly complex user journeys. This makes things like identifying more qualified leads before connecting to sales and getting quick answers to common questions painless and easy. More importantly, you can do this all in your brand's voice. API.AI, which is what I used to create my own Google Home app, allows you to give your custom IPA personality right out of the box. It can even have a favorite color. The Entry Point to IoT Consumer based IoT is still in its infancy with products like Hue and WeMo currently dominating the space. Managing an app for each device becomes too much to manage once you get beyond 2 or 3 apps. The IPA eliminates the need to ever open those apps again. "Hey Google, turn the lights on and lock the front door". What would previously take the opening and closing two separate apps becomes a seamless phrase you might have yelled out to a family member anyways. In my opinion, besides privacy concerns, managing your IoT infrastructure had previously been too cumbersome a task to warrant the investment. Why pay for light bulbs that add an extra step to use when the switch on the wall is much easier? That's an oversimplification but for your average consumer, it is not far from the truth. Brand's should be jumping at the opportunity to integrate their IoT tech with Intelligent Personal Assistants. We're still in the beginning phases and similar to how first to market services are going to win, first to integrate tech will also have a huge leg up. This Is Just The Beginning I've only glazed the surface here. We've gone from keyword search with website results to conversational search with immediate answers. This affects every facet of the digital agency from Search to Creative. UX will start to encompass voice design while our Ecomm team is developing out conversational commerce experiences. Your website will start to act more like an API and developers will need to make sure information is structured in ways that play nice with our new artificially intelligent friends. Artificial intelligence in its current form is very cool. Apple, Microsoft, Google, Facebook, and Amazon are making big investments in this space and alongside the IoT revolution, there is a big opportunity to create a deeper connection and more engaging experiences. It feels like the pinnacle of the inbound marketing movement where search is literally sitting on the mantle above my fireplace. Not only are Intelligent Personal Assistants incredibly fun but they are incredibly useful, and they're just getting started.

Hungry For Data?

Boston, like many cities, collects a tremendous amount of data to make the City a better place. Enough to make the thought of sifting through it, analyzing it and creating a compelling, data-driven story driven seem daunting. At AMP, we're always looking for a challenge. We also happen to be data nerds who are obsessed with our hometown. So we put the team to work, asking them to translate the mounds of robust data into a visually compelling, interesting story about our beloved city. The result was AMP's Boston Data Lab. The Boston Data Lab's mission is to create interactive data visualizations where viewers can engage and interact with different data sources from and about Boston. Our first experience explores one of our favorite things ' food. More specifically, we're crunching the numbers on Boston's most famous restaurants to separate the tourist traps (aka all-stars) from the hidden gems. We wanted to find a way to separate Boston's best-kept secrets from city's tourist meccas through publicly accessible data. We also wanted to display those findings in a compelling, visually interesting way. Enter the All Stars vs. Hidden Gems Map. Like most restaurant recommendation experiences, our interactive map lets users explore by neighborhood. Ours, however, also lets you view by All Stars or Hidden Gems'the places the locals love, and those that draw out-of-towner crowds. Using Twitter and Instagram's APIs, AMP was able to pull tweets and photos from a restaurant's location and label them as 'local'? or 'out-of-town'? based upon their profile location. Lots of locals means it's a Hidden Gem. Lots of tourists make it an All Star. But tastes change and restaurants rise and fall. Our dynamic experience accounts for this by constantly pulling live, real-time data, reflecting changing opinions and creating a more robust experience over time. Click here to visit.

Don't Like The Technology? Wait a Few Months.

I grew up during an interesting time for the internet. When I was 10, the internet was whatever content America Online put on my home page. I didn't quite know what to make of it. I knew I wanted to use it but I didn't know why. I was 10. The next 20 years would fly by; AIM, Napster, Geocities, MySpace. I began to count on the fact that technology would change, and usually for the better. Now I'm almost 30, working in technology, and excited about the changing world around me. New products pop up every day on sites like ProductHunt and BetaList. My computer keeps getting faster and my games more realistic. Soon I'll be able to have a real lightsaber battle against Darth Vader or lead a squad of mercenaries where I have to physically duck projectiles. Technology Gets Better QR codes are a great example of a powerful yet misunderstood technology that would influence the development of arguably superior technologies like NFC and BLE. It's impossible to mention QR codes these days without looks of confusion or disgust. Taking a step back, QR codes aim to solve a huge problem when it comes to mobile; what's the easiest way to get data from outside of my device, inside of my device. They're often used to redirect people to web pages or prepopulate contact information. They work, just not as easily as one would hope. Device manufactures also contributed to the mediocre user experience by not bundling the technology with their native cameras. Overall, it's not the best experience and we can do better. NFC is a step in the right direction. Still requires user interaction, but devices have been better at integrating the technology. It's still very misunderstood although incredibly powerful. Now look at BLE or "Beacon" technology. For the last few years its been one of the buzziest pieces of technology in marketing. There are however a few huge barriers preventing marketers from jumping on board. The main issue is that it relies on a technology that only a fraction of the community is even aware of, Bluetooth. As fast as BLE rose to fame a new guy on the block is looking to take the crown called WiFi Aware. It removes the barrier by working with something we are all very familiar with, WiFi. It will be easier to both implement and install. The Marketing Technology Landscape One of my favorite blogs is ChiefMarTech. Marketing Technology is a fun thing to watch right now because of all of the solutions out there and how fast they are evolving. One of the many awesome things you will find on that blog is an infographic of the Marketing Technology landscape.   The amazing thing about this graphic is that it was also created in 2014 and has nearly doubled in size since then. The list is by no means all inclusive but it does give you a good idea of all of the options out there. For every great solution there are 50 just like it with their own spin. Net Neutrality set the stage for what's become a competitive marketplace for marketing technology solutions. Competition for them means options for us and if you don't like what you see just wait a few months.

Inside Tech - January 2014

Technology changes as fast as we learn about it. It actually changed a little while we were writing that first sentence. The Inside Tech post is a monthly effort to update you on important changes within the technology space. It's going to get a bit geeky at times, but we (the technology team at AMP) will do our best to cover the practical implications of these shifts and what they mean for you. Second Screen Tech For Websites Second screen technology has been primarily used to provide supplemental information on your mobile device for video games and your TV. Check out some cool things people are doing with mobile devices to supplement and control websites. http://www.awwwards.com/6-examples-of-desktop-sites-synced-with-mobile-devices.html Real-Time Social Web Apps The W3C rolled out some standards that allow for real time connectivity between browsers. We can now create experiences where multiple people can interact in real time on a website without having to refresh a page. This creates an opportunity for some really cool social experiences that go beyond traditional social networks. http://www.websocket.org/demos.html Google Loses The Microdata Battle But The War Is Not Over Schema.org was made popular by Google and started gaining mass adoption when they announced you could control your website results in search engines in the form of 'Rich Snippets'?. Efforts to standardize a format for structured data on the Internet have been going on for awhile and as of November the W3C officially tossed out the microdata spec in favor of the similar, but more robust, RDFa format. Currently, data on the internet is formatted in a way that's ok for humans but not very useful to machines. This basically means we should embrace RDFa in favor of Schema.org's microdata so we can take advantage of future innovations around structured data on the Internet. There is no downside to switching as RDFa can still be used for Rich Snippets in Google. http://manu.sporny.org/2013/microdata-downward-spiral/ http://www.w3.org/TR/rdfa-lite/ One Click Actions & Google Now Integration In Gmail While we're on the topic of structured data, Gmail has been doing cool things with Microdata and JSON-LD (similar to Microdata). This allows us to create one click action buttons that display inline with the emails subject. These buttons can do things like register someone for an event, subscribe to a newsletter, write reviews, etc. For emails that contain the results of such actions we can use more structured data to tell Google Now to do something with the contents of an email. For example, if I register for an event, we can markup the response email so Google Now can display the event details. Future stuff. https://developers.google.com/gmail/actions/getting-started Websites Can Now Shake Things Up On Your Smartphone Did you know that modern browsers on mobile devices have access to some of that device's functionality? We can already do things like detect device orientation, location, access the camera and more. As of recently it is now also possible for a website to make your mobile device vibrate. This will be huge for user feedback in web apps. https://developer.mozilla.org/en-US/docs/Web/Guide/API/Vibration Big WordPress Update WordPress 3.8 is out with some big changes to the admin panel and some security fixes. WordPress is the world's most popular content management system because of how easy it is to use and the strong community behind it. I cannot stress enough how important it is to be updating your WordPress installs. The easiest way to prevent a site from getting hacked is to upgrade. Take it seriously. http://wordpress.org/news/2013/12/parker/ Random Nerd Site of The Month And because we're nerds we would like to share something nerdy with the world. This month it's images of computer code appearing in TV and films and what they really are. http://moviecode.tumblr.com/

Building Cheerify.it

Cheerify.it started with a simple idea: What would a website look like if you could decorate it with Christmas lights and sync it music. We've been wanting to play with using browser bookmarks to manipulate the contents of a website, so we extended the original idea to be able to "Cheerify" any website. Taking over a website via browser bookmarks is not a new idea. Because javascript runs on the client side, there is a lot of potential for automation of redundant tasks. We wanted to create something less useful but more fun. Something along the lines of the Doge bookmark, YAAARRRify bookmark and Harlem Shake bookmark but just a little more ridiculous. Building The Prototype We had seen bookmarks manipulate elements on screen to music before. The tricky part was going to be building a framework that allowed us to easily sync animations to music. First, I want to give a huge shout out to Moovweb for their Harlem Shake bookmarklet. Not only did it serve as a source of inspiration but it gave me a great place to start building out my framework. The original Harlem Shake bookmarklet works by inserting an HTML5 audio element into the page and using a setTimeout to wait 15 seconds before making everything on the screen go crazy. They've since updated their code on GitHub to a more reliable method, but I'll get to that in a second. So using the Harlem Shake code as a starting point, we built a framework for adding effects to a timeline. Our framework uses a setInterval() to check the HTML5 audio's currentTime property every 10th of a second. We then iterate through an array of effects to trigger as we approach each timestamp. The array is made up of smaller arrays that include a timestamp and a function to call. Using anonymous functions within our effects array kept our code readable and made it easy for other developers to help orchestrate. It's important to note I could have also used the timeupdate event of the audio element instead of set interval; however, setInterval allowed us to control our proprietary frame rate. HTML5/CSS3 As browsers become smarter, we can do cooler things with them. In this case, we used Cheerify.it as an excuse to play with some of the more cutting edge features of modern browsers like CSS3 animations and HTML5 audio. HTML5 Audio Html5 Audio has come a long way. For this experience, we didn't worry about creating fallbacks for older browsers like we normally would. We've used MediaElements.js on several websites in the past with great success. This time around we kept it simple using only two source files, MP3 and OGG. We then took advantage of the audio element's methods and properties to keep the animations in sync with the music as well as create a little music player that allows users to play/pause and mute the whole experience. CSS3 The real fun was coming up with CSS3 animations. Every animation was made using pure CSS3, even the dancing snowman. Only thing we could have done better with the snowman is used the animation-delay property instead of setTimeout() to trigger different parts of the animation. Both work, just in the future, CSS over javascript. Vanilla Javascript When it came time to writing the javascript that made the magic happen, we decided early on we would build it without jQuery. We mainly did this because we didn't need it. It was also an opportunity to brush up on our DOM manipulation-fu while exploring some of the lesser used ways of selecting elements. To make things easier while we animated, we created a javascript object of arrays of elements that could be manipulated. We started by grabbing all of the elements on screen, document.getElementsByTagName("*"). We then looped through all of the elements and added them to our object of arrays based on: How big they were Where they were located Whether they were hidden or not Whether they were within the viewport or not Then, we created a function for adding effects to elements. This function would add a class to an element and remove it after a set amount of time. This is how we animate all of the things. Creating An Easier Way To Share The Experience All of our early prototypes were executed using the browser bookmark. This made things easy because all I had to do was insert my javascript file before the closing body tag and the whole experience would start. We all agreed however that browser bookmarks are not as intuitive as we needed the experience to be. Our solve for this was to allow people to Cheerify their site by typing a URL into an input box and then pressing "Cheerify It". To accomplish this we used PHP to test if we had a site to cheerify. After grabbing and cleaning up the URL, we used CURL to get the contents of the web page. This is where it got a bit mucky. We assumed that the destination site had well-formed HTML and attempted to insert our cheerify script before the closing body tag. Believe it or not, there are sites out there that have more than one body tag and others with no body tag at all. So, now we had a URL that looked something like http://www.cheerify.it/?site=https://www.ampagency.com with all of the contents of that page grabbed, manipulated and ready to output to the browser. We then echoed out our manipulated HTML and hoped all was well. It wasn't, yet. Using this method, we made several assumptions about how the HTML was formatted. We also had broken paths to all assets using relative URLs. To fix this, we did a very primitive preg_replace to replace all relative paths with absolute ones. This fixed relative URLs in the HTML but not relative URLs lazy loaded with javascript. This was probably the hackiest part of the whole project. To fix broken sites that add content with javascript, we did another search and replaced on all paths after the DOM was fully loaded and all javascript had been executed. I then overwrote the javascript alert() function to silently output to the console to avoid any other interruptions. Going Live One of my favorite development automation tools is Grunt. It played a huge part in automating the staging, minification, auto-prefixing and de-linting of the code during the development process. I've included a modified version of the Gruntfile.js we used in the Cheerify.it GitHub repo. Wrap Up The Cheerify site was a lot of fun to work on and and the team did a great job turning the whole project around in a short time frame. Check out the Cheerify.it Source Code on Github and leave a comment below with your thoughts. Finally, don't forget to Cheerify this page.

Tech At Bonnaroo

For the last 12 years, thousands of people have flocked to Manchester, TN to soak in the sun, music and good vibes for Bonnaroo. Bonnaroo is one of the largest music festivals in the US and wrapped up its four days of non-stop music and activities this past Sunday. I was fortunate enough to attend the festival again and not only was the event environmentally conscious but technologically advanced as well. The Website The Bonnaroo website serves as a Roo-goer's home base for everything from lineup info, tickets, news, videos and even a post-Roo "lost and found" powered by great-karma.com. This year, Bonnaroo teamed up with PROD4ever and WPEngine to create an appealing website with all of the bells and whistles an event of this size needs to run smoothly. The main site itself was powered by WordPress with WPEngine managing WordPress hosting service -  handling everything from support to site speed. The partnershipworked well given the site's size and stature. Mobile App Bonnaroo's website was great both on desktop and on mobile because of its responsive theme. There are however some things that are better suited for a native app and that's where the Bonnaroo app came into play. It mirrored a lot of the content from the website in a more mobile friendly manner and introduced some mobile only features like a trip planner for the drive down. The app was developed and maintained by Nashville-based Aloompa, who seem to have a monopoly on the festival mobile app department. RFID The best tech integration at Bonnaroo the past two years has to be their RFID wristbands. They acted as your ticket into Bonnaroo and they were scanned every time you headed into "Center-roo" to see a show. These wristbands made it a lot harder for people to sneak in or create fake tickets. The wristbands also created a bunch of opportunities for interactive experiences. People were encouraged to register their bracelet and connect it to Facebook and Twitter before the event, so they could use check-in locations at each stage to automatically update their status and hopefully make their friends jealous enough to want to attend next year. Checking-in was as easy as holding your bracelet up to one of the RFID scanners, a single beep and a green light and you were on your way. Some of the stations even allowed you to pose for a quick picture that would get posted automatically. Last year, this social experiment generated over 200,000 check-ins. Still waiting for the numbers on this year. Streaming Video All of the cool festivals are doing it. It's actually what got me interested in attending my first Bonnaroo last year. This year, Bonnaroo teamed up with UStream to broadcast two channels, so you were always in on the action. The high quality footage will be released slowly to the public over the course of the year to garner interest in next year's festival. In addition to UStream, Bonnaroo teamed up with ChirpVision to stream 3 live shows at once to the audiences' mobile devices. All you had to do was download their app, and you could take advantage of their free-wifi and video streaming service. Honorable Mention It's not new or directly connected to Bonnaroo in any way, but boy is it awesome. Most people who attend Bonnaroo drive from whatever part of the county they hail from. This year, we used the Waze app for directions to Bonnaroo instead of our old friend Google Maps. Waze is one of the coolest apps I've used in awhile. It's slowly been building a loyal community of people who report things like traffic, accidents, speed traps, hazards etc. The app can then help you re-route to avoid potential delays and even warn others of upcoming hazards. I can't wait to use this app again for my next road trip. Wrapping It Up Bonnaroo is more than a music festival. It's the perfect blend of music, art and technology to create a truly amazing experience. It is officially safe to leave your phone in your car and forget about it until it's time to pack up Monday morning. With Bonnaroo's high quality videos and easy check-in stations there's no need live life through a small screen when it is happening right in front of you. Bonnaroo is an experiment gone right, and I can't wait for next year.

Interact With Rich Media Right In Your Facebook Timeline

Facebook is constantly making changes, whether you like it or not. There's one change few have noticed that creates a huge opportunity to increase engagement with rich media on Facebook. First let's look at the way it used to be. You develop some rich media, let's say a game, that you want to drive traffic to from Facebook. You would probably host that content on a Facebook tab or a micro-site. You would then post a link or an image on your Facebook timeline to drive traffic to your game. But what if users never had to leave their Facebook timeline? What if clicking on that link in the Facebook timeline opened the rich media experience right there. You've been able to do this with videos for awhile but now anyone can create rich media that can be played the same way. This functionality has been around for almost a year now however few have begun to experiment with it. The idea can be extended beyond games to create interactive surveys, custom video players, contests and more. All that's required to get going with "Feed Gaming" is a little knowledge of how to create Facebook apps and the open graph. Unfortunately the rich media units will not work on mobile devices that don't support flash but that just creates an opportunity to show off your HTML5 know-how to develop mobile friendly alternatives on your micro-site.

Guide To Using Other People's Content On Your Blog

One of the great things about blogging is the freedom to express your opinion. And while the majority of opinions won't cause too much of a controversy, one of the few ways you can get yourself into trouble is by stealing other peoples work. It can be tempting to copy a great idea. Wasn't it Sir Isaac Newton who said "If I have seen further it is by standing on the shoulders of giants." There are ways to go about repurposing other people's content so that you are not just copying them but adding to the conversation. Your Point Of View The great thing about you is that you are not me. I want your fresh perspective on the topic at hand. It's your unique voice that will keep me coming back. Continue the conversation, don't repeat it. If you think someone did a great job covering your topic it only seems logical that you would link back to the original post. Same goes for tweets, comments and other conversations already happening elsewhere on the web. Aggregate the best of the best. Rather than writing a whole blog post about an awesome tutorial you found, why not post a collection of your favorite tutorials. At least fall back to tip #2 if you need to re-share that one awesome tutorial. How To Properly Cite Other People's Work Blogs Always link back to other posts when you can. Most blogging platforms will actually detect the link and create an automatic link back from the original article. Social Media Most social media sites provide you a way to link back to the original piece of content. For comments you can usually click on the date to get a direct link to that comment. Also keep an eye out for ways to embed your social content into your sites. Twitter, for example, recommends that you use their new Embedded Tweets functionality. Images To summarize from "Copyright Fair Use and How it Works for Online Images" ... when in doubt, assume it's subject to copyright and don't use it without the appropriate permission ... It's best to either use your own images or images that have a Creative Commons license. Learn more at "Using Creative Commons to Find Photos You Can Use". Still Not Sure? If you are unsure or worried about breaking copyright laws, just remember these simple rules: If you didn't create it you need to link back to the original source It's safer to link to content than to copy it More Info on About.com Conclusion In the end there isn't too much to worry about. You will usually be contacted by the source if you end up stepping on any toes. A majority of people want you to remix and link back to their content. It's the heart and soul of what makes the web so powerful.

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: W3C MobileOK Checker iPad Peek Google Mobile View Happy smart phone browsing!

What is Responsive Design? Insights Lab Episode 16

AMP's Web Developer extraordinaire shares an overview of responsive design, why it's important and examples of brands who are excelling in responsive design. Tweet us @AMP_Agency to let us know what topics you want to hear about!

    Related Posts