Random

August 23rd 2010 // Random // Permalink

Intro to Web Design for Mobile Devices

It's been about a year since I started researching and working on web and app design for mobile devices. My first attempt at creating a mobile site was to create a mobile style sheet for already existing HTML markup. It was a "bumpy" experience, but the site worked, previewed well on mobile device simulators and worked as expected on iPhones/iPods. After doing some research and usability testing using "personas," I realized the site wasn't mobile optimized and therefore was never published. Instead, I created a site that uses mobile specific HTML/CSS and features mobile friendly content.

Mobile Environment

Let's say you are out of town and in a hurry walking from a meeting, looking for a place to eat. You are into healthy food so you have some specific search criteria. With a coffee in one hand and your mobile device in the other, you are constantly looking up to avoid obstacles, are limited to using single app at a time, and only have spotty Internet access.

In this case, mobile environment is very different from a desktop environment where you have a keyboard, mouse, generous screen real estate, a comfortable home/office, multiple browser windows and high speed Internet access. As such, simply applying different style sheets to your desktop website to make it mobile will create little value to your costumers. Not only would the site be hard to use, but it would also be painfully slow to load. When using a style sheet specific approach, you are showing and hiding content client-side, which means that all markup, images and other site resources are downloaded even if not displayed.

Instead, create a mobile strategy that begins with an understanding of the target audience, their mobile behavior, motivation to use your mobile site or app, and expected presentation and functionality based on their device.

In our example a perfect app or site would:

1. Have saved preference for food type
2. Monitor current location
3. Use some type of a mash between a content aggregator and map service to come up with desired restaurants
4. With one tap, provide the user with click-able phone numbers and direction links to near by restaurants

This doesn't mean that we can't have brochure style mobile sites that only use contact links or forms as a main call to action. The content should still be optimized for use in mobile environment.

Diving into web design for mobile

Whether you are designing for a desktop or mobile site, always start by following web standards and best practices.

Web standards

Standards are essentially specifications on how a language such as HTML, or CSS should work. The mobile standards are maintained by organizations such as W3C and Open Mobile Alliance (OMA). Their recommendation is to use XHTML Basic or XHTML-MP for structure and CSS Mobile Profile or Wireless CSS for presentation. Most mobile devices have a solid built in support for those standards.

To make it easier for web designers/developers those standards are derived from XHTML and CSS and therefore pretty easy to use.

• Comparison of XHTML Basic and XHTML-MP
• Comparison of CSS 2.1, CSS MP, WCSS and CSS Level 1

To validate your documents as XHTML-MP or XHTML Basic, you must include a proper Document Type Declaration, or DOCTYPE.

XHTML Basic DOCTYPE

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd" >

XHTML-MP DOCTYPE

< !DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd" >

Best practices

Best practices are techniques of applying and using web standards. W3C and OMA has put together documents with recommendations for delivering content to mobile devices. At the very least I recommend reading the section five of W3C recommendations titled "Best Practice Statements".

This section covers:

• Overall Behavior
• Navigation and Links
• Page Layout and Content
• Page Definition
• User Input

New technology

HTML5 and CSS3 are getting more popular for a reason. HTML5 is leaner, faster, more semantic and packed with some great new features that users can benefit from. For example, local storage will ensure they don't loose any data when offline and geolocation serves contextually/geographically relevant content to when they are on the go. If you are primeraly designing for webkit browsers, such as Safari Mobile, it's encouraged to use HTML5.

Don't skip a step

1. Start with the content strategy for mobile devices. Make sure to base it on your business and audience needs. Define what desktop content would work best for your audience in the mobile environment without creating a too big of a disconnect from the desktop version.
2. Create some layout sketches and define the basic user flow. In many cases it's faster to test and change sketches vs. digital wireframes.
3. Design the interface. Use styles for buttons, arrows, tabs and other UI elements that users are most familiar with. The goal is to make it simple and unmistakable (without thinking) for how each of the specific UI elements should work.
4. Code the site following one of the mobile web standards.
5. Test the site on emulators and actual devices. Often, emulators behave differently compared to the devices they emulate.

