Though all mobile websites are unique, one aspect which remains consistant across the entire mobile web is the importance of proper mobile web design. In a recent study conducted by Google, 61% of users are unlikely to return to a mobile site that they had trouble accessing from their phone. A poorly designed mobile website could be detrimental to click through and conversion rates.

Fortunately, you don’t have to be well versed in the latest CSS and HTML to give your mobile website the sleek and professional design that it needs. Take a look at these four handy design tips that anyone can easily apply to their mobile website.

1. Customize the Content for Mobile

A mobile website is a condensed, tiny, one column version of a desktop site. Tailoring your content to the needs of the mobile user could greatly benefit the user experience and lead to a higher conversion rate through your site. the typical mobile user is on the go and in search for the information they need, fast. Eliminating some of the content that’s on your mobile site, which may only be viewed by a desktop user, could prevent customer confusion.

If you’re not quite ready to nix entire pages, then change the page order on your navigation menu. Put the links and pages a mobile user will likely use the most towards to top of the home page. Rearranging the page order of your mobile site will help your users find the information they are looking for, while also preserving the likeness of both sites.

2. Reduce Multimedia

We know how much you like the embedded YouTube videos and photo albums on your website. We like them too. Unfortunately, when designing a mobile website, large amounts of multimedia should be significantly scaled down or completely eliminated. Mobile users have limited bandwidth and a slower connection to the internet than desktop users, however when browsing the internet on their smart phones, they still expect sites to load at a quick rate. High volumes of photos and videos can slow down the load time of your site which will turn users away. One to two images per page and one video is enough multimedia for your mobile website.

3. Negative Space is Good Space

Negative space, also known as white space, is a key to mobile website design. Incorporating negative space in your mobile site will give it a clean look and make it easier for the user to navigate through.

Some simple things you can do to add negative space are:

• Increase padding around important links and buttons.
• Remove multimedia elements like excessive amounts of photos and video to eliminate clutter.
• Add line breaks between large bodies of text.

Enhance the appearance of a mobile site’s negative space by keeping the background color of your site a light color and the text, a contrasting dark color.

4. Add Thumb-Friendly Elements

When designing your mobile site, consider following the general rule of thumb. Typically, mobile site browsers use four fingers to hold their phone while leaving their thumb free to scroll up and down on the screen. Turn important links on your mobile site into buttons to make it easer for site visitors to select them. For example, a phone number can be replaced with a click-to-call button and a link that returns the user to the home page can be replaced with a back home button.

Mobile Website Design Done Right

Take a look at these four examples of mobile websites which display excellent mobile website design.

Put Your Mobile Website Design Skills to the Test!

If you think your skills in designing and developing mobile websites are better than our examples, apply to join the DudaMobile Developer Network! Join now and be featured on Dudamobile.com, receive leads, and let us promote you to businesses who are in need of your services. Sign up through our website to be considered.

Email me if you have any questions at theresa(at)dudamobile(dot)com.

Like what you see? Add these new features to your existing mobile website or create a new one here!

1. Social Media Share Buttons

We’ve revamped our social media share buttons! Clicking on the new Share Widget takes your mobile website visitors to a popup window where they can share your mobile website via Facebook, Twitter, LinkedIn or Email.

2. New Users: Create and Login to your DudaMobile account with Facebook

We’ve enabled a feature which allows new users to create a DudaMobile account by logging in with a Facebook account. On the Sign Up page, you can instantly create your account by clicking the Facebook Connect button above the text fields. As long as you’re logged into Facebook, you can easily login to your DudaMobile account. We added this convenient feature for all social media junkies who enjoy the ease of connecting everything to their Facebook account.

3. Attractive New Templates

Check out the newest additions to the template gallery! New themes include: legal, restaurant, plumber, taxi and construction. This is just a sneak peak of some of the awesome new templates!

4. Snazzy WordPress-Friendly Templates

We’ve added new templates that are specifically designed to compliment your WordPress blog. There are ten great designs to choose from, and many more to come. Don’t forget, all templates are fully customizable!

5. Blog Swipe Feature

Swipe between each blog post on your mobile optimized WordPress or Blogspot blog. After your blog is published and redirected, easily view each individual post with the swipe of a finger! Here’s how it works…

Know of ways we can improve even more?

We love hearing customer feedback about our tool (and gladly take it all into consideration!). Send me an email at theresa(at)dudamobile(dot)com if you have a compliment, opinion, complaint or just want to say “Hi”.

Why use a template for your mobile website?

A mobile template gives you a clean look for your site so that it appears just as professional on the phone as it does on the computer. Our mobile web templates take existing site content and transform it so that it fits onto a mobile device. After converting your website and selecting a mobile website template, your mobile site will contain the same content but look even better than your regular website when viewed on your phone. The mobile website will contain all of the same information, but it will be laid out in a way that both looks attractive and works well on a mobile device.

With DudaMobile, you will be able to fully customize your mobile web template so that it matches the colors and theme of your regular website.

No generic templates here!

The sound of the word “template” often gives the notion of being unoriginal and non-creative. We consider our templates as firm ground for you to build off from. After selecting a template on the “Select a Template” page, you have the options to change the colors of the background, text, link color and navigation icon menu.

The technology of mobile devices is constantly changing. Mobile templates contain coding language that is recognized across all mobile devices. Our templates offer a quick solution to this constant need for innovation and adaptability that does not require significant re-coding or redesign.

Wondering Which mobile templates We like?

We love our mobile website templates. Here are some of our favorites…

For Mobile Website of the Week this week, we decided to choose a site that displayed superb creativity, personality and customization. The Iconic Brand5 mobile website did just that! Congratulations!

What did we love about Iconic Brand5’s mobile website?

