Responsive Web Design and How it’s Changing the Web You Know
Responsive Web Design and How it’s Changing the Web You Know
When someone visits your website, chances are they are not viewing it the exact way you imagined they would. If users visit your site and they cannot use it easily (or at all), you may have lost your one and only shot at capturing that client. As mobile web browsing statistics continue to sky rocket the question becomes: "How do I make my website visible to the thousands of different devices out there today?" There are many solutions to this problem and we at Skuba have used all of them over our 12 year history. While there are benefits and drawbacks to each, there is now a clear road that we find to be the best solution in 99% of cases.
Early in web history came the browser wars where sites needed to be tested in IE7, IE8, IE9, Firefox, Chrome, Safari. While this is still true, most good web developers have found a set of tools and techniques they use to combat these potential issues. But just when you thought web design was safe, along came mobile browsing. And it came on stronger than anyone predicted.
Between January 2009 and July 2012 mobile usage jumped from .06% to nearly 12% and continues to rise exponentially every month. With currently 1 in 10 people visiting you from a mobile device, how can you afford to not make your website visible to these users? This month mobile browsing in India passed desktop browsing as the number one way to access the web. A new report released by the IDC predicts that mobile browsing will surpass desktop browsing globally by 2015. With hundreds of new devices entering the market every year what is the best way to make your website available to this ever growing client base?
Initially the answer to mobile browsing was thought to be a mobile specific website that is a separate from the main site. While in some instances this is a good solution, it is almost always the wrong route to take. Unless you are leveraging mobile specific technologies (like geolocation, ringtones, or built-in camera) then there is usually no need to build a completely separate website that induces significant extra costs from development to post-launch.
Another major problem with redirecting users to a mobile specific site is that the techniques used to detect what device users are on is flawed from the start. The technique known as Browser Sniffing (also called Device Detection) examines the User Agent string and then matches that to a database of known devices. If the visiting device is listed in the database, users are sent to a mobile version of the site. The problem with this is immediately apparently: what if the user is on a new (or obscure) device that has yet to be entered in the database? You could default redirect to a mobile site and check desktop User Agent strings (which we did use in the past), however this does not resolve the other afore mentioned issue of costs with mobile specific sites.
The most important problem with mobile targeting and redirection is that devices vary in size dramatically across the mobile spectrum. As the popularity of tablets continue to increase a whole new set of issues is created. What if there was a way to serve a single website to all of these devices at a fraction of the cost of creating a mobile specific website or mobile app?
Enter our story's hero: Responsive Web Design. Essentially responsive design is a CSS3 technique that leverages Media Queries to create adjustable layouts targeted to the screen size of a device. This means that content can be shifted or removed entirely to make the most important information easily accessible and prioritized. A great quick summary of responsive web design can be found here: What the heck is responsive web design?
The last step is to make sure that you are not loading huge images, unused files, or excess data that cannot even be viewed by mobile users. It is absolutely vital to not simply use responsive design out of the box, but rather to team it with a mobile-first approach. This powerful technique is also known as progressive enhancement and means that you serve the mobile site first and then load in other elements and features as needed. This will speed load times for users, reduce bandwidth usage, and even make the site run faster on less powerful devices.
The result is a website that has the speed of a mobile specific site, the ability to cater to every device size, and the ease of updating just one single website. We at Skuba are experts in mobile-first responsive web development. Contact us today to work on your next website.
HOW LONG DOES A WEBSITE LAST?
You have a beautiful new website but how long will it last? With the rapid changes on the web over the last few years the lifespan of a website has shortened to 3-5 years, most now would say 3 years before you need to start planning for the new website or rebuilding/redesigning your current website.Continue Reading
Creating a Web Presence with a Single Page Web Design
If you are a small business it's often easy to try and simply rely on social media sites like Facebook or Yelp to connect with your customers. The problem with this model is that you have little to no control about the branding message that your are trying to convey to your customers. Your company information is surrounded by ads, ratings, comments and colors that are not your own and even worse these sites provide users with related companies that drive traffic away from your product or service.Continue Reading
The State of Web Design in New Orelans
New Orleans is more and more becoming a major tech hub of the South. Through state tax credit initiatives and a mass migration of tech oriented workers, the city is experiencing a shot of life in an industry that is just now becoming associated with the Gulf Coast. Tech conferences, start-up businesses, design agencies and collaborative workspaces are driving forward in a time of recession to help create a new center of commerce in Louisiana.Continue Reading