Class 10

Topics: Review Styling Menus, What are current best practices?, Mobile Web Critiques
In-class: Working with team: Determining Goals for your site.
Assignment: Create a “sketch” of an interface for a mobile app for your final project. Think about how the website is used and ways in which you can create a “simple, compelling mobile web experiences that satisfies a real need.”  You may use this iPhone GUI (Graphical User Interface) PSD file if you would like to create the sketch in Photoshop. Post your thoughts and decision-making process for this exercise on your WP blog. Bring your sketches to our next class.

Deliverables due for next week: Defining Project & Audience (All)– use the Client Survey, Content Outline (Content Developer) Sitemap (Information Architect)

Reading for next week:
Discuss Slicing and Optimizing, Creating HTML templates and pages, Implementing Light Scripting, Creating and populating page, Web Standards, Integrating Backend Development (pages 157-166) from Web ReDesign 2.0

Questions to discuss next week:
What is a HTML template and how is it created?
How do the authors define “light scripting?”
What is the importance of “freezing content” during the page populating stage?

Reading for this week:
Discuss Assessing Project Status, Establishing Guidelines, Knowing your client before you code, Setting File Structure (pages 145-156) from Web ReDesign 2.0

Questions to discuss:
What does the step of “Accessing Project Status” involve?
What is the purpose of the “Client Spec Sheet“?
What are the three file structure questions you need to answer before start to build your site.

Creating navigation using the list tag

I used the Centered List Navbar example from the Listamatic web site:
http://css.maxdesign.com.au/listamatic/horizontal16.htm

You can find the finished page here.

Below is the HTML for the nav container:

<div id="nav">

 <ul id="navlist">
 <li class="active">Home</li>
 <li><a href="flavors.html">Flavors</a></li>
 <li><a href="pricing.html">Pricing</a></li>
 <li><a href="specials.html">Specials</a></li>
 </ul>

</div>

Below is the CSS for the navigation bar from my demonstration. It’s slightly different from the code on the Listamatic site:

#nav {
 position: absolute;
 left: 0px;
 top: 158px;
 width: 750px;
 height: 30px;
}

#nav ul
{
 padding: .2em 0;
 margin: 0;
 list-style-type: none;
 background-color: #FCDEDD;
 color: #FFF;
 width: 100%;
 font: normal 90% arial, helvetica, sans-serif;
 text-align: center;
}

li.active {
 color: #F3766E;
 font-weight: bold;
 padding: .2em 1em;
 border-right: 1px solid #fff;
 border-left: 1px solid #fff;
}

li { display: inline; }

li a
{
 text-decoration: none;
 background-color: #FCDEDD;
 color: #562604;
 padding: .2em 1em;
 border-right: 1px solid #fff;
}

li a:hover
{
 background-color: #FDE5E4;
 color: #FFFFFF;
}
Final Project Assignment

Your final project presentations are Thursday, June 10. No late projects accepted.

The focus of this project is to create a portfolio quality web site that incorporates design, strategy and interactivity. Your web site design should have a strong design aesthetic that reflects a specific attitude and look and feel for the site. The site design should also reflect a strong technical sophistication. You are required to build a prototype of a mobile app or mobile web site for the the site. We will discuss this part in more detail during the next few classes.

You’ll work in teams on the final project. I have assigned each team member a lead role. The member who is the lead is responsible for meeting the deadline for this activity and also for this part of the presentation on the final day of class. This does not necessarily mean the lead person is responsible for doing all the work. For example, the technical lead is not responsible for building the entire site but he/she is responsible for assigning the work and meeting deadlines. All team members must “pull their weight” and not depend on others to complete the final project. On the final day of class, your team members will be assessing your work and role as a team member, so I will know if someone does not participate in the final project and this will be reflected in your final grade.

The purpose of working in teams is to give you the experience of working on a project as part of a group. Few web sites are built as solo projects— most web sites are build by a team of players who are experts in their fields.