Example

Here is an example based on some assumptions for a mobile version of my blog.

Content

My mobile site audience would be fellow designers/developers that follow me on Twitter and business owners that would hire me for freelance work. Both of these groups most likely use devices such as iPhones, Droids and/or Blackberries.

To mobilize my blog I would format all content for better readability on those devices and feature "Work" and "Contact" info to showcase my portfolio and provide easy access to contact information.

Wireframe

This is a pretty simple wireframe. I only have two templates, one for article listings and one for the article. Each page has a clear defined header, navigation, content and footer. The footer features 'about' info and a contact form. The navigation functions as expected except the contact link takes you to the contact form in the footer.

Design

The design uses pretty standard set of styles for UI controls such as button, icons and links. The navigation, page titles and sections are clear and visible.

CSS

body {
    font: 62.5%/1.2em Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
}
h1 {
    font-size: 1.2em;
    line-height: normal;
    margin: 0px;
    padding: 5px 0px 5px 10px;
    background: #d8d5d5;
    font-weight: bold;
}
a {
    color: #205e8c;
    text-decoration: none;
}

/* LAYOUT
-----------------------------*/
#header  {
    color: green;
    border-bottom: 1px solid #9b9b9b;
    margin: 0;
    padding: 8px 7px 7px;
    background: #06121B url(images/title-background.jpg) repeat-x left top;
}
.logo {
    display: block;
    margin: 0px auto;
    height: 25px;
    width: 46px;
    border-style: none;
}
.contents {
    background: #FBFBFB url(images/content-bg.gif) repeat-x left top;
    padding: 0px;
    font-size: 1.2em;
    line-height: 1.6em;
    margin: 0px;
    clear: both;
}
#contactform , .section{
    padding-left: 10px;
    padding-right: 10px;
}

/* NAVIGATION
-----------------------------*/
#navigation {
    background: #f94c12;
    font-weight: normal;
    text-transform: uppercase;
    margin: 0px;
    padding: 0px;
    list-style: none;
    overflow: auto;
}
#navigation li {
    float: left;
    background: #f94c12;
    border-right: 1px solid #ccc;
}
#navigation a {
    color: #FFF;
    padding: 0px 9px;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 2.1em;
    margin: 0px;
}
#navigation .noborder{
    border-style: none;
}


/* LIST NAVIGATION
-----------------------------*/
.list-nav {
    list-style: none;
    margin: 0px;
    padding: 0px;
    background: #FFF;
}
.list-nav li {
    border-bottom: 1px solid #CCC;
    padding: 10px;
    background: url(images/arrow.gif) no-repeat right center;
}

/* FOOTER
-----------------------------*/
.footer  {
    background: #021018;
    color: #999;
    border-top: solid 1px green;
    margin: 10px 0 0;
    padding: 10px;
}
  
/* FORM
-----------------------------*/    
input, textarea {
    display: block;
    width: 90%;
    border: 1px solid #D8D5D5;
    padding: 2px;
}
#submit {
    color: #FFF;
    background: #F94C12;
    font-weight: bold;
    padding-top: 5px;
    padding-bottom: 5px;
}

HTML

 
    
    
    





    
Home 
    
Work 
    
Contact





    
Latest
        
    
    

    
Portfolio: CUNet Website

    
Portfolio: BOLD Nebraska Website

    
Portfolio: Lincoln Arts Council Website

    
Photoshop CS4 for the web (video tutorials)

    
    
    
About
    

    
Emir Plicanic co-owns and operates a small web design shop Asari, is a Senior Interactive Designer at Nelnet and enjoys teaching Dreamweaver to enthusiastic students at a local community college.
    
    
Contact
        
    
    

    

    Name:
    
    
    

    Email:
    
    
    

    Message:
    < textarea name="message" rows="8" id="message" class="textfield" cols="40"> < /textarea > 
    
    

    
    
    




    © Emir Plicanic. All rights reserved.

Live example

