Mobile Web Site Style Guide

Transcription

1 YoRk University Mobile Web Site Style Guide

2 Table of Contents This document outlines the graphic standards for the mobile view of my.yorku.ca. It is intended to be used as a guide for all York University mobile sites CSS Colours Fonts Buttons Page Structure Essentials Content Modules Navigation

3 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 body { font-size: 14px; } Screen width higher than 480px lower than screen and (min-width: 480px) { body { font-size: 21px; } } Screen width higher than screen and (min-width: 640px) { body { font-size: 28px; } }

4 2.0 Colours 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. YorkU Red RGB: 204, 0, 0 Hex #: CC0000 YorkU White RGB: 255, 255, 255 Hex #: FFFFFF 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. Secondary colours These colours are used to distinguish different sections and content types on mobile websites. Main background colour 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 RGB: 90, 90, 90 Hex #: 5A5A5A Footer background colour is mainly used for supporting legal and secondary user loging options. Main body text colour RGB: 51, 51, 51 Hex #: Mainly used for all content text except some headers

5 3.0 Font 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. Font Family: Dax ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ~!@#$%^&*()_+{} []\; :,./<>? ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ~!@#$%^&*()_+{} []\; :,./<>? Sample CSS code for font { font-family: DaxMedium ; src: url( dax_medium-webfont.eot ); src: local( IIIIXXXXXXX ), url( dax_mediumwebfont.woff ) format( woff ), url( dax_medium-webfont. ttf ) format( truetype ), url( dax_medium-webfont. svg#webfontl3ahkdzh ) format( svg ); font-weight: normal; font-style: normal; } font-family: DaxMedium, Helvetica, Arial, sans-serif; Font Family: Arial ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ~!@#$%^&*()_+{} []\; :,./<>? ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ~!@#$%^&*()_+{} []\; :,./<>?

6 3.1 Font - Headings 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-tograsp 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. Page title style <H1> 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 Subtitle style <H3> The H3 tag is used for subtitles. It is the perfect size to indicate a key topic and an important target for search engines. Font size: 1.2em Font Color: # CC0000 margin: 0.4em 0 Subheading style <H4> Where needed, H4 is used to indicate a third-level title. used as a second level. Presents a grouping of information or related topics. color: #666; font-size: 0.8em; margin: 0;

7 3.2 Font - BODY text & links Body text fields Body text fields provide options for creating emphasis. However, each content type has a specific presentation format that must be respected. Body text regular All regular content appears in dark gray text. font-family: Arial, sans-serif; Font size: 2em color: #333; font-weight: normal; text-decoration: none; Links The text on all links uses YorkU Red. Links font-family: Arial, sans-serif; Font size: 2em color: #D30000; font-weight: bold; text-decoration: none;

8 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 0.4em 0.4em 0.3em 0.35em 0.3em 0.35em 0.9em 0.9em Icon Area 0.8em 0.78em 0.35em 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; 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 Button State Colour: CC0000 Layer Effects Standard and on state buttons share the same layer effects. Drop Shadow: Gradient: Overlay: Blend Mode: Normal: colour FFFFFF; Opacity: 52; Angle: 90. Uncheck Use Global Light; Distance: 2px; Spread: 0% Size: 2px; Blend Mode: Multiply; Opacity: 15; Gradient: to FFFFFF Style: Linear Check Align with Layer Angle: 90; Scale: 80%; On State Colour: Inner Shadow: Blend Mode: Normal: colour ; Opacity: 57; Angle: 90. Uncheck Use Global Light; Distance: 0px; Spread: 0% Size: 10px; Stroke: Size: 1px; Position: Outside; Blend Mode: Normal Opacity 100% Fill Type: Color; Color: ;

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 Previous content

11 5.0 Page Structure Essentials Apps versus Mobile Websites 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.

12 5.1 Page Structure Essentials 1.5em Header The header area contains the title of the website and the simplified York U logo. In the case of the 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. my.yorku.ca header with links to important sections Content area York University home page with quick links and search Flexible Content Area 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. Flexible Footer The footer contains quick access to footer link & user login when needed.

