Mobile Web Site Style Guide

(1)

YoukU Portal Mobile Site Style Guide

YoRk UniveRSitY

Mobile Web Site

(2)

CSS

Colours

Fonts

Buttons

Page Structure Essentials

Content Modules

Navigation

1.0

2.0

3.0

4.0

5.0

6.0

7.0 @media screen and (min-width: 640px) {

body {

font-size: 28px;

}

body {

font-size: 14px;

}

@media screen and (min-width: 480px) {

body {

font-size: 21px;

}

1.0 Css Rules

My.yorku.ca uses media query to render content based on the width of the screen in 3 different pixel sizes. The rendering of the page is based on the body font size for each CSS style. They are 14px, 21px, 28px. Emphasis (“em”), rather than font size, is used to specify the size of the text on a variety of screen resolutions.

Screen width lower than 480px

Screen width higher than 480px lower than 640px

(4)

2.0 ColouRs

RGB: 204, 0, 0 Hex #: CC0000 RGB: 255, 255, 255 Hex #: FFFFFF RGB: 249, 249, 249

Hex #: F9F9F9 Main background colour is applied to the main content _{area. It provide a visual aid to distinguish the flexible}

main content area from other areas.

Footer background colour is mainly used for

supporting legal and secondary user loging options.

Mainly used for all content text except some headers YorkU Red is used in the header with logo, brand name, and main navigation elements including the list view and the button view.

YorkU White is a official brand colour used to support the YorkU Red colour to creat the overall brand look and feel. YorkU White is alos used on button labels which are sit on top of the YorkU Red colour.

RGB: 90, 90, 90 Hex #: 5A5A5A

RGB: 51, 51, 51 Hex #: 333333

Main body text colour Footer background colour Main background colour YorkU Red

YorkU White Official colours

The colours used on York University mobile sites are the standard red and white used in all York University brand materials. On York’s mobile websites, the colours are used to aid in navigation and to maintain the consistency of the York University brand.

Secondary colours

These colours are used to

distinguish different sections and content types on mobile websites.

(5)

3.0 fonT

AbCDeFGHiJklMnoPQRStUvWXYZ

abcdefghijklmnopqrstuvwxyz1234567890

~!@#$%^&*()_+{}|[]\;’:”,./<>?

ABCdeFGHiJKlMNOPQRStuVWXyZ

abcdefghijklmnopqrstuvwxyz1234567890

**~!@#$%^&*()_+{}|[]\;’:”,./<>?**

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz1234567890

**~!@#$%^&*()_+{}|[]\;’:”,./<>?**

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz1234567890

~!@#$%^&*()_+{}|[]\;’:”,./<>?

Font Family: dax

Font Family: Arial

To ensure visual consistency, we use only two fonts throughout the mobile websites. For dynamic text content, we chose Arial because it is available on all smartphones, regardless of the generation or type. Text elements can be emphasized by changing the size, weight or colour of the font. For static text content, we use Dax, a standard inherited from the York University brand guideline, to maintain the overall York University look and feel.

Sample CSS code for font family:

@font-face {

font-family: ‘DaxMedium’;

src: url(‘dax_medium-webfont.eot’);

src: local(‘IIIIXXXXXXX’), url(‘dax_medium-webfont.woff’) format(‘woff’), url(‘dax_medium-webfont. ttf’) format(‘truetype’), url(‘dax_medium-webfont.

svg#webfontL3aHKdZH’) format(‘svg’); font-weight: normal;

font-style: normal; }

(6)

Subtitle style <H3>

Subheading style <H4>

Page title style <H1>

The H3 tag is used for subtitles. It is the perfect size to indicate a key topic and an important target for search engines.

Where needed, H4 is used to indicate a third-level title. used as a second level. Presents a grouping of information or related topics.

The H1 tag is used for pagetitles, and can only be used once per page. Text in the H1 header is the primary target for search engines.

Font size: 1.5em

Font Color: # CC0000 color: #666;font-size: 0.8em;

margin: 0;

Font size: 1.2em Font Color: # CC0000 margin: 0.4em 0

Font Styles

We present most written

content in black, Hex #333333, for optimal contrast to facilitate reading. Different heading sizes promote a fluid and easy-to-grasp hierarchy of messages. Title fields

Styles for headings are predefined and applied

automatically by the system. For example, H1 will always look the same, and H4 will always look the same because they are defined in the style sheet.

(7)

Body text regular

Links

All regular content appears in dark gray text.

font-family: Arial, sans-serif; Font size: 2em

color: #333;

font-weight: normal; text-decoration: none;

font-family: Arial, sans-serif; Font size: 2em

color: #D30000; font-weight: bold; text-decoration: none;

Body text fields

Body text fields provide options for creating emphasis. However, each content type has a specific presentation format that must be respected.

Links

The text on all links uses YorkU Red.

(8)

font-family: Arial, sans-serif; Font size: 0.9em;

Font Color: white Font weight: normal padding-top: 0.3em; padding-right: 0.9em; margin: 0; text-shadow: 0 0.1em background-color: #D00000; text-decoration: none;

4.0 buTTons

Basic Button Structure

Buttons on a mobile user interface must be large enough to read and tap easily.

Standard Button

Icon Button

Icon Area 0.9em 0.9em 0.3em 0.3em 0.35em 0.35em 0.8em 0.78em 0.35em 0.4em 0.4em 0.4em 0.4em 0.35em

(9)

4.1 buTTon sTaTes

On- and Off-States for Buttons

On- and off-states provide feedback to the user to indicate that a gesture (a tap) has been recognized by the system. In their “off” state, all buttons share a standard bright red look. When tapped, and for the duration of the processing time for a button’s action, buttons appear in their “on” state, a darker red.

Standard and on state buttons share the same layer effects.

Standard Button State

Layer Effects

On State

Blend Mode: Normal: colour FFFFFF; Opacity: 52;

Angle: 90. Uncheck Use Global Light; Distance: 2px;

Spread: 0% Size: 2px;

Size: 1px;

Position: Outside; Blend Mode: Normal Opacity 100% Fill Type: Color; Color: 000000; Blend Mode: Normal: colour 000000;

Opacity: 57;

Angle: 90. Uncheck Use Global Light; Distance: 0px;

Spread: 0% Size: 10px;

Blend Mode: Multiply; Opacity: 15;

Gradient: 000000 to FFFFFF Style: Linear Check Align with Layer Angle: 90; Scale: 80%; Colour: CC0000 Drop Shadow: Stroke: Inner Shadow: Gradient: Overlay: Colour: 660000

(10)

4.2 buTTons & sCReen TRansiTions

Screen Transitions

Screen transitions are an important indicator of the relationship between screens. Transitions aid in understanding the hierarchy of pages on the website.

Next Button

A button with an arrow pointing to the right of the screen. It is used to reveal content one level down from the current page. The page slides to the left.

Back/Previous Button

A button with an arrow pointing to actions. It is used to navigate back to the previous page. The page slides to the right.

Non Directional Button

A non directional button is used for actions such as edit and add buttons. The new page appears from the centre of the screen and fills the page area. A “cancel” button has the reverse effect: The page contracts back to the centre of the screen, revealing the previous page.

Revealing

content Previouscontent

Size: 1px;

Position: Outside; Blend Mode: Normal Opacity 100% Fill Type: Color; Color: 000000; Blend Mode: Multiply; Opacity: 15;

Gradient: 000000 to FFFFFF Style: Linear Check Align with Layer Angle: 90;

(11)

In order to keep costs low and to allow for easier updates and maintenance of York’s mobile offerings, mobile websites are generally preferred over “apps”, which must be developed for use on several different platforms and which must go through an approval process to be made available in device providers’ markets (such as the Apple iTunes Store). There may, however, be special cases in which an app is the most appropriate delivery system, and those will be handled as they arise.

York University Mobile websites are built using the jQuery Mobile

framework. This framework allows us to present the same layout and design to all users, regardless of the mobile device used.

The YorkU Mobile sites are designed for a vertical screen format.

APPS VERSUS

MOBILE

WEBSITES

(12)

The header area contains the title of the website and the simplified York “U” logo. In the case of the www.yorku.ca home page, the name of the site is “York University”. On the Library pages, this title is “Libraries”. On my.yorku.ca, which has its own sub-brand identity, the logo for the site is used as the title.

The red bar below the title is used for navigation to the most important sections of the site.

The content area is flexible, designed to accommodate any amount of content (within reason). As much vertical space as required is used to house the content in this area.

The footer contains quick access to footer link & user login when needed.

5.1 Page sTRuCTuRe essenTials

CONTENT AREA

Header

my.yorku.ca header with links to important sections

York University home page with quick links and search

Content Area

Footer

1.5em Flexible Flexible

(13)

5.2 Page sTRuCTuRe essenTials

my.yorku.ca

my.yorku.ca Regular Content Detailed Content Dual Navigation Tabbed Navigation

my.yorku.ca is York’s student portal. One of the first mobile websites to be developed at York, it establishes the standards to be used in the design of new mobile websites at York. As new websites are developed, there may be a need for additional and specialized page types and standards. Every effort should be made to design these page types in style established here.

(14)

5.3 Page sTRuCTuRe essenTials

my.yorku.ca

(Level1)

These pages use my.yorku.ca pages to illustrate the application of _{York’s mobile website design standard. To see an example of how these}

standards have been applied elsewhere, visit the York Libraries’ mobile site at http://m.library.yorku.ca/.

Header

Content Area

Section List Navigation

Footer Area

my.yorku.ca header with quick links to three important site sections.

See headers specs at section 6.2 for details.

This area is used to highlight current important news and announcements on the website. Users can navigate through a series of announcements using the arrow buttons. The dots along the bottom of this area indicate the number of items available and the user’s progress through the items.

Main sections of the website are accessible within the list navigation menu.

See list navigation menu specs in section 7.1 for details.

Footer contains and footer links and sign-in/sign-out button as needed.

See footer specs at section 6.4 for details.

6.5em Flexible

(15)

5.4 Page sTRuCTuRe essenTials

Regular Content

(Level 2 or 3)

The regular content template consists of a regular header, regular _{content area, and footer area. This is the simplest content template.}

Header

Content Area

Carousel Navigation (Optional)

See headers at section 6.2 for details.

The content area contains plain text with or without images.

See regular content spces at section 6.3 for details.

Carousel navigation is used to scroll horizontally through a set of content items.

Footer Area

Footer contains footer links and sign-in/sign-out button as needed.

3.9em

2.21em Flexible

(16)

5.5 Page sTRuCTuRe essenTials

Detailed Content

(Level 2 or 3)

The detailed content template is an extension of the regular content _{template. It provides a back button so users can return to the page from}

which they arrived. If needed, additional buttons such as “Edit” and “Delete” may also be used in this template.

Header with content navigation

Content Area

See headers specs at section 6.2 for details.

The content area contains plain text with or without images.

See regular content spces at section 6.3 for details.

Footer Area

Flexible

(17)

5.6 Page sTRuCTuRe essenTials

Dual Navigation

(Level 3)

The dual navigation template is used on pages that require a primary _{and secondary level of navigation.}

Header with dual navigation bars

Content Area

In the case of the calendar on my.yorku.ca, the first navigation bar allows the user to toggle between various calendar views. The second navigation bar provides buttons to add an event and to scroll from week to week.

See dual navigation header specs at section 6.2 for details.

The my.yorku.ca calendar uses the flexible content area to display event information. Note the use of all-caps, div lines and colour to distinguish dates from events.

See calendar module at section 6.7 for details.

Flexible

Footer Area

(18)

5.7 Page sTRuCTuRe essenTials

Tabbed Navigation

(Level 2)

Tabs provide one-click access to a set of related content items. This _{is used on my.yorku.ca to display newsfeeds from Faculties and other}

sources at York. Tabs are used only in the Content Area.

Header

Page Header

Tab Menu

Expandable content menu

See headers at section 6.2 for details.

Tabs that don’t fit horizontally are listed when the “more” arrows are tapped.

See tab navigation specs at section 7.2 for details.

An expandable content menu is used to display

headlines. When a headline is tapped, the story summary appears beneath it.

See expandable content menu details in section 6.6 for details. 4.5em 2.14em 1.07em 1.07em Flexible Flexible

Footer Area

(19)

6.0 ConTenT moDules

Modules

Headers

Tabs

Expandable Content

Flexible Content Containers

The template for York’s mobile websites is designed with a set of content modules, illustrated here with examples from my.yorku.ca. Using these modules can save deployment time by reusing existing code. More importantly, by using these modules, we provide a consistent and familiar user experience across all York mobile websites.

(20)

The left area of the regular header contains the web-site title or logo. The right area contains the simplified York “U” logo. If using a simple title, the font used should be Dax Bold in 3.5em.

Tapping the title in the left area results in a flip action that takes the user back to the website home page (in this case, to my.yorku.ca). Tapping the York U logo always takes the user to the main www .yorku. ca home page.

6.1 ConTenT moDules: heaDeRs

Headers

Header

Regular Header

Content Navigation

Content Header

0.25em 0.65em 0.79em 0.25em 0.8em 0.79em

0.5em 0.28em 0.5em 0.5em

0.05em 0.05em

(21)

6.2 ConTenT moDules: heaDeRs

Headers (Continued...)

Homepage Header

Dual Navigation Header

Header

Homepage header links

width: 33.333%

0.28em

Header

Content navigation

Sub content navigation

0.50em 0.65em 0.50em 0.65em 0.5em 0.1em 0.5em color: #CB0000; font-family: “DaxMedium”,Helvetica,Arial,sans-serif; text-decoration: none;

text-shadow: 0 -0.03em 0.02em black; font-size: 2em;

(22)

6.3 ConTenT moDules: ConTenT ConTaineR

Content Container

Content container spacing

Content

Content is surrounded by 3em padding on the left and the right sides and 1em padding on the top and the bottom. Padding creates negative space to support the content it surrounds and helps to increase

readibility and understanding of the content hierarchy. Content in the content container can be text, image or forms etc.

3em 3em 3em 1em

1em

1em 3em

(23)

6.4 ConTenT moDules: fooTeR

Footer

The footer contains links and information that supplements the content of the website, but that is not central to it. In the case of my.yorku.ca, the sign-in and sign-out buttons appear here, along with links to a feedback form and Help pages.

The footer also indicates the end of the content area on the page.

2em 0.5em 0.5em 1em 2em 1em

(24)

6.5 ConTenT moDules: foRm

Form

As with many elements of the York mobile website design, forms are intended to look and feel like native apps and use standard field shapes and buttons.

Spacing in between form element & its label

Form elements spacing

Vertical spacing in between form elements

1em 1em 1em 1em 1em 3em 3em 0.2em 0.2em

(25)

An expandable content menu is used to display headlines. When a headline is tapped, the story summary appears beneath it. Tapping the plus sign button has the same effect. When a story is in the open state, the plus sign is replaced with a minus sign, which when tapped closes the story summary.

6.6 ConTenT moDules

Expandable Content Menu

Horizontal divider

1.5em 0.3em 0.71em 0.71em 0.71em 0.1em 0.1em

(26)

The layout of the calendar on my.yorku.ca can be used as a template to present any type of event listing. Events can be ordered by date, as seen here, or by topic.

Here, tapping the event name (in red) opens the details of the event on a new page.

Calendar Content Structure

6.7 ConTenT moDules

Date header

Appointment content

Horizontal divider

2.5em 2.5em 0.5em 0.5em 0.5em 0.5em 0.1em 0.1em

(27)

7.0 navigaTion

York University Home Page

Grid Button Structure

Navigaton Cap and Divider

Horizontal Divider

Vertical Divider

Icon & Label

Because of its unique role as the entry point to all con-tent on the York website, the home page is given a unique look. Rather than the list-type buttons used on my.yorku. ca and elsewhere, its buttons are square, and presented in a grid. This grid should only ever be used on the main www home page. Icon Area 1.14em 0.075em 1.14em 5.21em x 3.29em 0.05em 0.14em 1.07em 0.05em 0.43em 0.075em 0.075em 0.86em 0.05em

(28)

Navigaton Cap and Divider

7.1 navigaTion

my.yorku.ca

List Button Structure

Icon & Label

Button Label

Horizontal Divider

The list button structure used on my.yorku.ca is the standard structure that should be used for York website home pages other than the main www. yorku.ca page. This structure provides flexibility as any num-ber of buttons may be included in the list. Each item in the list should have an icon on the left. If it is not possible or reason-able to develop a separate icon for each item in the list, a standard icon may be applied to all items. See http://m.library. yorku.ca/ for an example of this treatment.

On the right, each item should have the chevron button seen here. Icon Area 2.79em 0.2em 0.6em font-size: 1.45em; 0.4em 0.4em 0.4em 2.86em x 2.14em 0.5em 0.8em 0.075em 0.45em 0.05em 0.05em 0.075em 0.45em

Mobile Web Site Style Guide

YoRk UniveRSitY

Mobile Web Site

CSS

Colours

Fonts

Buttons

Page Structure Essentials

Content Modules

Navigation

1.0

2.0

3.0

4.0

5.0

6.0

7.0

Table of ConTenTs

@media screen and (min-width: 640px) {

body {

font-size: 28px;

}

}

body {

font-size: 14px;

}

@media screen and (min-width: 480px) {

body {

font-size: 21px;

}

}

1.0 Css Rules

2.0 ColouRs

3.0 fonT

AbCDeFGHiJklMnoPQRStUvWXYZ

abcdefghijklmnopqrstuvwxyz1234567890

~!@#$%^&*()_+{}|[]\;’:”,./<>?

ABCdeFGHiJKlMNOPQRStuVWXyZ

abcdefghijklmnopqrstuvwxyz1234567890

~!@#$%^&*()_+{}|[]\;’:”,./<>?

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz1234567890

~!@#$%^&*()_+{}|[]\;’:”,./<>?

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz1234567890

~!@#$%^&*()_+{}|[]\;’:”,./<>?

Font Family: dax

Font Family: Arial

Subtitle style <H3>

Subheading style <H4>

Page title style <H1>

Body text regular

Links

4.0 buTTons

Basic Button Structure

Standard Button

Icon Button

4.1 buTTon sTaTes

On- and Off-States for Buttons

Standard Button State

Layer Effects

On State

4.2 buTTons & sCReen TRansiTions

Screen Transitions

Next Button

Back/Previous Button

Non Directional Button

APPS VERSUS

MOBILE

WEBSITES

5.1 Page sTRuCTuRe essenTials

CONTENT AREA

Header

Content Area

Footer

5.2 Page sTRuCTuRe essenTials

my.yorku.ca

5.3 Page sTRuCTuRe essenTials

my.yorku.ca

(Level1)

**~!@#$%^&*()_+{}|[]\;’:”,./<>?**

**~!@#$%^&*()_+{}|[]\;’:”,./<>?**