What methods are there for handling mobile devices? Is one better than the other? Do I even need a mobile-friendly site? Mobile optimized websites are not the next big thing anymore; they are the norm. Websites are expected to work well everywhere at this very second.
We live in an age of now. Technologies, especially mobile devices, have made it possible to find anything on a whim no matter where we are. From a marketing standpoint, we always want to be available to offer up information. Users browse the web on mobile devices everyday, but it hurts your brand if a visitors mobile experience is awkward and difficult to us. We expect everything to work smoothly and get frustrated when there are barriers to the information we want. If you still aren't convinced, take a look at these statistics:
- 57 percent of consumers will not recommend a business with a poorly designed mobile site. Similarly, 40 percent of consumers will go to a competitor’s site after a bad mobile experience
- 91% of all U.S. citizens have their mobile device within reach 24/7.
- 53% of American consumers use their smartphones to access search engines at least once a day (Source: Google and Mobile Marketing Association Survey)
- 70% of all mobile searches result in action within 1 hour.
There are three mobile friendly options:
Responsive Design - Same site, adapting to screen sizes
Mobile Redirect - Completely separate site, accessed through one URL
Mobile App - Native application to Android/iPhone devices
Mobile Optimized Defined
Responsive websites are designed and developed such that no matter the device or resolution, your website will serve up content/layout that look best the current screen size! It helps to see this in action. Try it out on our site! Just take your browser window and shrink it's width to see how the website responds to different window sizes.
Everything is taken into consideration, including the navigation and header, the typography, images, grid system, buttons and forms. Browsing a site that is not optimized for mobile involves a lot of distasteful pinching and zooming in attempt to click the link you want or actually read the text on the page. Typically, we consider 3(or 4) "breakpoints": desktop-ish, tablet-ish (horizontal/vertical), and mobile-ish. The "ish's" are very important here. More and more devices are being released every year, and the number of standard screen sizes is increasing as well. When responsive design first came into play, it was a big deal to figure out where the most common sizes were and consider them. This is virtually impossible to do anymore.
It's fairly safe to say in the technology world that there is a time, place, and situation for nearly anything; it's all subjective.
Methods Pros & Cons
Native Mobile App
A native App for your phone is probably the most favored solution. It's great for branding, it makes your users feel more important, and your company more important. Everyone loves to say, 'we've got an App.'
Native Apps are ideal for anything that requires a lot of user interactivity. Most of these things can be done with a website, but an app runs much much faster. This is because most of the core-code is downloaded and queued on the users' devices, as opposed to requesting information from the internet and loading them each time you load a page. For a computer, requesting pure data, often shrunk to the smallest distinguishable values, is preferred to loading the visual and core features of the application. Unfortunately, this is the most expensive solution, and the hardest to maintain. Any changes to the application or the operating system will require major updates and releases. Think about how often there are new Android / iPhone / Windows releases. But the final product ends up being much faster and more feature rich than a mobile website.
Examples: Amazon, Target, Chase Mobile App
The mobile redirect method involves developing an entirely different site for smaller screens. What this means is that when a visitor attempts to access a website on their mobile device, the site will actually detect how this person is browsing the web; this is called 'user agent sniffing' or 'user agent detection'. If a mobile device is sniffed, it tells the user's browser, "Hey, look at you with your fancy new small screen! You probably won't be able to really see this stuff very well. Don't fret! We have a whole site devoted to users like you. Let me just go ahead and load that for you." This is the part I'm sure you've seen before that causes a page lag and it looks like your browser is loading multiple sites before you see any content.
Having a separate site has one pretty great advantage though: only load what we need. Responsive sites will likely load the same content across the board, unless developed meticulously. Unfortunately, this means maintaining and updating your website is twice the work, and potentially twice the cost. If you are working with an ecommerce site, you may also have to pay for multiple SSL certificates and be forced manage and update multiple storefronts.
There is nothing wrong with this method from an Search Engine Optimization standpoint. However, Google has stated that they prefer responsive sites rather than having multiple URL's for each site and suggest adding some specific clues in the code to indicate that it is a mobile redirect.
Responsive Website Design
As a general rule of thumb, this is the way to go. There is no extra screen flash during a redirect. The user doesn't need to download an App to access the information. If someone happens upon your site, they will be pleased to see that it isn't difficult to use or look bad on whatever device they happen to be using. Maybe they won't even notice, it is just expected to work and if it doesn't the user will be dissatisfied with their experience.
This is also the most cost effective solution. It will take more time to develop and test than a fixed-width website, but much less time than creating an entirely separate site (I won't even mention how expensive developing native Apps can be). Ideally, the responsive factor will be considered at the beginning of the project. This allows the developers to more easily maintain the resources that are loaded. Converting a site at a later point in time could lead to more development hours, based on the content on the desktop-version of the site.
Examples: the site you're looking at now!, Derby Dinner Playhouse, Commercial Kentucky
Despite what method is best for your website, the overall message is clear: mobile is important. If you haven't taken your potential customers mobile browsing habits into consideration, your business will likely fall behind rapidly in the coming years.