Mobile Must-Have: JavaScript Adaptive Design

WompMobile mobile must have design best practice javascript adaptive solution


Adaptive Design

Responsive and JavaScript-adaptive mobile solutions (those that maintain a single URL), are preferred by Google and will increase your search rankings. Adaptive websites are traditionally harder to develop than responsive websites and require a deeper understanding of web technology. It’s well worth it if you can do it; adaptive sites load faster and provide a better user experience.

The Downsides of Responsive

responsiveVSadaptiveResponsive solutions are widely used, but are not as fast loading as JavaScript-adaptive solutions.  A responsive design forces each browser to request all of the code files and assets for the site including all the systems to check the window size, device type etc. as well as all the design rules for each and every one of the different device types.  The browser then renders the page in the correct format for the device using only what is necessary out of the information downloaded.

Because responsive solutions are single websites and all resources are always loaded, it is difficult to impossible to maximize the experience of both desktop and mobile users.  Desktop users rely on mice and pointer devices and enjoy a large screen while mobile users rely on a small, touch screen.  This can be problematic when designing navigation, slideshows and other interactive features.  For example, a hover-initiated drop-down menu is a slick desktop navigation option but it next to useless for mobile.  A click-to-call button is great on a phone but useless on desktop.  Responsive solutions are often forced to compromise the UX of all users to enable mobile optimization.

The Perks of Adaptive

Adaptive solutions, whether JavaScript or Server solutions, enable the mobile and desktop version to essentially act as separate sites without duplicating content and making more work for Google.  This is because only the resources being used are sent to the phone and conflicting ones aren’t present.  The mobile resources are designed with only mobile users in mind while the desktop resources are completely separate and designed specifically for desktop.  Specialized mobile-only and desktop-only features don’t have to be sacrificed because they’ll be loaded discretely.  A mobile user has access to all cutting-edge mobile features and never sees any desktop-only, non-mobile features because they were never loaded.

Adaptive solutions allow designers to incorporate location-based features and tap in to phone functionality.  Mobile phones do things desktops don’t including making calls, using navigation software, and telling websites where they are.  Adaptive designers can utilize click-to-call buttons, direct links to the Google Maps app, check-in buttons, and proximity-based features which would be useless on the desktop version.adaptiveimageresizing copy

Adaptive solutions are fast.  They identify the type of device first and serve only the required scripts and assets, nothing extra.  An adaptive solution can use adaptive image resizing to load each image in exactly the size it will display, delivering each device the highest quality it can use without wasting time loading an image that is overly large.  This creates the best compromise between fast loading and crisp display.

The Perks of Our JavaScript Engine

Our JavaScript-Adaptive system makes use of the cloud to store our mobile assets.  Our JavaScript engine will first identify the device and then download the mobile optimized JavaScript and CSS from the cloud.   The engine then combines the mobile assets from the cloud, the selected content from the desktop site and the mobile optimized images, and renders the mobile friendly page in the browser.  This may sound like a lot of steps, but each one takes milliseconds while loading the full CSS, JavaScript and images from the desktop site can take much longer.

The Adaptive method gives you the perks of having a separate site and increased UX.  It also offers the perks of a singular site: fast load times, a single URL, increased Google search ranking and SEO, and automatically synced content.  With the WompMobile solution, the mobile site is actually using the existing content on your desktop site.  This process automatically syncs your desktop and mobile content.  Update your desktop site, update the mobile site.

We have moved beyond the responsive vs. dedicate mobile debate and can offer our clients the best of both worlds.


If you liked this read, check out these: