1. HTML5 Level III Responsive Web Design (RWD) and Front-End Frameworks
Session II

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

3. 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
Col Grid
1/17/2019
Copyright © Carl M. Burnett

4. 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

5. 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

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

7. 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

8. 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

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

10. 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

11. 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

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

13. 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

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

15. 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

16. 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

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

18. 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