Last week we focussed on HTML semantics and document architecture with slight emphasis on presentation. The project assignment for the second week is going to assume that you have learned and mastered the basics of semantic HTML and we are going to focus on advanced presentation skills.
We want this assignment to feel like a 'week on the job.' And by that we mean, we will provide a completed comp and an expected outcome specification. It is up to you to deliver on this project specification.
You can download the view that you are to complete here. It is provided as a Photoshop format, if you do not have access to Photoshop, other applications like Pixelmator are able to open these layered files as well.
As a product owner, I need a responsive, clickable prototype of the design deliverable. The final prototype must be visible in a desktop browser, as well perform well on a mobile device.
Prototype is to use best practices in coding HTML/CSS as there is the potential that some or all of the code will made it into production.
Aside from images as content, all visual assets should be produced via CSS or typography. The only background image asset allowed will be the main page header.
The expectation is a mobile first UI that will operate well on a handheld device. The provided comp is a desktop view, so you will need to apply your creative skills to address the mobile UI version.
Images in this project are provided as content, not part of the design. Keep this in mind as you will need to address RWD solution for images as content in the view.
- Semantically correct HTML is required as this will be the model for prod app integration
- Thing in terms of 'components'; if all parts of the UI were lego blocks, who would you code that?
- Images are to be cropped correctly and compression is to take performance into account
- Project is to take a 'mobile first' approach to Responsive Web Design, next breakpoint snap expected at standard desktop width
- All CSS measurements should use elastic units unless a pixel specific unit is required for both mobile and desktop
- All code should be written from the perspective if running on a server. Relative paths to files (
../image.png)will not be admissible to the assignment - Run your project from a server
- Python
- Python simple server
- No special setup and runs great
- Node w/Express
- node-sass-boilerplate
- Ignore the stuff with Sass and Grunt, we will cover that later, but you can use the Express framework and the Node server script to serve up static content if you desire
- Python
- Must work in all major browsers of latest versions;
- Desktop (IE Edge, Safari, Chrome and Firefox)
- Handheld (Safari on iOS, Chrome on Lollipop)
- All interactions must be clearly functional
- Links to other views need not be functional, but must look like links
- JavaScript is NOT to be used
DO NOT fence yourself in with invisible constraints. Unless it is specifically listed and/or we discussed it in lecture, there is not an expectation to meet an objective that has not been set.
In the last assignment we covered the concepts behind semantic and modular HTML. This project assignment is engineered to build on top of those principals and work in more advanced presentation skills, to include RWD.