The final project web site specifications are:

  • 10-12 complete pages (and placeholder pages for other pages when applicable).
  • Project must successfully meet the goals for the site outlined for each class web site. (See notes in Class Final Projects section)
  • A clear navigation system.
  • A successful sub navigation system.
  • A strong visual design.
  • A theme and visual concept that carries through the site.
  • A design that works well on 1024×728 displays (i.e. navigation & primary content inside 990×560).
  • You must use some html text in the site.
  • You must use an external CSS file.
  • Use of royalty free images.
  • A mobile app or mobile website prototype.
  • Create a Jing (.swf) or Snapz Pro (.mov) demo of your site (10 mins maximum).
  • Completion of a site map.
  • Posting of all project documentation to your “studio” blog.

You’ll notice I changed the name of the projects due to the departmental policies. Also, note you need to be careful to use original text and imagery as outlined below.

You must make use of royalty free images for your project. You can NOT use images from other websites. You may use your own original artwork and/or photography if you prefer. Below are some suggestions on where to find images, but you’re welcome to use your own sources.

Possible sources for images:

Our Class Final Projects

  • A requirement for Graphic Design Department projects is to either have approval for corporate projects, or to use fictitious companies. Therefore I have changed the names of the projects. (I know some are very thinly disguised!)
  • Remember for class projects, the goal of the project is to serve as a learning experience for the class, it’s not about creating a final site for personal use.
Section 2211  2:00 pm-5:05pm
City of Lost Angels (Inspired by City of Los Angeles )

Goals for site:

  • Develop messaging so visitor understands immediately what they need to know to start a business
  • Create a sense of community so visitors can communicate with others
  • Develop a design system that could be used by the other city department web sites
  • Develop interactions and features for mobile devices

Team members:
Elizabeth Eadie: Project Manager/Information Architecture (IA) Lead
Ryan Frame: Design Lead
You Shin: Technical Lead
Shared: Content Development

Berba Vintage Clothing

Goals for site:

  • Create shopping cart feature in a new and interesting way
  • Increase membership to the site
  • Create a sense of community so visitors can communicate with others
  • Develop interactions and features for mobile devices

Team members:
Kaci Potter: Project Manager/Design Lead
Brian Price: Technical Lead
Ivan Stankov: Information Architecture (IA) Lead
Shared: Content Development

Bonster  (inspired by Monster)

Goals for site:

  • Create a home page that clearly illustrates a process for searching for a job
  • Expand community of job seekers
  • Create new types of resource materials for job seekers
  • Develop interactions and features for mobile devices

Team members:
Medich Dushan: Project Manager/Design Lead
Max Macapagal: Technical Lead
Katie:Peraudeau: Information Architecture (IA) Lead
Shared: Content Development

——-

Section 4268  6:30 pm-9:35pm
BluePeace (inspired by GreenPeace)

Goals for site:

  • Create user-experience that feels like I have access to issues of interest to me no matter where I am
  • Expand community of supporters
  • Create a sense of community so visitors can communicate with others
  • Develop interactions and features for mobile devices

Team members:
Kelly Graziano: Project Manager/Technical Lead
Sun Lee: Information Architecture (IA) Lead
Maria Studnicka: Design Lead
Shared: Content Development

Indie & Auteurs (inspired by Auteurs)

Goals for site:

  • Create user-experience that feels like a resource for all things related to film
  • Expand community of film lovers
  • Redesign “member” features page
  • Develop interactions and features for mobile devices

Team members:
Ed Woo: Project Manager/Technical Lead
Mehrdad Haghighi: Design Lead
Judy Lue: Information Architecture (IA) Lead
Shared: Content Development

Noise Joys  (inspired by Noise Toys)

Goals for site:

  • Expand community of fans
  • Feature product demo prominently on site
  • Create a sense of community so visitors can communicate with others
  • Develop interactions and features for mobile devices

Team members:
Priya Sheth: Project Manager/Information Architecture (IA) Lead
Foad Farid: Technical Lead
Christine Niebuhr: Design Lead
Shared : Content Development

