State of Michigan Look and Feel Document

State Of Michigan Look And Feel Document-PDF Download

  • Date:12 Sep 2020
  • Views:3
  • Downloads:0
  • Pages:62
  • Size:2.06 MB

Share Pdf : State Of Michigan Look And Feel Document

Download and Preview : State Of Michigan Look And Feel Document


Report CopyRight/DMCA Form For : State Of Michigan Look And Feel Document


Transcription:

State of Michigan Look and Feel Standards for Web Applications and Sites. INTRODUCTION 4,RESPONSIVE VS NON RESPONSIVE DESIGN 6. PAGE LAYOUT 7,Templates 7,Page Mechanics 7,Required Core Branding Elements 9. Branding Bar 10,Favicon 13,Banner Header Banner Area 13. Primary Display Area 15,Body Area Only Template 17. Main Navigation 19,Right Sidebar 27,Footer Area 29.
USABILITY AND FORMATTING 32,Readability 32,Visual Consistency 32. Acceptable Font Families 32,Font styling 32,Link Treatment 33. New Browser Windows 33,Link Clickability Cues 33,New Links 33. Text Links 33,Link Names 34,Embedded Links 34,Link Length 34. Button Treatment 34,Multiple Rows 37,Column Sorting Clues 37.
Required Fields 37,Label Placement 38,Required Data Format Example Placement 38. ADA Label Coding 38,Input Box Sizes 38,Version 8 0 Page 1. State of Michigan Look and Feel Standards for Web Applications and Sites. Data Entry Field Display 39,HTML5 Input Types 39,Long Data Items 39. Field Value Alignment 39,Drop Down Defaults 39,Currency 40. Social Security Number SSN 40,Phone Number 40,Calendar Widget 40.
Date Fields 40,Zip Code 41,Error messages 41,Content 41. Placement 42,Highlighting 42,Validation 42,Error Trapping 42. Text Fields 42,Email Address Fields 42,Client Server Validation 42. Re authentication 43,Cancellation and Recovery 43,APPLICATION SECURITY 44. Passwords 44,Lock Out 44,Invalid Sign In Message s 44.
Application Entry Reentry 44,Secured Socket Layer SSL 45. STATE OF MICHIGAN INTERNET CORE POLICIES 46,Additional Policies 47. Logos and Branding of 3rd Party Applications 47,Browser Minimum Requirements 49. ACCESSIBILITY AND ADA COMPLIANCE 52,Overview Section 508 52. Various Disabilities to Consider 53,ADA DESIGN Elements 54.
Form Validation 54,Common ADA Concerns 55,Version 8 0 Page 2. State of Michigan Look and Feel Standards for Web Applications and Sites. Font Standards 56,Accessible PDF Documents 58,ADA Compliance Testing Tools 58. CHECKLIST FOR APPLICATIONS AND WEBSITES 59,REVISION TABLE 60. Version 8 0 Page 3, State of Michigan Look and Feel Standards for Web Applications and Sites. INTRODUCTION,About this Document, Note to all Project Managers and Web Development Teams.
This document communicates important architecture design and development. standards to IT project managers and web design teams It details the standards. and requirements for web sites and applications produced and maintained for the. purpose of conducting official State of Michigan business. Project Planning Expectations, 1 Submit Functional Design to emichigan michigan gov to begin review process. in order to ensure adherence to standards, 2 Educate development staff on the following Look and Feel Standards as well as. ADA compliance requirements to be included in application development. eMichigan resource can answer questions as necessary. 3 Development Staff reviews http www michigan gov dtmb 3533 checklist to. verify application will comply,Construction, 1 Project Manager includes Touch Points with eMichigan resource to ensure User. Interface Presentation Layer adheres to standards, 2 Project Manager and Development Staff completes and submits initial. application review form http www michigan gov dtmb 3533. 1 Project Manager completes and submits application review form. http www michigan gov dtmb 3533 to request sign off from eMichigan. resource The expectation is the majority of issues will have been identified and. resolved and there is no impact to the project Go Live date. To schedule a review meeting complete and submit an Application Review form. Version 8 0 Page 4, State of Michigan Look and Feel Standards for Web Applications and Sites.
Copyright Information, All aspects of the Michigan gov brand either printed or electronic are under the. express control of the Department of Technology Management Budget eMichigan. Web Development Attempts to modify or recreate the Michigan gov brand image or. graphic elements represented within this document are prohibited. Requests for any Michigan gov brand element should be made to eMichigan Web. Development,eMichigan Center for Shared Solutions,Department of Technology Management Budget. Romney Building 9th Floor,111 S Capitol Avenue,Lansing MI 48933. eMichigan michigan gov, This document may be revised as needed to accommodate new standards or revise. and edit existing standards,Copyright 2015 State of Michigan.
Because many of the pages in this document include embedded screen captures page. breaks have intentionally been added so that images and related textual information are. kept contiguous,Version 8 0 Page 5, State of Michigan Look and Feel Standards for Web Applications and Sites. RESPONSIVE VS NON RESPONSIVE DESIGN, Responsive Web Design RWD is a development practice that builds web sites that scale. to whichever device a user is viewing it on It has grown extremely popular with the. proliferation of mobile devices used to browse the Internet such as smartphones and. No matter the circumstance users should be able to access their information on the Web. quickly and easily Additional consideration should be given to on the go mobile users. When viewing a site on a mobile device it is imperative the design minimizes the decision. tree and overall interface clutter, To provide the best user experience it may be necessary to architect a web site to reflow. and respond to the size of the device When planning for responsive web design for. mobile first Designing mobile first includes authoring the CSS to be written for the. devices and making modifications for desktop It also means ensuring the content is. minimal organized and easy to read especially when compressed to a mobile device. Well crafted simple and semantic Document Object Model DOM structuring will provide. the flexibility needed to easily reflow and alter the layout when needed. While responsive design can promote usability and accessibility it may not always be the. correct solution for every web site, Some conditions which might require a non responsive design are. An abundance of functionality that cannot be streamlined. Complicated user interfaces,Large data tables, The following pages outline standards for responsive and non responsive web design.
standards at the State of Michigan Non responsive sites are required to follow the same. guidelines outlined at the desktop level but will not require the responsive components. Version 8 0 Page 6, State of Michigan Look and Feel Standards for Web Applications and Sites. PAGE LAYOUT, Due to the complexity of responsive design layouts templates have been created to. ensure consistent management of core branding elements assist in code maintainability. and overcome the challenges of responsive design It is strongly encouraged that. development teams utilize the responsive design templates for web site development. Templates can be viewed and downloaded from www michigan gov csstemplates. Built on common web frameworks and technologies,HTML5 CSS3 Bootstrap JQuery. PAGE MECHANICS, The following core branding elements and the rules associated with their usage must be. included on all public facing sites and applications. Branding bar,Banner header,Primary display area, Additional features such as main navigation and right sidebar are allowed to provide.
effective and efficient information architecture while maintaining brand consistency and. aesthetics, The maximum width of a parent container and the core branding elements within should. not exceed 1170px when on desktop Smaller mobile devices may require the page. container the core branding elements and other page elements to become responsive for. a better user experience,Vertical and Horizontal Scroll Bars. Applications should manage to include as much information Above the Fold and. limit vertical scrolling when possible This offers the user ease of access to. Version 8 0 Page 7, State of Michigan Look and Feel Standards for Web Applications and Sites. information without scrolling Critical features such as login and core navigation. should never appear Below the Fold, Below the Fold refers to that area at the bottom of the browser screen that limits. what can be displayed to the user, Applications should avoid horizontal scroll bars especially when on a mobile device.
Horizontal scrolling causes many usability conflicts and is considered a poor. application of information architecture Users will often miss details or valuable. information if displayed off the screen and will constantly be required to move the. screen to see all of the information The net result is users tend to avoid sites that. require too much scrolling,Body Gutter, The body area should also contain built in margin accommodations at the far left. and right of the display area A gutter ranging from 10 20 pixels is recommended. Title Field, The information entered in the browser title field for each application should be. concise yet contain helpful information that aids in navigation and searching. Relevant pieces of information include,1 The abbreviation of the department in question. 2 The name of the application Acronyms are acceptable. 3 A unique name for each screen, Example MDOT MiDrive Camera Viewer Windows Internet Explorer. Version 8 0 Page 8, State of Michigan Look and Feel Standards for Web Applications and Sites.
REQUIRED CORE BRANDING ELEMENTS, All application designs must incorporate these core elements for a common consistent. presentation layer Branding Bar Banner Header Primary Display Area and Footer. Body Only Example Displaying Core Branding Elements. Version 8 0 Page 9, State of Michigan Look and Feel Standards for Web Applications and Sites. BRANDING BAR, The branding bar is a key element to all online service sites representing the State of. Michigan The goal is to present the user an official State of Michigan unified brand. appearance that carries across to all agency sites The same brand is duplicated at the. agency application level so the user experience is as seamless as possible. To maintain brand appearance 20 30 of the branding bar s left side. must remain uncluttered and empty Color requirements include white font. and graphics overlaying the branded background color which is a very dark. gray we encourage hexadecimal 505060 R 80 G 80 B 96 The colors. may be inverted but not substituted, The branding bar includes right aligned embedded links some of which are required The. branding bar serves as the primary space for the following three 3 required utility links. A link to the application introductory screen or site home page. A contact link to give users an access to contact information regarding the. application or specific site information such as contact email mail or fax. information, A link back to the Michigan gov portal site represented by the MI gov brand logo.
In circumstances where login is needed it is required to appear with the branding bar. utility links,MI gov Brand Logo, The MI gov brand logo on the far right of the branding bar will always link to the. Michigan gov portal home page at www michigan gov As a legal entity within the. State of Michigan hover text title attribute must read An Official State of Michigan. Web Site or in the case of domains ending in Michigan gov Michigan s Official Web. Site This standard applies to all applications or sites hosted within the State s CMA. on agency internal servers state clustered server systems or third party external. hosting arrangements, Preserving the highest image quality integrity brand display and alignment is critical. to the public s perception that they are using an official State of Michigan web site to. conduct official state business,Consistency with Parent Site. Applications built for specific agencies should match the look and feel of the agency. site branding bar banner header main navigation right sidebar and footer. Version 8 0 Page 10, State of Michigan Look and Feel Standards for Web Applications and Sites. An application being built for the Department of Treasury should adopt the look and. feel already in use at the agency site www michigan gov treasury Movement from a. link on the site to the application should be apparently seamless as to look and feel. The agency site is to be considered the parent of all third party applications Agency. sites will provide navigation for user access to the application and the application will. provide navigation to the parent agency site,Design Elements for Branding Bar.
For ALL instances the branding bar is 44px high background extends the page width. and content is restricted to parent container dimensions. Phone Tablet Portrait, A dropdown menu system is required to access responsive branding bar utility. The required height of the menu system links is 44px. MI gov and login logout is never nested in the menu system. See Image on Next Page,Version 8 0 Page 11, State of Michigan Look and Feel Standards for Web Applications and Sites. Responsive Branding Bar,Sample Vertical Main,Version 8 0 Page 12. State of Michigan Look and Feel Standards for Web Applications and Sites. The favicon is not required however if used must be the standard State of Michigan. Responsive Web Design RWD is a development practice that builds web sites that scale to whichever device a user is viewing it on It has grown extremely popular with the proliferation of mobile devices used to browse the Internet such as smartphones and tablets No matter the circumstance users should be able to access their information on the Web quickly and easily Additional

Related Books