Picture of the Week: Mobile Interface Design

Image Courtesy of tobyonline from WebDev-il

This picture is pretty self-explanatory.  Web design in general is more about marketing now days.  When the Internet was born, all webmasters needed to do was display information.  Later, web designers wanted to see how far they could go with the designs and the Internet became more like an abstract canvas for artists.

Today the most important element is the user experience.  If you cannot get your viewer hooked, then you are just wasting money and your time designing it.

There are certain 'standards' that users have come to expect when they visit a website.  It is the job of the designer to meet those needs and then go beyond.  Number eight in the image above, in my opinion, is the most important.

This week check out Mobile Web Mastery: 25 Tips on Designing for Mobile Devices and 5 Pillars of Successful Mobile Design.

Mobile Design Tips

Creating a mobile website can be intimidating to many people. Don’t stress, you’re not alone! There are many ways that you can create mobile websites. Success means customers can access your mobile site and buy more from your business.

Here are 5 tips to design a mobile website that delivers customer engagement which is the pathway to more business.

Image courtesy of g! blog

1. Test Navigation

Since visitors to your mobile are in a mode where ‘speed matters’, you’ll want to keep in mind how easy it is to navigate to get the information they really need. Most important to a mobile viewer: How can they reach your business. That means easy to find click to call and directions to your business. Before publishing your site to the web, check to make sure all of your links work and that the user does not have to scroll aimlessly through your site to find important information. Having straightforward and compact menus will help to make the experience of visitors more satisfactory.

Mobile viewers are a bit impatient. The more the visitor has to scroll, the more time it gives them to lose interest or simply get annoyed with having to do more work than they intended.

2. Color Choice – Keep It Simple and Easy To Read

In most cases with mobile websites, it is safer to use a simple layout and color theme. An even safer bet is to use the preset templates MoFuse provides to get an idea of what works. A light font color on a dark background or a dark font color on a light background seems to be the formula that most websites use. Colors should not distract the user from content. In other words, a visitor who is trying to learn about an organization should not be mesmerized by the beautiful shade of magenta chosen for the font color. More importantly the user should not have to strain their eyes because of conflicting colors. Remember, people will be looking at your site at the beach in the sunshine and you’ll want to make sure people can see what is on the site.

3. Readable Font Size

The screens on mobile devices have gotten larger over the years, but it is essential that the text on your mobile site is easy to read. As mentioned earlier in this post, mobile device users are usually on the move and want what they are looking for almost immediately. Once you have chosen the right colors for your site, now it is important to make sure the font size is comfortable to read. The screens on these mobile devices have gotten bigger, but some are still small enough to be annoying to read on. MoFuse will resize the mobile site based on the handset, however you’ll want to make sure the font size is overall – very easy to read on mobile.

4. Connect Social Media

Lets face it, we live in a world of Facebook addicts and Tweeting fiends. Giving your visitors the option to share something from your site to their social media websites gives your organization additional publicity. Linking your mobile site to social platforms even helps your search rankings! Think about it from both directions. Post your mobile site URL to your Facebook, Google+, LinkedIn and twitter feeds. Pin an image of your mobile site to your Pinterest account. Then make sure you have social buttons available on your mobile site so your viewers can share and ‘like’ your mobile site. This allows for people to share information from your mobile site on their timelines and Twitter Feeds.

5. Think About Site Purpose First

This may sound obvious and every website has a different purpose. Important information should always be towards the top half of your mobile site. Since each site has a different purpose, the decision on what information is most important varies for each business. Having contact information easily accessible in the top portion of the site may be beneficial in creating sales either online or on location. What are the needs of your targeted audience? Do they need to physically come to your business to buy a tasty burrito? Do they need to contact your business to ask about a last minute Father’s Day gift they want to purchase? What each website designer chooses as the most important information varies, but allowing visitors to contact your organization and find your location can help in generating sales.

I found most of these tips from inspiring blogs like Sitepoint, Web Marketing Today, and These Days Labs.

Mobile Moment Monday: Àlex De Fluvià

Image created by Charles Williams, 

Screenshots of alexdefluvia.com

One thing I like is clean, innovative and original designs.  With responsive designs becoming the norm, instead of just being a "new" idea, every Monday I am going to start critiquing and presenting some websites that deserve a little recognition for their thoughtful design principles.

Today, I would like to introduce alexdefluvia.com. Àlex de Fluvià is a painter from Barcelona that is recognized around the globe.  His paintings are much like graffiti on canvas, much of which represents social and political resistance.

What I like about his website is the simplicity behind it.  The website is basically a portfolio for his paintings.  There is a link for news stories involving Fluvià's paintings, along with a link to a short biography. Everything else about this website is visual. The homepage consists of a header, some links, and a revolving background slideshow.  Once you click on one of the links however, that is when you can truly appreciate this website. Most of the background images are in black and white, unless it is displaying one of his paintings.  Once you click on the "paintings" link, then it gives you a nice symmetrical boxed visual menu, sorted by year, to view Fluvià's paintings.  The black and white background makes these image links pop out of the page.  His "works on paper" link follows the same format.