13 5.2 Page Structure Essentials my.yorku.ca 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. my.yorku.ca Regular Content Detailed Content Dual Navigation Tabbed Navigation

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 6.5em Flexible Header my.yorku.ca header with quick links to three important site sections. See headers specs at section 6.2 for details. Content Area 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. Section List Navigation Main sections of the website are accessible within the list navigation menu. See list navigation menu specs in section 7.1 for details. Footer Area Footer contains and footer links and sign-in/sign-out button as needed. See footer specs at section 6.4 for details.

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. 3.9em Header See headers at section 6.2 for details. Flexible Content Area The content area contains plain text with or without images. See regular content spces at section 6.3 for details. 2.21em Carousel Navigation (Optional) 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. See footer specs at section 6.4 for details.

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 See headers specs at section 6.2 for details. Flexible Content Area The content area contains plain text with or without images. See regular content spces at section 6.3 for details. Footer Area Footer contains footer links and sign-in/sign-out button as needed. See footer specs at section 6.4 for details.

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 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. Flexible Content Area 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. Footer Area Footer contains footer links and sign-in/sign-out button as needed. See footer specs at section 6.4 for details.

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. 4.5em 1.07em 2.14em 1.07em Header See headers at section 6.2 for details. Page Header Flexible Tab Menu Tabs that don t fit horizontally are listed when the more arrows are tapped. See tab navigation specs at section 7.2 for details. Flexible Expandable content menu 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. Footer Area Footer contains footer links and sign-in/sign-out button as needed. See footer specs at section 6.4 for details.

19 6.0 COntent Modules Modules 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. Headers Tabs Flexible Content Containers Expandable Content

20 6.1 COntent Modules: Headers Headers The left area of the regular header contains the website 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. Header 0.8em 0.25em 0.79em 0.79em 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 ca home page. 0.25em 0.05em Content Header 0.05em Regular Header 0.5em Content Navigation 0.65em 0.5em 0.28em 0.5em

21 6.2 COntent Modules: Headers Headers (Continued...) Homepage Header Header Homepage header links width: % Dual Navigation Header color: #CB0000; font-family: DaxMedium,Helvetica,Arial,sans-serif; text-decoration: none; text-shadow: em 0.02em black; font-size: 2em; font-weight: bold; Header 0.50em 0.65em 0.50em 0.65em Content navigation 0.1em Sub content navigation 0.5em 0.28em 0.5em

22 6.3 COntent Modules: Content Container Content Container Content container spacing 3em 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 Content 1em

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 2em 1em 0.5em 0.5em 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. 3em 3em 1em 0.2em Spacing in between form element & its label 1em 1em 0.2em Form elements spacing Form elements spacing Spacing in between form element & its label 1em Form elements spacing 1em Vertical spacing in between form elements

25 6.6 COntent Modules Expandable Content Menu 1.5em 0.3em 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. 0.71em 0.71em 0.71em Horizontal divider 0.1em 0.1em

26 6.7 COntent Modules Calendar Content Structure 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. 2.5em 2.5em Here, tapping the event name (in red) opens the details of the event on a new page. 0.5em 0.5em Date header 0.5em 0.5em Appointment content Horizontal divider 0.1em 0.1em

27 7.0 Navigation York University Home Page Grid Button Structure Because of its unique role as the entry point to all content 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. 0.14em Navigaton Cap and Divider 0.05em Horizontal Divider 0.05em 0.075em 0.075em 1.07em Icon & Label Vertical Divider Icon Area 5.21em x 3.29em 0.43em 0.86em 1.14em 1.14em 0.075em 0.05em

28 7.1 Navigation my.yorku.ca List Button Structure 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 number 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 reasonable to develop a separate icon for each item in the list, a standard icon may be applied to all items. See yorku.ca/ for an example of this treatment. 0.2em 2.79em font-size: 1.45em; Horizontal Divider 0.05em 0.075em 0.05em 0.075em 0.45em 0.45em On the right, each item should have the chevron button seen here. 0.4em 0.5em 0.6em Icon & Label Button Label 0.8em 0.4em Icon Area 2.86em x 2.14em 0.4em

29 7.2 Navigation Tabbed Navigation Tabbed navigation with additional tabs buttons hidden 1em 0.21em 0.21em 0.36em 1em 0.5em Tab header Tabbed with additional tab buttons opened 1em 1em Expanded 2.14em Additional tab button 0.5em footer indicates the end of the list of additional tab buttons.

30 7.2 Navigation Tab Navigation (Continued...) Tab structure 1em 1em 1em 1em 1em 1em 0.35em 0.35em Additional tab button structure 0.5em 0.8em 0.4em 0.4em 0.05em 0.05em 0.4em