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
about the author page.
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:
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
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.
Patterns to choose from:
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.
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.
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.
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.
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|
|18.104.22.168||Examples||Sample Applications||3 apk|
|1.2.2||Mobile Responsive||Mobile Responsive …|
[26 marks] 2. Visual Hierarchy Prioritize the elements in the content inventory and determine how to display themost important elements prominently.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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
through pages. Is the site easy to navigate? Does it load in a timely fashion? Are the text and graphics easy to read?
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
Avoid <aside> for Mobile first content
[10 marks] HTML5 mobile responsive elements
CSS mobile responsive modules
Media Query with breakpoints for phones, tablets and desktops
At least three HTML5 APIs (Either in an app or on a page) Geolocation
Drag and Drop
Session and Local Storage
[30 marks] Programming
Forms you must include at least one form
Events (touch, scroll, swipe)
… and any other features which will add value to your mobile website
To be submitted
- A single PDF document containing:
- Your name, course name, instructor, date and name of the assignment
- The Content Inventory
- 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.