Posts

Showing posts from August, 2013

How to make a good infographic

Image
Infographics or information graphics are visual representation of data and are a great way to explain complex information in a clear graphical way. These usually take the form of maps, charts and diagrams that are both interesting and appealing. There is a great article over at  submitinfographics.com  that looks into the eight factors that make a good infographic. I've summarised Amy's work into the following points and a simple infographic (that breaks some of these "rules" - click image to enlarge) 1. Data Visualisation Must be data driven - not just fancy looking text (think chart, map etc.) 2. Clean Colour Pallet Must compliment the website, colour must be significant - no MS Paint style colour pallets. 3. Clear Story Should tell a story with pictures - and contain more than one piece of information (good infographics weave different facts and data together). 4. Dimensions Don't make the infographic too big. It has to fit on the average viewers monito...

How to make multiple div columns expand to the height of the tallest/highest column - 7 solutions

Image
I've tried to include a comprehenisve list of all solutions to this common problem. It is one of those web design problems that every web designer runs into eventually. You have two or more columns that have auto height (so it expands to the content) but you want to have both columns take the height of the tallest one. You may become frustrated and just go for a fixed height on both columns - but this isn't really a solution. There are basically 7 work-arounds for this problem which I will briefly note and reference other sites that show the solution in more depth. 1. The Faux Columns method This as the name suggests uses false columns in the way of tiled background images to create the illusion of similar sized columns - this is a bit of a cheat (and uses extra images). Not really recommended as every time you change column widths you need to make a new image.  www.alistapart.com/articles/fauxcolumns/ 2. The Overflow Crop method This method uses overflow:hidden CSS and...