Buyer Beware: What You See is Not What You Get with ‘Easy’ Web Solutions

javascript adaptive and responsive mobile optimization

If you’re shopping for a new website or mobile solution, chances are you’ve heard this pitch:

“Build a beautiful website in minutes! No code required – just drag and drop to get exactly what you want.”

Chances are, if you or your developer is using a simplified templating site with a pitch like this, you’re not getting exactly what you want.

While building a web experience that delivers on both desktop and mobile isn’t a hard proposition, more often than not, these one-click, seemingly easy solutions are empty promises.

Here are some tips to help you navigate – and better filter- the internet jungle of available solutions:

Absolute Positioning

Drag and drop templates make use of a CSS style rule called absolute positioning.  This allows users to easily drag photos, buttons, text boxes and other elements onto the exact spot on the page they want.

If we lived in a world without variable screen sizes, this would be a perfect solution.  However, that’s no longer the case.  With the rapid evolution of technology and the variety of screen sizes, digital experiences must be flexible and robust.  Using absolute positioning can result in two major snags when optimizing your site for mobile.

The page will have one wrapping element with a set width. This width is usually between 900px and 1100px, a size that accommodates the majority of desktop monitors without over-filling them. Absolute positioning gives each element (e.g. a photo, paragraph, button, etc.) a set distance from the top and sides of this wrapping container. If the wrapping container is too wide for the smaller screens of mobile devices, much of the content will be flow off screen or be hidden. However, if you try to change the size of the wrapping container to fit a mobile screen, all alignment and positioning is affected and the site no longer looks how the user intended.    This makes the site unusable on varied screen sizes- not to mention a poor first impression.

absolute position is bad for mobile

Often drag-and-dropped elements that have no hierarchy appear in the source code in the order in which they were added and not the order in which they appear on the screen.   When elements exist in the source code in the same order in which they appear on the site, everything will stay in logical order, even if the absolute positioning is removed.  When the elements have no hierarchy or logical order, when the absolute positioning is stripped away, the elements appear chaotically on the page.

Pages that use absolute positioning often don’t use a standard hierarchy for elements, instead all elements exist at the same level.  They are not nested or grouped. When related items are grouped or nested (i.e. if all menu links are nested inside a list with a class of “menu”), blocks of relevant content can be moved and restyled for a variety of screen sizes instead of requiring new code for each individual piece.

Grouping and Nesting elements is good for flexible web design

 

Javascript Generated Content

Content that is added to the page after the page starts loading is usually generated with Javascript.  This is content is not present in the source code.  Google crawls websites and indexes information to help shows the best search results to people browsing. To boost your SEO, content must be easy to digest and organize.  If your content doesn’t exist in the source code or takes extra time to load, it could be a barrier.

Javascript generated content can also be challenging when designing a mobile solution.  Common strategies for creating a mobile solution for an existing site include repositioning or restructuring content with scripts.  If the content is added to the page later, it can be very difficult to effectively change the added content with other scripts.  Users may see the added content for a millisecond before the second script can affect it, causing flashes that negatively impact the user experience.  Javascript adaptive mobile solutions detect the type of device and then tell it to load the scripts and styles specific to that device type.  If content is added to the page after this detection and tailoring is complete, the added content won’t be subject to the device-specific scripts.

WYSIWYG…  Sometimes

WYSIWYG (What you see is what you get) editors make it easy to add styling to a site without having to write the code yourself.  The drawback is that you are seeing the content in a very narrow set of circumstances. For example, an image may look great floated to the right of a paragraph on a desktop, on a mobile screen, it’s likely a different impression, displaying a squished, cluttered experience, sending users the other way.

WYSIWYG problems on mobile

Because it’s hard to mimic all the different circumstances in which your site will exist (different screen sizes, devices, browsers), a WYSISYG editor is only showing you “what you get” some of the time.

Some templating sites and WYSIWYG editors are better than others, but these solutions don’t replace a human brain – a good web developer – who delivers more flexibility, better results and ensures adaptation and future proofing.  A good designer or developer will know what to look out for and how to prepare for the different circumstances in which your site will need to perform.

Flash Content

Apple does not support Flash on the iPhone, iPad or iTouch and announced they never would back in 2010 with an open letter from Steve Jobs. As consumers made the switch to browsing the web on mobile devices, Flash became passé.

Whether or not your site is mobile friendly, users can still view most content, even if it’s illegibly small, runs off the screen, or is clunky to use.  But with Flash, your users won’t get anything except a notification that Flash is not supported.

apple killed flash, don't use it on your mobile site

 

How to Choose a Robust, Flexible Web Strategy

When shopping around for a developer, a content management system or a website template, be aware of the potential pitfalls of overly simplified solutions.  Whether you’re looking to work with a local developer, boutique design studio, content management system, or free templating solution, use this guide to avoid investing in a poor web experience, which will cost you more time and money.

The following are some questions to ask, along with mobile web design tips to guide you on a journey to the right web solution:

Do you use absolute positioning for layout?  If you do, are the elements nested in a standard HTML hierarchy or do they all exist at the same level?

You want to be wary of absolute positioning, and completely avoid a solution that uses absolute positioning without any hierarchy for elements.

 

Is there a lot of after-render Javascript generated content?

This isn’t a deal breaker, but if a majority of or all of the content is added after the page starts loading it’s a big red flag.

 

Does the solution account for different browsers, devices and screen sizes?  Does the developer test on all browsers and devices?  Are there ways to emulate different browsers and devices while using the WYSIWYG editor?

A robust solution must adjust to the variety of screen sizes, operating systems, browsers and devices on the market.

 

Does the solution utilize Flash?

Flash = no.  Run the other way as fast as the Flash would.

 

Does the content management system allow you to add javascript to the header of the site?

This is useful for using Google Analytics, third party mobilization tools, and other useful features.  A CMS, template, or developer who is flexible enough to allow code to be added to the header of the site is likely going to allow you to do more with your site in the future and to keep your site current as mobile technology ebbs and flows.