We were fascinated by the detailed customization this site had. Morrison, from Iconic Brand5 said, “my website is about design, simplicity, and connection”. From social media buttons to a customized background image, he made sure to pack his mobile website with all the fancy bells and whistles DudaMobile has to offer.

Some really cool features

“My Social Media control panel makes this amazing.  We are the first company in the nation, maybe the world to create control panels.”

So Wait, How’d they make this site?

When making his mobile website, Morrison found that, “the best feature was the conversion at the very beginning. It was effortless which made the user experience delightful.”

After the initial conversion small details were trimmed out. “I feel that things like dates on the blog and some images weren’t that important”. These small edits made up about 30% of deleted content when making the regular to mobile switch.

“I went through the basic editor first and then through the advanced editor. I found they both offer different things, but less mistakes were made when going through the basic editor first.”

Morrison’s goal of his mobile website is to highlight the services offered by Iconic Brand5, as well as show his users the varieties of website design he was capable of doing. “I design my own stuff which makes me a huge customizer. I am still designing my site as we speak, so my job is never through.”

What does Iconic Brand5 even do?

Iconic Brand5 is a multi-media business that helps small American businesses. Their services include:

Photography – Photojournalism, documentaries and event photography.

Graphic Design – Logos, buttons and web element design.

Website Design – Custom designed WordPress sites, Facebook pages, Twitter profiles, YouTube channels, LinkedIn profiles, Gmail themes, and mobile websites.

Photo Effects – 3D and flip lenticular printing.

Their office is located in Florida. Call Morrison at (561) 350-6961.

Catch Iconic Brand5 on the web

Add them to your circle on Google+

Like them on Facebook

Follow @staffatico on Twitter

Connect with them on LinkedIn

They make great videos, so add them to your favorites on Youtube

They also take really good photos which are posted on Flickr

Want your website to be featured in a blog like Morrison’s was?

Email me at theresa@dudamobile.com, tweet me at @dudamobile or contact me on facebook if you think your site rocks.

Has your mobile site been published? If your site wasn’t published, we didn’t see it (and neither did your customers). Check our Support Center for instruction on how to publish your mobile website!

#1: One click access to contacting your business

Unlike a regular website, visitors to your mobile website are much more likely to contact your business via phone. According to recent data from Google and Ipsos OTX MediaCT, 61% of consumers who visit a mobile site from a search engine will call the businesses from their mobile phone. Make it easy for your site visitors by displaying your business phone number as a Click-to-Call button at the top of your mobile site home page.  When clicked on, customers will instantly connect with your business.

#2: Map & Directions

Similar to the Click-to-Call button, a very high percentage of visitors to your mobile site are interested in locating your business RIGHT NOW. According to the latest data by the International Data Corporation (IDC), 62% of consumers browsing a business mobile website are searching for the store location and directions. Make sure to add a simple Map & Directions button to your site that, when clicked on, opens up your address in built-in map application on the phone, enabling the user to quickly find directions to your location.

#3: Optimize your mobile website design

Choose or design a mobile site template that aligns with the theme of your desktop website. There is no such thing as a universal template, and no single mobile site template is appropriate for every webpage. Be creative with the template you choose and don’t be afraid to make simple tweaks to optimize your mobile website presence.

#4: Make your site legible

Mobile phones have a small screen, a slower connection to the internet and are incompatible with different types of multi-media formats like Flash. So keep your mobile website content simple and easy to read. Enlarge links and buttons to make it easy for users to select them. Delete unnecessary images and text. And make your site easy to read.

#5: Keep your mobile site in sync with your desktop site

When you update your desktop website with the latest news and information about your business, make sure to also update your mobile site as well. This includes business information, your location, store hours, contact phone number and so on. With Dudamobile, we do this for you automatically so you don’t need to worry about it.

If you keep in mind what your customers want when browsing your mobile website, you can provide them with an amazing mobile experience that will quickly lead to more calls, visits and sales.

A mobile browser is an automated machine that only knows how to squeeze a websites into a small mobile screen. A good mobile solution will have to include some degree of configuration to select and prioritize the content. It requires someone who is intimately involved with the website and understands the business and can make such decisions. There is a lot of clutter in regular websites, usually created by large banners, jumping ads and promotions that just add to the noise and confusion in a mobile device.  Only a human can make the decision what content is relevant and should be “mobilized” and what not.

Now some people might say that the iPhone provides exceptional user experience. I agree that it is indeed an improvement compared to other mobile browsers, but it is far from being optimal. I like to compare the iPhone browsing experience to reading a newspaper in a dark room with a flash light. At any moment you can only see a limited part of the page, usually caused by the need to zoom-in and zoom-out in order to read the text. You wouldn’t agree to read your newspaper like that, so why accept it on your mobile device?

This is something that many businesses have understood and for the reason they have built dedicated iPhone websites (e.g. m.ebay.com, m.nbc.com, mobile.fandango.com) that are very different from their regular internet website. In addition business would like to add mobile specific features like mobile ads, location based services that use GPS functionality, click-to-call etc. All these features are not available on the PC website.

Creating an Optimized Site for Mobile

Creating a mobile optimized site can be a daunting task. You need to think about supporting multiple devices and multiple browsers. Then you get to the topic of maintenance, how do you keep your regular website and your mobile site in sync? And the biggest question is how do you achieve all this without getting into a heavy investment. This is exactly the pain we identified and solved at DudaMobile. Using our platform we are able to build mobile website that are based on your existing website. What that means is that you only have to maintain your regular website. Any changes you make will automatically be propagated into your mobile site. How do we do that? Well that’s the uniqueness of the technology we have developed. The good thing is that you don’t need to care about that. We take care of building, hosting, maintaining and supporting your mobile site. All you need to do is just promote it.