And here is the demo with valid XHTML Mobile Profile 1.0 and valid CSS 2.1.

March 6th 2010 // Random // Permalink

Oodles of Doodles Art Show

Ryan and Peter put together another great art show featuring  some really fun characters they developed for the show. Held at Screen Ink, visitors could pick from three different t-shirt designs and screen print them right there. I used my HF20 to take couple of shots. Here is the video. Enjoy!

 

February 12th 2010 // Random // Permalink

Planning for Successful Website Redesign

Website redesign takes a lot of time—designer and client time—and as such should be undertaken with a great deal of preparation and planning. Well prepared and planned for website redesign will reduce anxiety about budgets, time-lines and make it easier for designers/developers to execute it.

Planning	Execution
Why do a redesign? Who is involved? Technical requirements Design requirements Take inventory of the current site ROI metrics Competitor analysis Site map Wireframe Usability testing	Graphic design Content development Front-end development Back-end development Testing Launch

 

1. Why do a redesign?

The very first thing you want to do is ask your client why redesign. Simply because the website is "old and out of date", or  "we got new branding so we need a redesign" is not enough unless updating, and new branding will result in increased number of prospects and conversions.

So the two main goals for business website redesign should always be:

1. To get more prospects
2. To increase conversion rates

Getting more prospects involves:	Increasing conversion rates involves:
Creating unique content Optimizing pages for Search Engines Promoting website on social media (blogs, facebook, youtube, twitter etc.)	Design that evokes appropriate emotional response  and makes the user stay on the site Use of copy and graphics to motivate the user to take next steps Making sure the UI is intuitive enough for the user to take next steps

Have a discussion with your client about these goals and make sure the creative brief is written around them.

 

2. Who is involved?

Having the creative brief and knowing who is involved in the project will make budgeting, time-line and project management smooth and predictable process.

On the client side you may have:	The provider team may involve:
Multiple stake holders Board members In-house or freelance designers IT Legal	Account Managers Art Directors Copywriters Graphic Designers Web Designer Back-end Developers UI specialist SEO Specialists

As a freelancer you may wear many hats, but in an agency world the list of team members may be greater, so it is important to determine single point of contact on both the client's and the provider's side.

To provide your client with an estimates that will not come back and bite you, make sure everyone on the team is consulted about the time needed to execute the project. Even a simple spread-sheet like this can help you get started.

 

3. Technical requirements

To minimize cost, invest as much time as possible in gathering technical info and requirements. If you are not sure what question to ask, try to involve a developer in the discussion.

Questions to ask:

• Who is site/domain name owner?
• Where will the site be hosted?
• Who is the content owner?
• Are there needs for a CMS, and what are CMS functions?
• Who will work with the client to gather a detailed list of website requirements? 
• Is there a need for a separate mobile version of the site?
• What are the database requirements, if any?
• Will there be any down time? For how long?
• Is the content pulled from other sources?

4. Design Requirements

Design plays a big role in increasing conversion rates. Users react to the design before they read a single word, and if the design is poorly executed, they will question the credibility of the business and leave.

The execution will depend on wireframes, but before you get to that point, you'll need to answer some basic questions:

• Who is the audience?
• Are we using existing or new branding?
• Is Flash welcomed?
• Can stock photography be used or is photoshoot needed?

5. Take inventory of the current site

Don't remove valuable content, loose links, keywords or change good conversion tools without consulting an SEO and UI specialist. Take a snapshot of what's working on the site and make sure to include it in the new website. 

1. What is the most visited content?
2. Where are the links coming from?
3. What are the popular keywords that get current prospects?
4. How are your conversion forms performing?
5. Study current analytics to figure out how users are using your site right now.

6. ROI measures

Without measurable ROI your redesign efforts will be useless. A snapshot from the previous step can help in creating metrics.

Here are the right metrics to track:

• Online lead volume
• Organic search referral
• PPC volume
• Conversion rates on non-campaign traffic
• Conversion rates on campaign traffic
• Cost/conversion for campaign traffic

