Today we’re going to take a brief look at how mobile websites are becoming ubiquitous, why turnkey DIY services are a necessary part of the web design world and a few of these services for you to check out. We’ll even walk you through the process of using one of these services so you can see how easy it is to have your own mobile site up and running in minutes.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

The Mobile Web Is Here to Stay

Once upon a time designers had to spend a good deal of time simply convincing clients that they needed a website. Eventually though, everyone came around and by today just about every business on the planet agrees that a website is not only a worthwhile investment but a necessary one.

Many web designers in the past five years have been in the same place with mobile site design as they were long ago with full site design, but we are definitely beginning to witness the same kind of widespread acceptance among businesses and individuals that we saw with full-size websites. We’ve reached the age of smartphones and tablets, the web is no longer confined to a desktop but is with us everywhere we go and accessed daily by an almost innumerable array of devices.

There’s a massive trend in design right now to not only consider mobile in the design mix, but to keep it front and center in our minds as we develop creative for any given project.

Responsive web design has recently given us an amazingly flexible way to create sites that instantly adapt to look custom-tailored to specific screen and browser window sizes. It’s currently the industry’s best and most appropriate answer to the dilemma of the duality of mobile and desktop computing. Unfortunately, not everyone has the budget or skill set for implementing such a solution.

The Necessity of Turnkey Websites

Though professional web designers are currently embracing mobile-centric design in an unprecedented manner, there is still another portion of the web that is just now really starting to dive into the mobile arena: turnkey, template-based websites.

Serious professional web designers need not scoff, there is a legitimate and burgeoning need for normal everyday people to create websites without spending thousands of dollars to do it. The web shouldn’t only be a place for those with multi-thousand dollar budgets to have a presence, it’s something everyone should have the freedom to enjoy and be a part of.

All kinds of users from every profession have flocked to products that allow them to have their own little corner of the web and will continue to do so. Professional designers shouldn’t be threatened in the least by this trend as it represents a significantly different audience that the one they are gunning for.

Make Your Own Mobile Site

The turnkey web design industry has been around for a long time with options like Homestead dating all the way back to 1996!

In the past few years we’ve started to see this industry turn towards the ever growing market of the mobile web. Tons of different options are popping up that promise a quick, easy and often free way to make your own mobile site. Each of these services has its own method, templates, etc. for helping you get the site you want. Let’s grab one and see how easy it is to build a good looking site with zero design experience.

WixMobile

One recent and interesting entrant into this mix is WixMobile. You’re probably already familiar with Wix, which helps you create free Flash-based websites. However, with iOS leading the mobile world, Flash isn’t a serious possibility for mobile sites.

Fortunately, for mobile sites, Wix dishes out pages that look perfect on an iPhone, iPad, and most other popular smartphone operating systems such as Andriod and Blackberry (Version 6 or higher). Just about anyone can build a Wix site completely free and it only takes four steps.

Step 1: Choose a Template

As soon as I opened up the WixMobile interface, I was struck by how simple it was, in a good way mind you. These types of apps tend to be quite cluttered and are frankly a mess of usability. This however was very straightforward.

Notice the big iPhone on the right. This is a fully-interactive live preview of your site that updates instantly with every change that you make. Clicking a link on the phone is just like tapping it in real life, the page updates and proceeds to the next screen.

The first thing you’re told to do is choose a template. There are currently 17 different styles to choose from, which range from super minimal to quite colorful. I used the word “styles” because there’s really only one overall layout and structure with various different aesthetic options to choose from. Here’s a look at a few:

Step 2: Enter Site Title

This step is easy enough, all you have to do is enter the title for your site and choose an overall category that the site fits into from options like Photography (what Wix is known for), eCommerce, etc.

Step 3: Edit Pages

Once you’ve got your template squared away, it’s time to actually plan out and implement all your content. This is the most time intensive part of the whole process and is quite dependent on whether or not you really know what you want.

By default, your site is pre-populated with several pages but you can add in new ones if you want. There are eight different page types to choose from, each with its own layout: gallery, about, services, events, collection, restaurant, contact and network.

Once you choose a page type, your template on the right updates to show the layout and you use the area in the center to start filling in and uploading your own custom content. It really couldn’t be any easier.

Once you’re done entering your content, you can customize your site even further with the “Appearance” settings. Here you can manipulate your color scheme and even change the background image. As a designer, I particularly like the option to upload a custom background, which affords me a lot more freedom over that the site will look like.

