Beyond Responsive Design (for Online Retailers): Delivering Custom Mobile Experiences for Multiple Touch Points

Transcription

1 Beyond Responsive Design (for Online Retailers): Delivering Custom Mobile Experiences for Multiple Touch Points When the Internet first started to become popular and widespread, webpage design was a relatively simple matter. In size, shape, and basic structure, websites were designed after the look of a book or a newspaper, which is why they were called pages. The layout could be changed any way you wanted, but the basic format would always stay the same. You d design each page of your site with a specific aesthetic, and it would display approximately the same way anywhere it was accessed. For all intents and purposes, the page looked the same on every computer. This was because everyone was browsing the Internet with desktops and laptops, which had screen resolutions that were all comparatively similar. Then along came mobile devices, which completely changed the way we got online. Suddenly, you could load a webpage on your phone. The phone was much smaller than a regular monitor, and shaped very differently, so pages had to be optimized to be viewed clearly in a different set of screen resolutions. Then tablets were introduced, and with them, yet another screen size to optimize your content for. In addition, there was the fact that mobile devices could be turned either lengthways or sideways (portrait or landscape), so websites had to be able to adjust themselves accordingly.

2 And the visual aspect of the layout wasn t the only thing that came into play when dealing with these different platforms. Reading an article or a blog on your mobile device is one thing. But what about using retail sites? Customers needed to be able not just to view the site, but also to interact with it, searching for information, making purchases, and more. Mobile Touch Points Any device that a customer uses to access your site is called a touch point. A touch point is a method by which customers and potential customers are able to come into contact with you as a seller and browse and interact with the content you provide. Every device is different, therefore every touch point is different, and creates a unique experience for the customer using it. Because of this, a website needs to be able to mold itself smoothly to each device s parameters and create a custom mobile experience to meet each user s needs. Creating websites that can first support the level of content that a retail website needs to provide, and second provide customers with the functionality they need across multiple, diverse touch points, is a challenge that many web designers are still struggling with. Here s a look at some of the solutions that are available, and how they work towards solving the various problems surrounding dynamic mobile web browsing on retail and similar sites. Stack Fragmentation and the One Web Movement One way that multiple versions of the same webpage can be designed is in layers. A product-blogs/event-marketing/ how-to-mobilize-your-event-invitations-and-registration-forms/

3 Stack Fragmentation When this happens, important features often end up being sacrificed in the mobile design, making it ultimately obsolete in a world that demands to be able to do everything on the go that it can do at home. website has a layer of code called web services, which is in charge of communication with other devices. Layers of code for mobile sites, mobile apps, and other functions can then be built on top of the web services layer and tap into the site s content and features while still maintaining its pre-defined mobile attributes. A web designer can layer a smartphone version, a tablet version, and more over the existing desktop website, and enable it to load dynamic website content like a shopping cart or order form, in a format that s customized for specific touch points. These layers even allow you to create new content that s specifically for mobile use. The problem with this approach is that web content is becoming more and more complex all the time. The dynamic content of today is much more advanced than the dynamic content that was prevalent when this method first came into use, and interactive web tools like store locators, product search engines, and apps that process sales are increasingly difficult (and expensive) to maintain across all these different layers of code and still have them function properly. All the assembled components of web development are called a development stack. A stack consists of a series of interconnected technologies, all piled on top of one another to create a functioning system. In the world of computers, there are different types of stacks that serve different purposes. In the case of web development, the stack consists of an operating system, a web server, a database of files and information, and a programming language. As an increasingly complex website with various versions layered over each other tries to stretch itself across multiple touch points, it can lead to stack fragmentation, splitting the various components and hindering them from working together the way they should. When this happens, important features often end up being sacrificed in the mobile design, making it ultimately obsolete in a world that demands to be able to do everything on the go that it can do at home. The One Web movement began in an effort to try and solve this problem. Rather than a specific solution, it s an overarching goal: to create a simplified, organized web design that works universally across different touch points, using a single set of code, and that can easily accommodate future advances in technology and content without requiring a complete overhaul of your site. Responsive Web Design Responsive Web Design was born from the One Web movement. It uses a single code base, but can be adapted for all different touch points. It generally uses fluid grids and flexible images that can be scaled to any resolution, making site content adaptable and easy to view on any device. One thing that sets Responsive Web Design apart from other methods is that, rather than requiring a separate design for each size of screen, it s geared to a whole range of resolutions. By setting the resolution range from smartphone to desktop size, the

