user's avatar
Free-Kindling.com Website
Free Kindling
Free Kindling is a website that provides links to free educational resources on the arts, technology and business. Initially the 'Kindling' part of the title related to the heavy focus on Amazon Kindle books. However over time I began to like the idea of 'burning' as a metaphor for learning; and that the free educational resources were what fuelled the learning experience.
This simple style guide was presented to the client as an A3 poster. Great for easy reference.
Responsive Design / Mobile First
This was my first real responsive 'mobile first' designed web project. It was a weird thing to give up the illusion of pretending you have a particular set of physical dimensions to work with. Starting small (mobile) first simplified the process. But as I worked on the larger variations interesting questions came up. If there's a lot of whitespace, do you fill it? And if so, with what? And is that thing you add adding to the user experience? (And if it is, why is it not in the mobile version?)
 
I played around with what I had. In some places I've set up special span tags that hide/show text depending on the available space. It seemed natural enough to explicitly state "Free Technology eBooks" where space allowed, but on smaller displays I ditched the word "Free" since I lacked the space and I would hope people would already understand the nature of the website's content by that point.
 
There's always the danger of hiding something at a particular screen dimension that a user might want to see or use. Part of the way I tried to deal with this was to give users the ability to show/hide content through checkboxes via some jQuery code. In the spirit of progressive enhancement features that rely on JavaScript are disabled by default (at the HTML level) and then enabled by JavaScript if it is present.
Tools and Technologies
HTML and CSS
Responsive Design
PHP and MySQL
JavaScript and jQuery
Illustration with Adobe Illustrator and SVG format
 
External Libraries and Resources
FitVid.js (Thanks Chris and Paravel)
Google Webfonts [Open Sans 400/600/800, Open Sans Condensed 300]
Free-Kindling.com Website
3
157
0
Published:

Free-Kindling.com Website

Free Kindling website project to provide links to free educational resources.
3
157
0
Published:

Tools