Step 4: Publish

After that, you simply hit the publish button and your site will be pushed live to the web! At this point you’re given a link that you can share with anyone.

Pricing

Most of the free site building services use “freemium” business plans so while it’s completely free to sign up and use the service, there are various perks that you can only receive by subscribing to one of the premium plans. These include the removal of ads, custom domains, Google Analytics, and more. Click the chart below to get a closer look at the available plans.

Conclusion

To sum up, getting your own basic mobile site up and running is an intimidating task. Fortunately though with services like WixMobile the task is neither difficult nor expensive.

Leave a comment below and let us know if you’ve tried any of these mobile turnkey web template services and what thought of them!

We’d like to make it clear that this is a sponsored review. Our writers are always encouraged to give unbiased opinions.

We’re going to take a quick look at the design and layout of this new online service, and explain what works well and what we think could have been done better.

Email

This section of the service has done a great job of emulating a desktop application. The existing .Mac webmail application was already excellent, so porting this across has not changed a great deal. Design features which stand out include:

• The use of a lighter font to separate the subject and following message content
• Adding a new email indicator to the top toolbar, and the page title, to show your unread messages whilst using other applications

It is interesting to point out the lack of branding running through the site – nowhere is the ‘MobileMe’ logo featured, and the user is free to use the service without being confronted with too much Apple-centric branding. This is a distinct step away from Microsoft or Google online applications, which both use branding extensively.

Photos / Gallery

There are a plethora of modern AJAX galleries online, all with their own pros and cons. Apple’s now integrates with the iPhone, iPhoto and your Mac, along with offering different viewing methods.

The addition of reflections to the photos looks typically Apple, but seems to make reading the caption underneath more difficult. It raises the eternal dilemma – at what stage do superfluous effects become more of a hinderance to the user than a positive addition. That said, there are several design elements which are notably good:

• The permanent share-able URL in the top right makes showing others your photos very simple
• The simple design of the album settings popup
• The ability to resize all photos at once (no mean feat to achieve whilst keeping load times down)

Considering the lack of any Flash, the gallery pages do a great job of showing content in a dynamic and appealing way. The technologies used are nothing new, but have been used to very good effect.

Calendar

The previous online calendar on .Mac was relatively poorly designed, with little to no interactivity and various restrictions. The new version offers not only a much more accessible and practical design, but also a variety of new features.

We particularly like the dragging and dropping of calendar appointments which snap to place in the grid structure of the page as they are moved. Features such as this illustrate how JavaScript can really allow online applications to feel as natural and robust as desktop counterparts. Other aspects which stand out are:

• Transparency in event backgrounds allow you to still see time intervals
• Excellent use of subtle colours in the small calendar in the lower left to make it immediately obvious what day it is, which day you’re looking at and where the month begins and ends
• Slightly larger line spacing between events in the month view (making the online calendar actually easier to read and scan than the desktop version)

One inconsistency found here is the difference in design of the ‘settings’ screen when compared to the equivalent in the gallery section. It would have made sense to standardize this across all the various online applications. However, on the whole we think that the design of the online calendar is actually better than the desktop version, and hopefully some of the interface features (increased line spacing, less rounded corners etc) will be brought to the desktop version in a future update.

iDisk

The use of JavaScript and AJAX provides, for the first time, a practical interface for managing files and folders. Flipping through directories is seamless, as is dragging and dropping files as the page does not need to be reloaded for changes to take place.

The pink/purple icon for the iDisk is, to be frank, awful. The contrast between the two colours clashes and could certainly have been designed better. I’m not sure why a departure from previous aluminum drive icons, or the iDisk globe, was needed – either of these would have been more aesthetically pleasing.

However, the layout and view options look good and files/folders are clearly defined. There isn’t a great deal to say in relation to this section – it’s straightforward and does what it says on the tin.

Lessons to take away

• Branding isn’t always essential – put the user interface first and offer a simple service
• Be careful not to use visual effects when they come at the detriment of user experience and accessibility
• Icon design is not easy, but avoiding colours such as bright pink is generally a good idea!
• It is certainly possible to create online applications which look, feel and respond in a similar – if not better – way to desktop counterparts
• Pay attention to line spacing, as it can make text much easier to read

Do you have any other comments and opinions on this new service? Let us know below!