Responsive Web Site
The project consist of creating a responsive website that will provide a great experience across devices and browsers.
Choosing your project:
You have two options for choosing your client:
Option 1: Design and implement a 3-page minimum website to promote an event of your choice.
Option 2: Design and implement a 3-page minimum website to promote mobile app of your choice.
In both cases, your client must be real. The event can be a past event, as long as it is reasonably recent. You will need to provide all necessary logos and information.
No frameworks, such as Bootstraps, will be allowed. You have to create your own code.
• A minimum of three pages
• Semantic and valid HTML and clean CSS. html-validator, css-validator, codebeautify.org/cssvalidate/
• No page can exceed 1MB. Extra credit if your pages weight 500Kb. ySlow (chrome add on), pageSpeedInsight
• A home page or “pitch page” to entice people to sign up or download
• A working form
• A gallery of images
• One video, at least
• Media must scale appropriately and be optimized for file size
• Relatively scaled text
• Appropriate Media Queries
• Use progressive enhancements so the site is functional in:
- Firefox 50+
- Chrome 50+
- Safari 9+
- Mobile Chrome
- iOS Safari
- All class devices, including mine
See the Calendar page for milestones dates.
- Research and Proposal.
Research: Submit a typed, 1-page minimum document defining the following:
• target market
• primary objective of the site
• assessment of competition, conventions, base expectations of your users
• user needs assessment defining different needs for mobile phone, tablet, and desktop users
Bid: Submit a professional bid (contract, proposal…) for the project. Print on your stationery. Spelling,grammar and design do count
- Content Inventory & Two unique style tiles including: adjectives, color scheme, font choices, typographical hierarchy, design patterns, and a logo
- Wireframes for mobile, tablet and desktop breakpoints. All three pages.
- Draw/write down the DOM and save as pdf. All three pages.
- In Browser Wireframes or mobile, tablet and desktop breakpoints. All three pages.
- Development checkpoint 1: all final content for all three pages in html
- Development checkpoint 2: Mobile first css styling for all three pages. LIVE on your server
- Completed HTML/CSS/JS site
20 pts – Research and proposal (10 pts each)
10 pts – Style Tiles and Content Inventory
10 pts – Wireframes
10 pts – In Browser Wireframes
20 pts – Development Checkpoints (10 pts each)
50 pts – HTML/CSS/JS site – Code Implementation
20 pts – Site design – Artistic control
10 pts – Presentation