7. Conduct Competitor Analysis

It is important to know how your current site compares to others in the industry. Find out who those competitors are and how they manage information on their sites. But keep in mind that just because they are doing something a certain way, doesn't mean it is the right thing to do.

 

8. Create a site map

Based on the site's purpose, it's visitors and what the users are going to do on it, start working on how the information is going to be provided, accessed and presented. Using sticky notes and a whiteboard works really well when working on site maps in teams. You can also use a free service WriteMaps.com to create, collaborate and share site maps with clients.

 

9. Build the wireframes

When working on wireframes keep in mind that one of the main reasons the website is being redesigned is  to increase conversion rates. Make sure the wireframe depicts a UI that is intuitive enough for a prospect to become a customer.

Create wireframes for each section of the site:

• Home page
• Category page
• Detail page
• Conversion Tools/Page

• Home page wireframes
• Category page wireframes
• Detail page wireframes
• Conversion tools/page wireframes

Some great free tools for wirefaming:

• FireFox Pencil Extension
• MockingBird

10. Usability Testing

Remember that you are not an average website user. You design for and use web very differently compared to your website's audience. Having that in mind, arrange and conduct some basic wireframe testing to ensure the UI is understood by the intended audiance.

You can conduct some basic testing by arranging wireframes on a desk and asking participants to interact with them. Have them speak out loud what they are thinking as they are interacting with the UI.

You can find participants through friends, family or social media. I've done some basic testing by taking prototypes to local coffee house and asking people to help me out. It's amazing what kind of info you can gather for a cup of espresso.

Resources

For more details on website redesign I highly recommend following books:

• Don't Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition
• Web Design for ROI: Turning Browsers into Buyers & Prospects into Leads
• The Design of Everyday Things
• Web ReDesign 2.0: Workflow that Works (2nd Edition)

Do you like this or find it useful? Drop me a note or treat me to a double-espresso from my favorite coffee shop.

 

January 1st 2010 // Random // Permalink

You can never have enough helpers

Here is a peak at my home office and my loyal helper Merki showing me what keys to press.

Photo is courtesy of my wife Khara.

December 17th 2009 // Random // Permalink

Google Browser Size App: a new tool added to my toolbox

"Google Browser Size is a visualization of browser window sizes for people who visit Google. For example, the "90%" contour means that 90% of people visiting Google have their browser window open to at least this size or larger." Read full description here.

I am excited to use this tool as a part of design presentation. I just wish it had a heat-map option similar to 3M's Visual Attention Service, so my clients can not only see what's "above the fold", but also a heat map of what elements draw get most attention.

December 8th 2009 // Random // Permalink

Saab Change Perspective: Amazing Integration of Flash, Video and Photography

I just love the high-quality execution of this Flash website. It shows amazing integration of animation, video, photography and a really cool soundtrack. Kudos to  Lowe Brindfors & ACNE Digital for the design and development.

Here are some screen shots. Visit: http://changeperspective.saab.com/global/en/

Visit website: http://changeperspective.saab.com/global/en/

December 2nd 2009 // Random // Permalink

Wireframing with Pencil: a FireFox add-on review

My preferred way of creating web site wireframes is with a 0.7mm mechanical pencil and sketch template from 960.gs. But just recently I had to quickly create a wireframe that I can more efficiently update and share with the client.

I did some googling and found "Pencil" a free/open-source FireFox add-on for quick GUI prototyping. "Pencil" was not tested on Mac OS X, but it looked so simple and easy to use that I decided to give it a try.

Pencil's GUI is pretty intuitive and easy to figure out.

There is a nice set of shapes and objects to choose from

To add objects to the page you just drag and drop them from the "Shape Collection"

To change objects' properties (background color, border, text etc.) you can use contextual menus or toolbars

There is an extra sat of handles that control the rounded corners. I really liked how this worked.

Problem areas: at least on Mac OS X

Selecting multiple objects on the page for repositioning didn't work as expected. You can't just loop around a group of objects to select them. I had to ctrl+click each object I wanted to select.