Electric Vehicles USA

Goals for site:

  • Develop messaging so visitor understands immediately what is important to know about EVs
  • Expand community of supporters
  • Create a sense of community so visitors can communicate with others
  • Develop interactions and features for mobile devices

Team members:
Minna Suh: Project Manager/Information Architecture (IA) Lead
Cesar Chavez: Design Lead
Ken Gross: Technical Lead
Shared: Content Development

Cooking with Miguel

Goals for site:

  • Expand community of cooks
  • Feature cooking demos prominently on site
  • Redesign member features page
  • Develop interactions and features for mobile devices

Team members:
Felicia Caldwell-Lynch: Project Manager/Technical Lead
Kathleen Ford: Design Lead
Sun Paek: Information Architecture (IA) Lead
Shared: Content Development

Assignment for next week: Team meetings

Break into assigned teams. Select a name for your “studio.” You will need to create a WordPress blog where everyone can post entries regarding the design process for the final project.

1) Select a “studio” name. Set up WordPress site.
2) Exchange email addresses.
3) Discuss deliverables for next week and who will complete what document.
4) Talk about design of mobile web for final project.

Do research on mobile apps. A good place to start is on the YouTube site:

Voice activated

Augmented Reality

Best and Worst Of The Mobile Web

[W]hat sells the mobile Web is not how it is similar to the desktop Web, but how it differs. “The mobile Web is a phenomenal platform to build and exploit applications. But until even we, the industry who build them, stop thinking of it as primarily “the Internet on your phone,”both users and clients will see it as little more than a poor man’s browser…

Gaddo F. Benedetti, “Mobile First, Web Second,” http://dev.mobi/node/156.

Read this for next week: Best and Worst Of The Mobile Web

The principles of great mobile websites:

  • You need to have one
  • Make sure it actually works
  • Solve a real problem
  • Maintain laser focus
  • Content is king…but in small bites
  • Simplify, but don’t over-simplify
  • Make your site findable
  • Make your site device-aware
  • Remember the user’s details
  • Break free from .com thinking
  • Put the mobile website first
  • Don’t be bound by templates
  • Test and learn

“ There are no real right or wrong answers to utilizing mobile. Testing and learning is key.”

Above material from mobiThinking. This article is © dotMobi 2009. All rights reserved.

Mobile Web site Critiques

Twitter: http://m.twitter.com/twitter
BBC: http://www.bbc.co.uk/mobile/index.html
ESPN: http://ESPN.mobi
YouTube: http://m.YouTube.com
The Weather Channel: http://weather.mobi

Mobile Apps

ESPN: http://espn.go.com/video/clip?id=4494557
Twitter Apps: http://vimeo.com/9326806

Challenges associated with the mobile web

The mobile web has always been confusing and difficult for many people to get used to developing for, due mainly to lots of over-hyped jargon and terms that the average web developer has never seen or needed to deal with. Things like content carriers, WAP and the deck, many of which aren’t really relevant to the subject area any more. When we create traditional HTML websites, we simply upload them to our server space with our Web-hosting provider and that’s it. It didn’t matter if the customer was coming from America, Europe, Asia or elsewhere, or if they were on a dial-up modem at home or a super-fast fiber optic connection at a University; all the infrastructure between your Web site and the customer’s desktop computers worked the same way every time.

This is not true when we are talking about mobile devices accessing the Web. In the world of mobile carriers, different companies use different hardware for their cell towers, they compress the data differently or not at all, and factors like signal strength and availability can vary a lot. This is before we even get to the capabilities of the software on the device itself!

While that sounds daunting, you shouldn’t let it scare you. As a web developer or designer, all you need to understand to create your Web site in a mobile friendly way is that there are some considerations you need to take into account. These limitations include styling, scripting and thorough testing on a variety of devices. Your existing skill-set for creating traditional web sites is much the same as for mobile web sites. The rest of this article will summarize all of these points to help give you a feel for the topic and address all of the areas to consider. Future mobile articles will give these areas a deeper treatment.