What is  special about this website is the responsive design.  Once you start adjusting the size of your browser on a regular desktop, you can see how the image links adjust their size and the main links switch to the bottom of the page.  All divs, images and links adjust accordingly.  This allows for one design for all screen sizes, so viewers are not redirected to a "mobile version" of his website, but you get a uniform experience no matter what device you are using. The only thing that holds this website back is its obtrusive "malware" warning that appears when trying to view this website through Google Chrome.  The code that allows the revolving background images comes up as a trojan horse warning, which will keep people from viewing his page.  While I am aware that the code is harmless, most people brought to his website probably will not.

I found this website via the article, 10 Great Examples of Responsive Design from Around the World, hosted on Econsultancy - Digital Marketing Excellence. Please check out Àlex De Fluvià website, and some of the other examples on the Econsultancy article for inspiration. For more information on responsive design, check out Wikipedia's article for a thorough explaination.

I will be posting a new blog each Monday to review some of the better (or worse) responsive designs on the web.  I hope these posts will help inspire other new web designers out there, and if you would like to post your own examples of good (or bad) responsive designs, feel free in the comments section.

Picture of the Week : Change

Image courtesy of Clip Art Lab

Many web designers and website owners know that the Internet is changing.  Everyone has seen this with the explosion of mobile media. Everybody wants an app, or a mobile version of a website. About 67% of Internet users in 2013 admit that they do most of their Internet browsing on their mobile devices.

But what does this mean for those website owners that already have their websites established?  Plain and simple: It's time to upgrade.  Just like maintaining and buying new parts for your car, you have to maintain and make changes to your websites.  Content gets outdated, certain technologies get outdated, and new technologies require those businesses that have a website to upgrade.  Mobile technology has forced that upon us.

If you have not already looked into the benefits of making your website mobile, Vitamin Talent's infographic  and Social Media Today's infographic both are good easy to read visual examples of why mobile design is so important today.

Not only has it become a requirement to develop mobile versions of existing websites, but experts are recommending that if you have not already established a website for you business, you should consider developing the mobile version first.  Most designers nowadays have actually closed the gap on having a desktop version of a website and mobile version of a website by developing websites that are considered responsive.

What is your opinion?  Leave me a comment and tell me what you think.

About This Blog

Image Courtesy of Responsive Design

I am a web designer.  At least I want to be. Since I am always following new design techniques on the web I decided to start a blog about my findings and why I think they are important.

Even though I have been creating graphics and websites as a hobby for years, I still consider myself a "new-comer" to the web design scene. I have developed a couple websites, from nothing to something, but I have not yet done enough websites that I could call myself a "professional."

But that is my goal.  To become a professional.  I have been working with HTML and CSS for over six years.  I also have a grasp on simple JavaScript, working on JQuery, PHP, and MySQL.  My skills have all been self-taught.  I want to add "web programmer" to my occupational list.

What I have noticed over time is that standards, techniques, and technology change quickly, particularly those changes revolving around the Internet. Sometimes it is overwhelming to keep up on all those changes, especially if you are only a hobbiest like myself.

The cause of many of these new changes in web design is due to the rise of mobile technologies.  HTML5 and CSS3 where huge upgrades to the World Wide Web, upgrades that took years to happen.  The fact that I am learning all these new techniques and skills regarding different forms of media during this important time of change in the way user's view the Internet, makes me very fortunate.  For experienced designers that have been codding XHTML and CSS for years, some of these changes will significantly change the future of their careers and many of them will have to re-educate themselves so they can learn more modern web development.

A good example of a responsive design can be found at Responsive Web Design. If you change the width of your browser window you can see how the text and images resize depending on how big your window is. So whether you just keep your browser window smaller on you desktop screen, or you view the website on your mobile device, the website will change to accommodate any resolution.

An example of a website that is geared towards mobile development, but does not have a mobile version of their website is XDA Developers.  I read posts on this website all the time, but they do not have a mobile version, only an app.  The app is definitely for mobile devices, but lacks the ability to search and sort through forums and posts like the website.  The app is actually pretty useless to me in my opinion.

I find myself researching these changes often on my own.  I spend hours, upon hours of my time searching and reading articles, journals, and other web resources.  My quest for knowledge has left me well informed in regards to these standards and tricks-of-the-trade.  

I have decided that I would bring this collection of knowledge to one place for anyone to use and benefit from.  Many other websites do this. But when it comes to changes in technology, the more resources pointing to the information and the more detailed reviews backing up that information, the better. The information must be found, sometimes explained in different ways, and collaborative reviews of such information also assist in making those changes better.  

If you are interested in web standards, webdesign, or changes to new technologies on the Internet, then please subscribe to my blog today.  Also feel free to post links to your favorite responsive designs in the comments.