Blog Details

Some of the ‘first questions’ asked any website development prospect are to gauge expectations around viewing and using mobile devices. It is no secret that the mobile internet is well on its way to being a key delivery tool and we need to know how important the mobile experience is for the overall solution.

I'd rather now write a blog pointing out items already put out there over and over, so I went to Google, just to see if there is another Digital Agency in Chicago (or anywhere) sharing information on the mobile optimization we do here at BlueBolt. The fact is that there are only three ways to optimize website content on a mobile device. But almost everyone discussing this topic points out how to organize content, why to make it simple to navigate, and how to assure branding consistency. In my mind, those solutions seem to be the obvious, fluffy stuff. What should a website developer (or owner) be thinking about from a technology perspective? What are the options? The answers to those questions are the topic of this blog.

Before beginning, a few assumptions must be made:

  • First. You have to assume that the mobile site is going to look differently than the way it looks on a desktop and that some amount of planning will have to go into site navigation.

  • Second. You have to know what devices you’ll be optimizing for (what tablets, what mobile devices, what sizes they are, etc).

  • Third. You must realize that redirects to the mobile device must be built into the project.  There is no magic wand that will just “know” which visitors are using a mobile device. There has to be some way to detect the device and a strategic plan must be devised to appropriate the redirect.

  • Fourth. Mobile optimization isn’t to be confused with creating native mobile applications, where the app must be downloaded onto a device. Mobile web optimization is merely giving a website a way to display on a mobile device, hopefully taking into account the balance between the need to share web content quickly but also realizing the mobile/reduced display area.

Ok, now we get into the meat of the blog...WAYS to mobile optimize a website:

Develop the site to be RESPONSIVE. 

Basically, a responsive site can be organized any way the developer likes, but when the site is resized for a given mobile device it reorients the content, and takes advantage of the shape and size best it can.

  • Advantage to responsive development:  Redirects are not necessary, and platform agnostic.

  • Disadvantage to responsive designs:  The designs have to be meticulously planned to accommodate all potential displays. Because of the wide size ranges, HTML/CSS has to be extremely well organized in order to make proper use of all images, templates, and containers.  Further, even if some content is hidden for display purposes, responsive design assumes ALL content will be delivered, so this can have an impact on mobile site performance.

Share content across portals.  

If a website is developed using a portal based Content Management System (CMS), those tools can sometimes be used to build out the mobile presence. The challenge is that new skins have to be designed and HTML created for those skins. This does require a deep redirect strategy, but depending on the mobile development requirements, this could be a great way to handle the overall problem.

  • Advantages to redirecting content across portals:  The site does not require as much stringent HTML/CSS planning as a responsive design, because the site doesn’t have to resize itself. The navigation can also be reorganized in any way the designer likes and can use any practices thought to offer the best mobile web experience. This way of optimizing a website for mobile allows the developer to limit the content being pushed to the mobile version, possibly to enhance performance. Perhaps the greatest advantage to redirecting content shared across portals is that the site content can be managed from its parent site, or independently. It is the choice of the site administrators.

  • Disadvantages of redirecting across portals:  The site will require new mobile skins to be both designed and developed. The option to choose this way of optimization depends on the platform being used and the kind of content hoped to be shared on mobile devices, because dynamic content may present challenges (due to the way list views must be organized). Lastly, the administrative tools must be strong enough to allow for easy content management across the different portals.

Custom Development.  

From a custom perspective, almost anything web and mobile-wise can be achieved with or without a CMS if the designer has enough creativity and the developer has enough time and budget.  Depending on site requirements and existing tools, this may be the only option. When options do exist:

  • Advantage of custom mobile development:  Freedom to be creative and only limited by the talent of the staff involved.

  • Disadvantage of custom mobile development:  It can be costly, both in timeline and direct cost and custom tools often lend very little content management capabilities. Unless planned very strategically, a custom solution might require totally separate tools (or skill sets) to manage the content and may require double entry to the different sites (possibly multiple) for different mobile devices.

As with most technical challenges, the best way to develop your website to display on a mobile device depends on the variables involved.  Let us know if you need someone to dive into your particular situation.

Recommended For You

Icon Template for iOS Development
This article is for people who are just starting out.
Building a mobile solution - Part 2
Create a simple image carousel for your mobile app.
Building a mobile solution - Part 1 - Aaron Shapiro Blog 4/20/12
Review of the underrated mobile development framework.
Preparing Your System for Geolocation
Using Microsoft Geocode services to create location-aware systems.
Location Analysis with Spatial Data

A high level look at Eclipse as a development platform.