This was a problem, because ctrl+click on a Mac = right-click on a PC.

Another problem was the PNG export. Heading 1 or Heading 2 formatted text was getting cut off, and the links did not have expected formatting.

I don't know if there are any other problems with "Pencil" on Mac OS X. Finding those two was enough for me to switch to Adobe Fireworks to complete the project I was working on. 

I'll keep watching "The Pencil Project" for improvements and support for Mac, as this lightweight, free and easy to use solution could save me lot of time developing web site prototypes and wireframes.

November 29th 2009 // Random // Permalink

FireFox 3.6 beta 4 introduces support for HTML 5 local file handeling

On November 26th, Mozilla released forth beta version of FireFox 3.6. One of the new features intoduced in this beta is support for the HTML5 local file handeling. This feature is made possible by File API added to the DOM in HTML5. It gives web apps the ability to access, select and handle local files.

File selection using HTML

HTML code to  select a single file is simple

To select multiple files, simply use the multiple  attribute on the input element:

When the user selects a file, the handleFiles() function gets called with a FileList object containing the File object representing the file selected by the user. In case of multi file select File object for each file the user selected.

File selection by drag and drop

The first step is to establish a drop zone.

var dropbox;

dropbox = document.getElementById("dropbox");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);

In most cases the dragenter and dragover code is pretty simple. They just stop propagation of the event and prevent the default action from occurring:

function dragenter(e) {
  e.stopPropagation();
  e.preventDefault();
}

function dragover(e) {
  e.stopPropagation();
  e.preventDefault();
}

The drop event does all the work.

function drop(e) {
  var dt = e.dataTransfer;
  var files = dt.files;

  handleFiles(files);
  e.stopPropagation();
  e.preventDefault();
}

Here, we retrieve the dataTransfer field from the event, then pull the file list out of it, passing that to handleFiles(). From this point on, handling the files is the same whether the user used the input element or drag and drop.

Getting information about selected files

Use simple for loop to retrieve individual file objects

function handleFiles(files) {
     for (var i = 0; i < files.length; i++) {
         var file = files[i];
          ..
     }
 ...
}

Attributes provided by the File object:

name

The file's name as a read-only string. This is just the file name, and does not include any path information.

size

The size of the file in bytes as a read-only 64-bit integer.

type

The MIME type of the file as a read-only string, or "" if the type couldn't be determined.

Visit mozilla developer center for more details on using files from web applications and to see an example of how to display thumbnail previews of images before uploading to the server.

November 13th 2009 // Random // Permalink

ActionScript 3 Personal Cheat Sheet

Every once in a while I get asked to do Flash animations, and I love it, as this adds veriaty to my workload. However, I always forget some basic ActionScript 3 code and have to turn to google to figure it out. So I am going to use this blog post as my personal cheet-sheet and add stuff to it as I figure it out.

ActionScript 3 click event

//Register click event on an object (movie, button etc)
mc_clip.addEventListener(MouseEvent.CLICK, clickHandler);
//Execute code
function clickHandler(evt:Object):void{
    //do something
}

ActionScript 3 pausing the main timeline

//stop the playhead from moving forward
this.stop();
//create Timer object
var timelinePause:Timer = new Timer(2000, 1);
//tell flash what to do after two seconds are up
timelinePause.addEventListener(TimerEvent.TIMER, timerHandler);
timelinePause.start();

//execute "what to do"/continue playing
function timerHandler(evt:Object):void{
   this.play();
}

ActionScript 3 load and read XML file

//load XML file
var xml:XML = new XML();
var loader:URLLoader = new URLLoader();
loader.load(new URLRequest("some_xml_file.xml"));
loader.addEventListener(Event.COMPLETE, function(evt:Event):void{
   xml = XML(evt.target.data);
}

To load specific elements of the XML file

//use array access operator []
xml.element_name[0];

To laod a specific attribute

//precede an attribute's name with @ symbol
xml.element_name[0].@attribute_name

To find out number of specific elements

//use XMLList method length()
xml.element_name.length();