city 2020 titan training · city 2020 titan training a next gen site for a next gen city....
TRANSCRIPT
![Page 1: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/1.jpg)
CITY 2020 TITAN TRAININGA NEXT GEN SITE FOR A NEXT GEN CITY
![Page 2: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/2.jpg)
MILWAUKEE.GOV/TITAN2020
HAKIMAH TERRYINTERNET SERVICES COORDINATOR
DOA – ITMD, CITY OF MILWAUKEE
414-286-3509
![Page 3: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/3.jpg)
WHAT’S NEW ON THE SITE
![Page 4: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/4.jpg)
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 5: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/5.jpg)
PAGE LAYOUTS & CONTENT ZONESFOUR ADDITIONAL PAGE LAYOUTS, NEW LEFT AND FULL CENTER CONTENT ZONES
![Page 6: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/6.jpg)
CENTER & RIGHTCONTENT
Center 600px | Right 300px
![Page 7: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/7.jpg)
CENTER & RIGHT CONTENT
![Page 8: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/8.jpg)
CENTER & LEFT CONTENT
Left 300px | Center 600px
![Page 9: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/9.jpg)
CENTER CONTENT
No Side Zones – Full 100% Width
![Page 10: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/10.jpg)
CENTER CONTENTWITH LEFT NAV MENU
Left Side menu for easy navigationto Sibling and Child pages
![Page 11: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/11.jpg)
DEPARTMENT HOMEPAGE
Center Full Width & Taller Feature Image
![Page 12: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/12.jpg)
FEATURE IMAGE ZONE – CUSTOMIZABLEFEATURE TEXT ZONE – (OPTIONAL) FOREGROUND OVERLAY
![Page 13: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/13.jpg)
CENTER & RIGHTCONTENT
Sample of page cloned on May 26
![Page 14: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/14.jpg)
WHAT’S NEW IN THE WORKSTATIONWHERE THE MAGIC HAPPENS!
![Page 15: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/15.jpg)
BLOCK ATTRIBUTE STYLESFLOAT, SPLIT, LIMIT HEIGHT, BOX STYLE & STRIPE BACKGROUND COLORS
![Page 16: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/16.jpg)
FLOATS: 25 – 33 – 50
Full Screen Small Screen
![Page 17: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/17.jpg)
SPLITS: 25 – 33 – 50
Full Screen Small Screen
![Page 18: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/18.jpg)
LIMIT HEIGHT
300px
Height Limit
Height LimitRemoved
![Page 19: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/19.jpg)
BOX STYLE
Thin, red, top border
Distinction
![Page 20: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/20.jpg)
STRIPE BACKGROUNDCOLORS
Background Colors: Blue, Grey and Dark Grey
Two Layouts: Department Homepage & Center
![Page 21: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/21.jpg)
FREEFORM BLOCK STYLES
CircleImage
Two link button options
![Page 22: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/22.jpg)
LAUNCH DATE:MONDAY, JULY 6, 2020
![Page 23: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/23.jpg)
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).
![Page 24: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/24.jpg)
PRE-LAUNCH PRIORITIES
1) * UPDATE CONTENT
2) * REMAP SELECTED PAGES IN FILTER AND PAGE SHARE BLOCKS
3) CONVERT NEWS ROTATOR4) CONVERT PAGE SHARE CONTENT
![Page 25: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/25.jpg)
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
![Page 26: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/26.jpg)
PRIORITY 1: UPDATE CONTENT
Consider copying the block of content to the Block Library
![Page 27: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/27.jpg)
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.
![Page 28: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/28.jpg)
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
![Page 29: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/29.jpg)
WHAT NOT TO DO!
Do not move or copy pages between City 2014 and City 2020
![Page 30: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/30.jpg)
WHAT NOT TO DO!
Do NOT change CITY 2014 or CITY 2020 Page URLs
Do NOT add CITY 2020 Aliases URLs
![Page 31: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/31.jpg)
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.)
![Page 32: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/32.jpg)
WHAT NOT TO DO!
Do not delete unwanted pages Instead, Hide (Remove From
Display)
![Page 33: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/33.jpg)
PRIORITY 2: REMAP SELECTED PAGES IN FILTER AND PAGE SHARE BLOCKS
Page Share Blocks Filter Blocks
![Page 34: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/34.jpg)
PRIORITY 3: CONVERT NEWS ROTATOR => NEWS STRIPE
Build a News Stripe using Floats and BoxStyle templates, copied from the Block Library
![Page 35: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/35.jpg)
PRIORITY 4: CONVERT CONTACT / DEPARTMENT HEAD / CONNECT
CITY 2020CITY 2014
![Page 36: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/36.jpg)
LEFT NAVIGATION PAGE LAYOUT FOR LEVEL 3 SUBPAGES
![Page 37: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/37.jpg)
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)
![Page 38: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/38.jpg)
CUSTOMIZE FEATURE IMAGE / ADD FEATURE TEXT
For now: acceptable to use Block Library stock images
Eventually: acquire custom, department specific images
![Page 39: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/39.jpg)
CONVERT DASHBOARD LAYOUT TABLE => FLOAT50, BOXSTYLE
CITY 2014 CITY 2020
![Page 40: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/40.jpg)
CONVERT OTHER LAYOUT TABLES => FLOAT50, FLOAT33, FLOAT25 BLOCKS
CITY 2014 CITY 2020
![Page 41: City 2020 Titan training · CITY 2020 TITAN TRAINING A NEXT GEN SITE FOR A NEXT GEN CITY. MILWAUKEE.GOV/TITAN2020 HAKIMAH TERRY INTERNET SERVICES COORDINATOR DOA – ITMD, CITY OF](https://reader035.vdocuments.mx/reader035/viewer/2022071502/61218641426e69452b7b6a6a/html5/thumbnails/41.jpg)
CITY 2020 TEAM TITAN TRANSITION SITE
milwaukee.gov/titan2020Workstation Training Lab