4 blog.intergage.co.uk/five-tips-foroptimising-your-mobile-site/ page can automatically adapt itself to display content for any size in between. All of these design features for Responsive Web Design are on the front end, i.e. the branch of web design that deals with how a site looks: font choices, color schemes, layout, etc. It s a much simpler way of handling things than back end design, which is the side of web design that involves complex code, and was what led to the layered approach. When it was first introduced, Responsive Web Design seemed like the way of the future. But for all of its benefits, the solution is far from perfect. Problems With Responsive Web Design The first problem would appear on the surface to be one of its benefits. On a Responsive website, all of the content is loaded, no matter what device it s being accessed on. But a smartphone doesn t have the same processing power that a desktop does. Dynamic content such as flash videos and other complex tools and widgets that on your computer are ready in a snap, on your phone can take forever to load. So in order to make your site load more quickly, you have to do a complete overhaul of your front end, essentially rewriting your entire site from scratch. This is not only tedious and time consuming, but costly as well. Then finally, when your new site is ready, what do you have? A layout that looks

5 great on a smartphone and loads quickly, but which on a desktop or even a tablet, is stark and boring and lacks the dynamic content and functionality that you were trying to preserve. Essentially, its a dumbed down version of your website that ultimately fails to leave a good impression on your visitors. Though you don t want to limit your site s functionality on mobile devices, the fact is that people s needs when they re out and about are often quite different than their needs when they re sitting at home on their desktops. So ultimately, your mobile touch points need to accommodate different functionality from that of your main site. For example, someone browsing your retail site on their phone is less likely to be looking to make a purchase, and more likely to be looking for information, such as directions to your nearest location and what that store s hours are. Or maybe they re just browsing through your product selection, or comparison shopping. If you have exactly the same content and layout load no matter what device they re using, your customers will have a difficult time wading through it all on the smaller screen, to get to what they re looking for. In some cases, websites designed with retail functionality won t support Responsive Web Design at all. This means that the Responsive site needs to be designed on top of the regular one, completely negating the concept of a single, unified code. In this case, a site will also need to be designed several different times for different devices, ultimately stretching out the design time and cost to levels that a lot of retailers will simply find unacceptable. So although Responsive Web Design is great for simpler setups and static pages that don t involve interaction, it just doesn t measure up to the continually advancing technological needs of sites that require e-commerce functionality. Another solution must be found. Server Side Solutions Server Side applications are functions performed by the web server, rather than by the browser (which are called client side applications). There s a myriad of server-based tools that can be used to design dynamic, mobile-friendly pages, including SQL and Java. A lot of web developers try to augment Responsive Web Design with some server side components that address the issues Responsive Design creates. Server side components allow you to load specific content on your mobile device, prechosen by the server, rather than deal with the long load time of the entire page. This way you can customize your mobile browsing experience in ways that Responsive Web Design doesn t support. So a mobile visitor to your site can browse through and interact with products quickly and easily, without having to worry about any of the extraneous features that can slow the page down.

