You see it every time you walk into a grocery store, people roaming the aisles while holding their phones. What do they see when they look at your store’s website? If you haven’t updated your site to be responsive, about 20 seconds of pinching and zooming in and out will happen before they give up and leave your site.
What is a responsive website? A responsive website changes to fit the shopper’s device of choice, whether it is a laptop, tablet or smart phone. The site can detect what kind of device is being used, then changes the layout so the site doesn’t get cropped and text is big enough to read. Photos get re-sized, text gets re-sized, and multiple column layouts get stacked into one column. This happens so the site is easier to navigate by just using one hand and your thumb. Pinching the screen to zoom in and out takes two hands, so how’s a customer supposed to push the cart too?
The “hamburger” icon
For easier navigation, the ‘hamburger’ icon is used a lot. This icon hides the menu/navigation bar until tapped on to save space. Once the icon is tapped, a slide-in menu shows up showing you the pages on the site available.
Adaptive Images uses a script to re-size images. The script figures out how big or small an image needs to be by taking into account the screen size of the device the viewer is using. The script also determines if a retina display is being used, then generates the appropriate sized image. A little bigger for extra detail and sharpness is needed for retina displays.
When building a responsive website, testing the site on multiple different devices is necessary at the beginning, the middle and end of the project. In our department, we have a created a testing area. We have 5 different mobile devices charged and ready to test our responsive sites. We test our responsive sites on an: iPad, iPad mini, Galaxy tablet, Galaxy S5 phone and an iPhone, not to mention the standard desktop browsers for Mac and PC.
When a customer says a site feels ‘app-like’, they’re not always talking about the way it looks. They’re talking about the way the site responds to their actions and the way it performs when they make those actions. A couple of tricks used to get that ‘app-like’ feel are done by adding ‘Touch States to Your Buttons’ and ‘Momentum Scrolling’. But that is a whole other post…
My co-worker Cara found this short article that shows and explains some of the tricks responsive sites use to make the site easier to view on a mobile devices. This article has some nice simple animated graphics that shows how a site will change when viewed on different mobile devices. Even the article is responsive and the animated graphics will work on your phone too! Take a look: http://www.fastcodesign.com/3038367/9-gifs-that-explain-responsive-design-brilliantly#1[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][/vc_column][/vc_row]