Embed Size (px)
Citation preview
CITY 2020 TITAN TRAININGA NEXT GEN SITE FOR A NEXT GEN CITY
MILWAUKEE.GOV/TITAN2020
HAKIMAH TERRYINTERNET SERVICES COORDINATOR
DOA – ITMD, CITY OF MILWAUKEE
414-286-3509
WHAT’S NEW ON THE SITE
RESPONSIVE = MOBILE-FRIENDLY
The technique we will use to transform our website into a mobile-friendly site is “RESPONSIVENESS.”
A “RESPONSIVE” site detects the viewport size of the browser that requests the page and automatically adjusts the layout, size and orientation of the content for optimal viewing and interaction on the device.
Screen Sizes
A site can be programmed to fit the smallest, handheld, mobile device… the largest wall-mounted screen and anywhere in between. However, it’s typical to focus on three distinct sizes:
Small for mobile phones
Medium for tablets
Large for desktop monitors and above
PAGE LAYOUTS & CONTENT ZONESFOUR ADDITIONAL PAGE LAYOUTS, NEW LEFT AND FULL CENTER CONTENT ZONES
CENTER & RIGHTCONTENT
Center 600px | Right 300px
CENTER & RIGHT CONTENT
CENTER & LEFT CONTENT
Left 300px | Center 600px
CENTER CONTENT
No Side Zones – Full 100% Width
CENTER CONTENTWITH LEFT NAV MENU
Left Side menu for easy navigationto Sibling and Child pages
DEPARTMENT HOMEPAGE
Center Full Width & Taller Feature Image
FEATURE IMAGE ZONE – CUSTOMIZABLEFEATURE TEXT ZONE – (OPTIONAL) FOREGROUND OVERLAY
CENTER & RIGHTCONTENT
Sample of page cloned on May 26
WHAT’S NEW IN THE WORKSTATIONWHERE THE MAGIC HAPPENS!
BLOCK ATTRIBUTE STYLESFLOAT, SPLIT, LIMIT HEIGHT, BOX STYLE & STRIPE BACKGROUND COLORS
FLOATS: 25 – 33 – 50
Full Screen Small Screen
SPLITS: 25 – 33 – 50
Full Screen Small Screen
LIMIT HEIGHT
300px
Height Limit
Height LimitRemoved
BOX STYLE
Thin, red, top border
Distinction
STRIPE BACKGROUNDCOLORS
Background Colors: Blue, Grey and Dark Grey
Two Layouts: Department Homepage & Center
FREEFORM BLOCK STYLES
CircleImage
Two link button options
LAUNCH DATE:MONDAY, JULY 6, 2020
CITY 2020 SITE GLOBE
Cloned on May 26
Content changes and updates to CITY 2014 site made since May 26 are NOT reflected on CITY 2020 site
Departments are responsible for bringing and keeping content up-to-date on CITY 2020 until launch day (Monday, July 6).
PRE-LAUNCH PRIORITIES
1) * UPDATE CONTENT
2) * REMAP SELECTED PAGES IN FILTER AND PAGE SHARE BLOCKS
3) CONVERT NEWS ROTATOR4) CONVERT PAGE SHARE CONTENT
PRIORITY 1: UPDATE CONTENT
Use Pages: Recently Accessed list on the Start –Dashboard to identify pages that need updating
Be sure to click More Detail link for your complete list
PRIORITY 1: UPDATE CONTENT
Consider copying the block of content to the Block Library
PRIORITY 1: UPDATE CONTENT
Find the corresponding page on CITY 2020 site
orAdd the new page to the CITY 2020 site
Update content
* TIP: Consider completing the remaining Priorities 2, 3 and 4, if needed, while your already editing and updating the page’s content.
WHAT NOT TO DO!
Do NOT move or copy pages between City 2014 to City 2020.
Do NOT change CITY 2014 or CITY 2020 Page URLs
Do NOT add any City 2020 URL Aliases
Do NOT update links within Freeform Blocks (Although these point to City 2014 pages, they will be automatically remapped during the launch)
Do NOT delete unwanted pages
WHAT NOT TO DO!
Do not move or copy pages between City 2014 and City 2020
WHAT NOT TO DO!
Do NOT change CITY 2014 or CITY 2020 Page URLs
Do NOT add CITY 2020 Aliases URLs
WHAT NOT TO DO!
Do not update links within Freeform Blocks (Although these point to City 2014 pages, they will be automatically remapped during the launch.)
WHAT NOT TO DO!
Do not delete unwanted pages Instead, Hide (Remove From
Display)
PRIORITY 2: REMAP SELECTED PAGES IN FILTER AND PAGE SHARE BLOCKS
Page Share Blocks Filter Blocks
PRIORITY 3: CONVERT NEWS ROTATOR => NEWS STRIPE
Build a News Stripe using Floats and BoxStyle templates, copied from the Block Library
PRIORITY 4: CONVERT CONTACT / DEPARTMENT HEAD / CONNECT
CITY 2020CITY 2014
LEFT NAVIGATION PAGE LAYOUT FOR LEVEL 3 SUBPAGES
CONVERT QUICK LINKS LISTS => BOXSTYLE
CITY 2014 CITY 2020 • Delete separate Header Freeform block
• Add “Quick Links” to Filter Block title• Add BoxStyle Block Attribute (Keep• QuickLinksFilter Block Attribute, too)
CUSTOMIZE FEATURE IMAGE / ADD FEATURE TEXT
For now: acceptable to use Block Library stock images
Eventually: acquire custom, department specific images
CONVERT DASHBOARD LAYOUT TABLE => FLOAT50, BOXSTYLE
CITY 2014 CITY 2020
CONVERT OTHER LAYOUT TABLES => FLOAT50, FLOAT33, FLOAT25 BLOCKS
CITY 2014 CITY 2020
CITY 2020 TEAM TITAN TRANSITION SITE
milwaukee.gov/titan2020Workstation Training Lab