Mobile limitations

While creating a site that will work on mobile devices largely involves sticking to the same web standards and best practices as you need to use for desktop browser-compatible sites, you still need to consider the limitations imposed by such compact devices. While the mobile infrastructure is getting better and more devices are equipped with WiFi, there are still some issues. Hopefully, over time, the following points will become obsolete, but for the near future these are still critical considerations today, and will remain so for some time. You must realize that the capabilities of mobile devices differ greatly and that the top of the range smartphones, such as the iPhone, HTC Touch Diamond and Samsung Omnia (and other S60 and Windows Mobile-based phones), constitute only a small percentage world-wide of the overall Web-enabled phone population.

Screen size/resolution

For those of you too young to remember, there was a time when you would visit a Web site and they would have a small disclaimer along the lines of Best viewed in Netscape Navigator at 640×480. You couldn’t guarantee the higher resolutions we take for granted today. On mobile devices, screen resolutions still vary greatly, and this doesn’t look as if it will change any time soon.

When constructing a mobile version of your Web site, how can you be sure that your design will work across the different screen resolutions and dimensions? The simplest strategy is to keep your layout as simple and fluid as possible. The ultimate ideal is to keep your page contents all in a single column stacked on top of each other, so no matter how wide or skinny the screen resolution is, the information simply wraps. You will need to test how well your design works with and without CSS and JavaScript.

Using CSS media queries, JavaScript or the viewport meta tag, it is possible to send some CSS targeted specifically to mobile devices without any server-side coding. You will learn more about these later on in this series of articles.

Input mechanisms

Mobile devices have very different methods of input than desktop machines. When you are at work, your desktop machine probably has a full QWERTY keyboard, a multi-button mouse, possibly a number pad, etc. On a mobile device, you might only have a number pad. You can’t guarantee a full QWERTY keyboard or a pointing device. This makes data entry, even cycling through links, a different experience than when at a stationary desk.
If you have built your Web site using progressive enhancement, then its functionality should not depend on any of these advanced input devices, but should be accessible to everyone using just about any form of input device.

Processing power and available memory

Mobile devices generally have less memory than their desktop brethren. This creates limitations in the amount of processing they can handle, which limits implementations of JavaScript, Flash and other technologies. These tend to drain batteries, create a slower user-experience and increase the bandwidth – this last point can increase the cost to the user of downloading your web content if they are paying by the kilobyte, which many are. As we’ll see later, these processor limitations account for the mobile web’s evolution along the XML path rather than the HTML/SGML path.

Available fonts and colours

On your desktop computer, you can happily install all sorts of fonts and families, from serif to san-serif, from symbols to wingdings, but on mobile devices, you are not so privileged. Some devices have as few as one standard fixed-width font, and perhaps a bold or italic variant. This makes corporate branding a nightmare. Not to mention all your nicely designed navigation items in variable width fonts looking bad!
Along with limited fonts, some devices have a limited colour palette, although this is less of an issue now – most new phones come with thousands of colours, and monochrome phones are rare now.

Web standards support

Not all phones are equipped with web browsers that share the capabilities of today’s modern desktop browsers. Some have full support for the common Web Standards like HTML, CSS and JavaScript. Some only support a certain subset of these standards or use different standards entirely (see the next section for a discussion of WML, cHTML and XHTML-MP). Some support HTML, but not CSS or JavaScript. Other mobile browsers such as Opera Mini use a proxy system in which a server farm retrieves the requested web page, optimizes and reduces it in file size, then sends it to the browser for display.

The strategy here is to test, test, test, and make sure your Web sites degrade gracefully on lower-capability browsers.

Note: that you can test web sites on Opera Mini using the Opera Mini Simulator if you haven’t got a phone handy.

Above material from Introduction to the mobile web, Dev.Opera 23 June 2009



Comments

Sorry, but comments are currently closed.

About Author

jamie

Instructor for Graphic Design 67