6 Full Stack Site Virtualization All changes and customizations to the site are done quickly and simply, in real time, before the site goes live to your mobile customers. Whereas layered web development causes stack fragmentation and leads to problems across the various touch points, this method of site virtualization utilizes the full development stack, keeping it intact without sacrificing any site functionality. However, there are still some problems with server side components. There s no standard platform yet for implementing these kinds of design features, which means that if you want to do it, you have to do it yourself, entirely from scratch. And just like with Responsive Web Design, it requires a complete overhaul of your front end design in order to be compatible with both your desktop and mobile versions. So unless you ve got access not only to a talented web designer, but also to quite a bit of time and a fair amount of money, server side solutions might not be a practical option for your site. You need to find an easier, more flexible, more userfriendly solution. Full Stack Site Virtualization While Responsive Web Design and server side components both battle for supremacy in the quest for mobile-friendly content, SellerActive has created a solution that integrates the best of both. The site is virtualized and design adjustments are done in the cloud, providing more dynamic and flexible tools, which in turn make for a more dynamic and flexible site. Once the site is virtualized, a preliminary mobile version is created in the cloud, which incorporates all of the desktop site s features and content. A front end web developer can then use that virtualized site as a base, to customize the mobile version and create the ideal user experience. All changes and customizations to the site are done quickly and simply, in real time, before the site goes live to your mobile customers. Whereas layered web development causes stack fragmentation and leads to problems across the various touch points, this method of site virtualization utilizes the full development stack, keeping it intact without sacrificing any site functionality. And though all your site s features and data are available in the mobile version, it only downloads the content you actually use, allowing you to customize your mobile experience and cut down on load times. The design platform allows you to make changes to the front end quickly and simply, without requiring a complete overhaul of your site. The site transformation tools let you begin with the original site and mold and customize it any way you like. You can adapt it to fit a range of screen sizes and resolutions. You can change, adjust, and remove site features. You can even add features specifically for mobile users, that don t appear on the regular site. For instance, if you wanted to create an in-store app to assist people or provide them with pertinent information as they browse the items in your store, you can add that to the mobile version of your website, without bothering the people who are at home on their desktops. Additionally, if you want to make changes to your site s code on the back end, you can do so without disrupting your site s look or functionality, as long as things on the front end stay the same. And also, since all of the site s features are imported to the mobile version via the cloud, the desktop

7 SellerActive selleractive.com twitter.com/selleractive facebook.com/selleractive youtube.com/user/selleractive/ and mobile versions remain linked. So any changes you make to your main site, such adjustments to the search capabilities or an improved interface for placing orders are automatically carried over to the mobile site as well, without your having to go in and redesign things manually. The SellerActive platform lets you add, subtract, or modify site features and components, as well as HTML code, at will. It also provides you with analytics tools to monitor what site features are being used and how they re working and being received by your customers, in order to continue to provide them with the best experience across all available touch points. One of the ongoing problems with a lot of mobile web design platforms is that the continuing advancement and development of technology, from the devices themselves to the content displayed on them, undermines the way these platforms work, leading to problems with the way content is displayed and ultimately rendering them obsolete. But full stack site virtualization is designed to be versatile and adaptive, to accommodate future changes in technology. Necessary updates to your site can be made quickly and simply, without a complete overhaul of the front end. The site virtualization method of web development is designed to remain functional and relevant far into the futureand to make sure your site is able to do the same. Conclusion A fast, dynamic, and easy-to-use mobile version of your website is essential if you want to stay competitive in business in this day and age. People are carrying their entire worlds around with them in their smartphones and tablets, and if you can t deliver what they re looking for, you won t be a part of that world. You need to make sure your mobile site is adaptable and customizable. It needs to be able to accommodate all of your site s tools and features, and remain functional no matter what platform it s being accessed on. There are lots of different factors to take into consideration, and for an e-commerce website, they re far more important than they would be for a less complicated one. It s certainly not an easy task. But if you do it right, it s definitely worth the effort. Mobile e-commerce is on the rise. 10% of online retail is done via mobile devices, and that number is rapidly increasing. 96% of smartphone users utilize their phones to research products, and 35% use them for comparison shopping. The desire for retail shopping on mobile devices is here. There s definite money to be made from it, if you play your cards right. You just need to make sure your site is ready. Seller Active is here to help you begin the journey.