Navigation

  • Changes need to be reviewed and approved by UX team. Consider when adding content:

    • Can the new content replace or be added to an existing page?
    • Global nav, secondary nav, Page titles, H1 titles and URLs need to match

    How to build URLs

    Follows same patterns as navigation, use dash (-) between words, and should ONLY be lower case. For non-secure pages do not use special characters like space,$,%,&,!,#.

    Correct:   https://www.premera.com/wa/member/manage-my-account/forms/ 

    Incorrect:   https://www.premera.com/wa/Manage_my_account/Forms/ 

    Changing URLs

    Changing URLs has significant impacts on our pages showing up in search and breaking external links to our websites. Please use 301 HTTP status code redirects when a page is removed, replaced or consolidated. The forwarding URL should point to the most relevant page; this is called mapping URLs. If a match can't be found then point to main landing page or home URL like Premera.com/visitor.

    Removing URLs from search results

    Please work with Karlyn and Sarah when removing one or more pages. Updates will need to be made in the webmaster account.

    • If the page no longer exists, make sure that the server returns a 404 (Not Found) or 410 (Gone) HTTP status code. Non-HTML file (like PDFs) should be completely removed from your server.
    • If the page still exists, use robots.txt to prevent Google from crawling it. Even if a URL is disallowed by robots.txt we may still index the page if we find its URL on another site. However, we won't index the page if it's blocked in robots.txt and there is an active URL removal request for the page.

    Errors

    All pages should be coded to display the friendly version of the Error page for all 400 and 500 HTTPs errors. This allows our customers and bots crawling our sites to return later and eliminates dead-ends.

    Drop down menu and left navigation

    navigation current navigation state 

  • Choosing the button style

    Choosing a button style depends on the primacy of the button, the number of containers on screen, and the screen layout.

    Primary button

    Use the primary button style when needing to call attention to that action, i.e. you want the customer to click on this. Primary buttons should only be used once per component.

    Primary button colors

    Disabled state
    #ffb7b4
    Normal state
    Coral
    #ff7c76
    Hover/clicked
    #dd6162
    Text
    #313234
    Black
    #000000

    Default button

    Use the default button style when button does not represent the primary action on the page.

    Default button colors

    Disabled state
    #f5f5f5
    Normal state
    Gray
    #e0e0e0
    Hover/clicked
    #c1c1c1
    Text
    #404144

    Button text

    Font: Roboto
    Weight: Medium
    Size: 16px

    Button text

    Button text

    Button style

    Primary button

    Normal

     

    Normal state
    color (text): #313234
    background-color: #ff7c76
    border-color: none

    Default button

    Normal

     

    Normal state
    color (text): #404144
    background-color: #e0e0e0
    border-color: none

    Focused

    Focus/hover over state
    color (text): #000000
    background-color: #dd6162
    border-color: none

    Focused

    Normal state
    color (text): #404144
    background-color: #c1c1c1
    border-color: none

    Pressed

    Focus/hover over state
    color (text): #000000
    background-color: #dd6162
    border-color: none

    Pressed

    Normal state
    color (text): #404144
    background-color: #c1c1c1
    border-color: none