anthonyaubrey / responsive-infographic

Take an infographic created in an earlier class and convert it to a responsive interactive website.

Responsive infographic

• Approx. completion time: many hours
• Deliverables: 1 HTML file, 1 CSS file (or more), images

---

Take an infographic created in an earlier class and convert it to a responsive interactive website.

Using the assets from the Adobe Illustrator infographic you created in David Bromley’s class, create a responsive website.

• You’re welcome to simplify it a little—maybe picking 2–3 of the best bits.
• There doesn’t need to be animations or transitions yet—but you’re welcome to add them.
• Try to put as much of the SVG code into your HTML as you can.

---

Rubric

Follow the rubric’s specifics to make sure you’ve fulfilled all the requirements.

Component	0	10	15	20
Markbot	Markbot not used			Passes all Markbot tests
Responsiveness	Barely or not responsive	Some responsiveness issues on all screens	Works well on small, medium & large screens	Responsiveness perfect on all screens: good text size, good hit areas, etc.
Content	Feels incomplete	Not enough content to be a complete infographic	Has enough content to represent a whole infographic	Lots of extra, detailed content
Design & usability	Poorly designed, rushed, not accessible	Non-matching components, poor type choices, poor accessibility	Good design, great type, but poor accessibility	Cohesive design, perfect content size & placement, great accessibility
Professionalism	Incomplete and prototype-y, looks cheap	Feels about halfway complete, could use more effort	Has the completeness of a real website, a client would pay for it	Good enough for Thomas to steal it an call it his own

---

Hand in

Drop this folder into your Markbot application. Make sure to fix all the errors. And submit to Canvas using Markbot.