SWEN1005: Mobile Web Programming,

INSTRUCTIONS

  1. We are going to create a mobile-first website for SWEN1005: Mobile Web Programming, this site will provide:

Information about the BSc. Software Engineering programme via a link to the website The course content for Mobile Web Programming

Links to course material (lecture notes, slides and

recordings) Links to lab assignments

The course assessment schedule

Recommended text and readings

Sample completed projects and labs

 

  1. As the user traverses your mobile website, they should be able to visit the BSc. Software Engineering programme website by clicking on the UWI logo at any time from any page.

 

  1. Use appropriate category names to allow the user to fully traverse the website, however, do not user any more than five categories.

 

  1. Employ an appropriate information architectural pattern and maintain consistency throughout your site. Advise the user when they are about to leave your site to visit external content. However, please keep external content to a bare minimum. For example, present the session recordings as YouTube embedded content.

 

  1. Maintain a consistent theme throughout your website.

 

  1. You may reuse content from the eLearning platform at your leisure.

 

 

  1. You should provide author information including copyright and date last updated and an

about the author page.

 

 

 

 

 

 

 

 

 

 

 

 

 

1

Requirements:

 

Mobile Information Architecture

Key points to remember about your design, you will want to create your content and pages with these points in mind, keep it:

Clear

Concise

Familiar

Responsive

Consistent

Attractive

Efficient

Forgiving

Simple

 

[9 marks]

 

Tips:

Keep categories to a minimum again the simpler things are, the better the UX on mobile. That doesn’t mean abandon useful data but do think about the fact that people get lost more often the farther they drill down for information. 5 levels is enough on the desktop, with mobile you almost certainly want to aim for

less.

Keep content and categories together no empty pages, no empty links. If a user clicks on a navigation item, it must deliver some relevant content too.

Keep links to a sensible number too don’t overwhelm the user with dozens of links. Ideally, keep the number of links displayed to fewer than 10.

Prioritize by popularity “deck placement is vital to controlling the simplicity of the experience. The more popular something is within the app or site; the more vital it is that you make it easy to get to.

However, this can have an impact on the success of new features or content; as it will be placed lower in the deck and become harder to find. You may need to strike a careful balance between the two.

Label navigation items clearly and concisely this applies to links as well as menu options; this is very important on phones with very small screens.

[5 marks]

 

Patterns to choose from:

 

Hierarchy

The hierarchy pattern is a standard site structure with an index page and a series of sub pages. If you are designing a responsive site you may be restricted to this, however introducing additional patterns could allow you to tailor the experience for mobile.

 

Hub & Spoke

A hub and spoke pattern gives you a central index from which users will navigate out. It’s the default pattern on Apple’s iPhone. Users can’t navigate between spokes but must return to the hub, instead. This has historically been used on desktop where a workflow is restricted (generally due to technical restrictions such as a form or purchasing process) however this is becoming more prevalent within the mobile landscape due to users being focused on one task, as well as the form factor of the device, making a global navigation more difficult to use.

 

Nested doll

The nested doll pattern leads users in a linear fashion to more detailed content. When users are in difficult conditions this is a quick and easy method of navigation. It also gives the user a strong sense of where they are in the structure of the content due to the perception of moving forward and then back.

 

Tabbed view

This is a pattern that regular app users will be familiar with. It’s a collection of sections tied together by a toolbar menu. This allows the user to quickly scan and understand the complete functionality of the app when it’s first opened.

 

 

2

Bento Box/Dashboard

The bento box or dashboard pattern brings more detailed content directly to the index screen by using components to display portions of related tools or content. This pattern is more suited to tablet than mobile due to its complexity. It can be really powerful as it allows the user to comprehend key information at a glance, but does heavil y rely on having a well-designed interface with information presented clearly.

 

[5 marks]

 

Mobile First Techniques

 

Mobile-First = Content-First

If your site is good on a mobile device, it translates better to all devices. More important, though, is that the mobile-first approach is also a content-first approach. Mobile has the most limitations, screen size and bandwidth to name a few, and so designing within these parameters force you to prioritize content ruthlessly.

 

The mobile-first approach organically leads to a design that is more content-focused, and therefore user- focused. The heart of the site is content that is what the users are there for.

 

1. Content Inventory This is a tabular document containing all the elements you want toinclude. Example:

Index Navigation title Page title Files Comments
0.0 Home SWEN1005   Index or homepage
1.0 Course Content Course Content 1 pdf  
1.1 Web Standards Web Standards    
1.2 Types of Apps Types of Applications    
1.2.1 Native Apps Native Applications    
1.2.1.1 Examples Sample Applications 3 apk  
1.2.2 Mobile Responsive Mobile Responsive …    
1.2.2.1 Examples    

 

[26 marks] 2. Visual Hierarchy Prioritize the elements in the content inventory and determine how to display themost important elements prominently.

  1. Design with the smallest breakpoints and then scale up Build the mobile wireframe first, then usethat as the model for larger breakpoints. Expand the screen until there is too much white space.
  2. Enlarge touch targets Fingers are much wider than pixel-precise mouse cursors, and so need larger elements on which to tap. At the time of this writing, Apple recommends 44 pixels square for touch targets. Give hyperlinks plenty of space, and slightly enlarge buttons, and make sure that these

items easy to select.

  1. Do not count on hovers It almost goes without saying, but designers often rely on hover and mouseover effects in their interactive work. If you are thinking mobile-friendly, don’t. There is no

hover control for fingertips yet.

  1. Think “app Mobile users are accustomed to motion and a modicum of control in their experience.

Think about off-canvas navigation, expandable widgets, AJAX calls, or other elements on the screen with which users can interact without refreshing the page.

  1. Avoid large graphics Landscape photos and complex graphics do not display well when your screenis only a few inches across. Cater to mobile users with images that are readable on handheld screens.
  2. Test it in a real device Nothing beats discovering for yourself how usable a website is (or isn’t). Stepaway from your desktop/laptop computer and load up your product on a real phone or tablet. Tap

 

 

3

through pages. Is the site easy to navigate? Does it load in a timely fashion? Are the text and graphics easy to read?

 

Mobile Application

Include all the mobile pages and applications you have created or worked on throughout the semester as examples for the appropriate labs or course content sections. For web-based applications, the page should be included, for other applications a download link should be provided.

[50 marks] Mobile Ready Content

All of your pages must use:

HTML5 Semantic elements

<main>

<header>

<footer>

<article> <summary>

<details> …etc.

Avoid <aside> for Mobile first content

[10 marks] HTML5 mobile responsive elements

[5 marks]

CSS mobile responsive modules

Grid View

Media Query with breakpoints for phones, tablets and desktops

[20 marks]

At least three HTML5 APIs (Either in an app or on a page) Geolocation

Drag and Drop

Session and Local Storage

[30 marks] Programming

You are required to use javascript mobile extensively for your:

Pages

Navigation bars

Forms you must include at least one form

Lists

Events (touch, scroll, swipe)

… and any other features which will add value to your mobile website

 

To be submitted

 

  1. A single PDF document containing:
    1. Your name, course name, instructor, date and name of the assignment
    2. The Content Inventory
  2. A folder containing all of the webpages and resources required to give full functionality to your website. You must include and separate .css page for your main styles and .js page for your main scripts.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.