HTML5 Level III Responsive Web Design (RWD) and Front-End Frameworks Session II http://www.profburnett.com

Outline Framework Selection Exercise 1 - Setting Up a Framework Designing Using a Framework Exercise 2 1/17/2019 Copyright © Carl M. Burnett

Frameworks Available Framework Type Custom Build Templates Available HTML KickStart HTML No 1 W3C.CSS CSS Yes 15 Foundation 8 Bootstrap Initializer Semantic UI Yes* - Gulp 9 Uikit 6 960 Grid Yes - CSS 12-16-24 Col Grid 1/17/2019 Copyright © Carl M. Burnett

Frameworks Available Framework Type Custom Build Templates Available YAML CSS No 4 GroundworkCSS 2 Yes - Rail Ink 10 Kickoff Yes - Yeoman 1 Metro UI CSS 3.0 1/17/2019 Copyright © Carl M. Burnett

Exercise 1 - Setting Up a Framework Setup Development Environment Download Framework Install Framework in Dev Environment Design Using Framework Exercise 2 1/17/2019 Copyright © Carl M. Burnett

Designing Using a Framework Determine Content Website Design Plan Navigation Designing Responsiveness with Grid Layouts 1/17/2019 Copyright © Carl M. Burnett

Website Design Define Audience and Goals Design Home Page Design Primary Content Pages Design Other Pages Plan Navigation Plan Folders 1/17/2019 Copyright © Carl M. Burnett

Website Design – Define Audience and Goals From the RWD Website Planning Worksheet 1 - Purpose of creating or re-designing your website 2 - Describe what you want the site to do or what the company does 3 - What are your goals for creating or revamping a website? 4 - Qualities you want to convey 8 - Business Products / Services or Individual Qualities / Skills 9 - Selling points 11 - Target Audience 12 - Secondary Audience 13 - Technical 14 – Usability 17 - Site Analytics 18 - Site Features 1/17/2019 Copyright © Carl M. Burnett

Website Design – Design Home Page From the RWD Website Planning Worksheet Plan Navigation Menu of pages 1/17/2019 Copyright © Carl M. Burnett

Plan Navigation Home Page About Us Board History Contact Us Shopping Cart FAQ Help Products Services Board History 1/17/2019 Copyright © Carl M. Burnett

Plan Navigation – Personal Website Home Page Knowledge's (Strengths) Skills Abilities (What Jobs I can Do) Employment History Current Historical Hobbies About Me Where I Grew Up Where I Live Now Education’ Contact Me 1/17/2019 Copyright © Carl M. Burnett

Plan Folders Root Products Services Images About Us Single Pages Shopping Cart 1/17/2019 Copyright © Carl M. Burnett

Plan Folders – Personal Website Root Folder About Me Folder Employment History Page Folder Education Page Folder Other Page Folder Images Folder PDF File Folder .DOC File Folder Graphics Folder Button Folder Home Page About Me Page 1/17/2019 Copyright © Carl M. Burnett

Using the Grid 960 Gridder 1/17/2019 Copyright © Carl M. Burnett

Laying Out Your Home Page Header </header> <header> Site Logo Title <nav> Sitewide Navigation Options </nav> <aside> Sidebar Local Navigation </aside> Bonus <section> Page Content </section> <article> </article> <Footer> Footer – Background Links And Copyright Info </Footer> 1/17/2019 Copyright © Carl M. Burnett

Laying Out Your Other Page Header </header> <header> Site Logo Title <nav> Sitewide Navigation Options </nav> <section> Page Content </section> <aside> Sidebar Bonus Navigation </aside> <article> </article> <article> </article> <Footer> Footer – Background Links And Copyright Info </Footer> 1/17/2019 Copyright © Carl M. Burnett

Exercise 2 Begin developing your website based on Framework selection. Synchronize development and live website as needed. 1/17/2019 Copyright © Carl M. Burnett

Review Framework Selection Exercise 1 - Setting Up a Framework Designing Using a Framework Exercise 2 Next – Session III 1/17/2019 Copyright © Carl M. Burnett