In a recent study, 57% of users will leave your mobile website if they have to wait 3 seconds for the page to load. After 1 second of load-time, conversion rates drop by 3.5%, and that’s if your site is even mobile-friendly in the first place. Oh, by the way, almost half of all website traffic comes from mobile devices nowadays.
So what is the best solution for mobile web design? How do you provide an equivalent experience across devices while also minimizing load times? You will have to choose between responsive design, client-side adaptive, or server-side adaptive, to implement a One-Web Approach.
All for One-Web and One-Web for All!
As defined by the W3C, “One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using.” With this approach, you are not designing just for today’s smartphone and tablet, but every conceivable viewport size that may ever exist in the future of the Interwebz. Of the three most popular One-Web solutions, only responsive design, when implemented correctly, can account for all future devices and screen sizes. On the other hand, only adaptive programming can allow developers to customize website UX based on the strengths and weaknesses of specific viewports, devices, and even operating systems.
Responsive Web Design
A truly responsive website design makes use of media queries and a fluid grid to adjust the flow of web page components based on the size of the user’s viewport, and sometimes to snap elements to new locations when the fluid grid doesn’t provide an ideal responsive experience. Although responsive design typically uses a fair amount of CSS, the scripting and coding is kept to a minimum and developers are usually able to utilize a single HTML template across devices.
For these reasons, maintenance – including bug fixes and enhancements – is usually fairly simple and can be completed by less-experienced developers. The fluid responsive grid will account for most possible future viewport sizes, with the possibility that a media query may be needed to snap something into place. There are also some great responsive toolkits like Twitter Bootstrap that can provide the initial framework for your responsive website.
Although responsive design is the most popular technique today, implementation on a non-responsive website usually means a full website rebuild – design and code. For large websites this can be a costly effort, from $50K up to well over $500K, and will take several months to even a year for full implementation and QA testing across all devices and browsers.
The most successful responsive designs are often built mobile-first, which means the basic components are designed for the smallest possible screen size first, then progressively enhanced for larger viewports. However, this means we can’t always take advantage of a full design canvas in the earliest steps of the creative process.
Page load times can also be impacted by the overhead of loading a full set of page assets before responsiveness kicks in. For this reason, some mobile pages, specifically in the eCommerce sector, can be as large as 15mb.
Client-Side Adaptive Design
Adaptive design can build on responsive ideals with device-specific customization. To make a website adaptive on the client-side, we use JavaScript and jQuery scripts to add functionality and customization, and even to load or bypass certain assets based on browser and device detection, even going so far as to load high-def images for high-def devices and lower quality images otherwise. Like responsive design, client-side adaptive also allows us to utilize a single template, style sheet, and a small set of client-side scripts, which facilitates maintenance and enhancements.
On the upside, since we are able to leverage JavaScript to manage content and layout, this design style allows us to utilize existing website templates. Re-using existing code significantly reduces project delivery time as recoding and redesign are minimal.
On the downside, developers working on the project must be savvy with JavaScript to make full use of adaptive functionality, so in some cases companies will be required to pay more for developers with proper experience using the technology. Also, many older browsers do not fully support certain JavaScript and jQuery functionality, and device recognition on many smartphone and tablets doesn’t always work as expected, causing assets to load unnecessarily and components to layout improperly.
Server-Side Adaptive Design
A server-side adaptive approach eliminates the need for a responsive template or fluid grid. Device detection using back-end languages like PHP and ASP.NET, works much better than client-side JavaScript detection, although not flawlessly. Once the device is detected, we are able to load a template for the specific device and viewport. This design option targets devices most effectively, allowing the smallest load-times and the highest level of customization.
Like a fully responsive redesign, this approach requires an adaptive rebuild and redesign on both the server- and client-side. Multiple templates needed to be coded and maintained, and back-end scripting requires a developer with strong knowledge of the language and some experience with server administration. Because browser detection and related functions are executed on the server, high-traffic websites can experience high resource usage and slower load-times. For this same reason, most caching must also be turned off unless the adaptive framework is built to redirect users to customized URLs that can only render pages for a specific device.
Conclusion
At Piehead we have tried all three of these approaches to One-Web and we think responsive design is the easiest to build and to maintain, but client-side adaptive design can sometimes offer the kind of device-customized experience that clients desire. We have discussed the merits and limitations of a completely server-side adaptive design, and we feel the maintenance, support, and server resource costs far outweigh the benefits. Most websites typically only need responsive design, with breakpoints, a fluid grid, or both.
When analyzing existing templates for an adaptive approach, we mostly find that those templates need updating, optimization, and some level of responsiveness, so why not just redesign and implement a new fully responsive template while we’re at it?
Would you like to have your website or web application analyzed for mobile compatibility? Contact us today to discover how we can help you increase traffic and conversions, decrease your mobile bounce rate, and impress all of your visitors, regardless of their device, with a brand new responsive mobile presence.
via Business 2 Community http://www.business2community.com/online-marketing/adapt-respond-approach-one-web-development-0628143?utm_source=rss&utm_medium=rss&utm_campaign=adapt-respond-approach-one-web-development
Aucun commentaire:
Enregistrer un commentaire