Viewing historical browser market share statistics the old fashioned way is a pretty dull task. There’s nothing less inspiring than sitting staring at a table of data that visually tells you nothing. On the flip side we all like a good pie chart right? All those colourful segments that kind of look like a Terry’s Chocolate Orange, indicating immediately the impact of the resulting data in a visual form.
Historical browser statistics
Current browser share statistics is something I reference from time to time and I use W3schools.com as a primary source for this data. A tool I recently discovered from Axis shows the historical browser statistics from W3schools.com in a custom visualisation. It tracks back to January 2002 and includes historic deprecated browsers such as IE4.
Conclusion
A cool online tool for viewing historical browser market share statistics. Witness the demice of Internet Explorers dominant control of the market with this intelligent custom visualisation. Let us know what you think of the tool and the market share as a whole.
I’m a web designer by day and a web designer by night, I pretty much live and breath the web. I use many tools to assist me in my workflow, tools that both assist me in maintaining quality in my work and also in saving time, time I’d much rather spend catching up on the latest season of The Wire.
One pretty cool tool I use to assist in the development side of web design are grid overlays. Grid overlays are exactly what they sound like, a grid that overlays your website. I use them as a quick visual guide to check to see in all my elements line up as intended and are pixel perfect.
Browser plugins
One option is to use Firefox and an extension called Gridfox. This is useful as I already use Firefox as my main development browser.
Scripts
Andy Budds Layout Grid Bookmarklet
A more die hard approach would be to use Javascript. Andy budd wrote a nice overlay grid bookmarklet, originally inspired by Khoi Vinh’s post about using a background image of a grid for layout. The script is also demonstrated on the SubtleGradient website.
#grid
A personal favourite is this Hashgrid script you can embed on your site. The clever part is you can turn it on and off by typing ALT + G – g33k! The clever scripting gives me the functionality I need, if I have a particular layout to test with a different structure I can simply replace the bg image.
Designing with Grids in mind
Do you or have you considered using a CSS framework when developing sites? Personally I don’t as I feel I can write lightweight CSS which is both flexible and cross browser. Photoshop guides and grids help in the design phase but you lose these when developing, until now of course.
In summary
These tools help bridge the gap between the design phase (Photoshop, guides and grids) and the development phase (using these tools to test and compare). Let us know if there are any other tools out there that do something similar, I’m sure I’ve missed some, oh and let us know what you think of these, if you already use them and what your experiences of working with them are.
CSS Inheritance is pretty easy to understand but can take years to master. First you have the document tree to fathom, then you throw in the multiple value types, the selector groups and their individual behaviours and then it all becomes a little more complicated. You have Ancestors, Descendants, Parents, Children, Siblings and the family pet to deal with, it becomes a real head spinner when left to look after them all with no firm grounding as to how to properly organise them all. This is until now, we present to you the CSS Inheritance Slideshare Presentation, classified a U so is suitable for all experience levels in CSS.
Conclusion
Now hopefully you are fully versed on CSS Inheritance, let us know what you thought. Did you learn anything new? I’ve been hand coding CSS for as long as it’s been feasibily supported and I have certainly picked up a firm understanding of Inheritance.
More CSS resources by us
CSS Shorthand
CSS Shorthand top tips. Think you’re a CSS Guru? You should checkout CSS Shorthand, we’ve even written an article on it.
CSS for ABSOLUTE BEGINNERS – shaping up with CSS
CSS for ABSOLUTE BEGINNERS training presentation. If you’re an absolute newcomer to the scary world of web design and wish to start learning things from scratch then this is the presentation to watch.
The CSS Bible
The CSS Bible – full chapter and verse, every article on css you’ll every need from third party sites. A great post to bookmark.
In just a matter of days our glasses will be full of cheap Brut Cava, the countdown to midnight will begin and we’ll drunkenly sing along to Old Lang Syne as we welcome in a new year, a new decade and the start of 2010. Looking back 10 years I regale my girlfriend to where it all began where I, a mere design student, started the long road to design stardom, stardom which still avoids me of course but the start of a career that sees a lot of change and evolution in the design industry. Print is in decline, web has been a rollercoaster of growth and decline but most amazingly my mother gets her first computer and starts blogging (no you can’t have a link she’ll kill me).
Good took a look back at the last decade in design and highlighted the most significant moments. We chose are favourites below but please do click through and read the entire post as it’s really worth the read.
It will also be great to hear your achievements from the last decade, whether you’re new to the game or you’re an old skool designer make sure you regale us below in the comments.
2000
Tech stocks plummet, signaling the official burst of the dot-com bubble. Thousands of newly-minted web designers are laid off. San Francisco’s cafes swell with unemployed creatives paying inflated rents.
2001
Apple’s first retail store opens. Steve Jobs announces the first-generation iPod, which can hold 512 MB of music. It is available only in white.
2002
The stop-motion Lego animation of the White Stripes’ video Fell in Love with a Girl by Michel Gondry heralds a new generation of video and commercial auteurs who bring their specific aesthetic to feature films (and Criteron Collection DVD sets).
2003
Jeffrey Zeldman’s book Designing with Web Standards transforms the way that web developers interact with code, calling for universal accessibility across browsers.
2004
The Dove Campaign for Real Beauty is launched by Ogilvy & Mather, featuring self-esteem messaging for young girls, an attack on glossy magazines, and imagery of real women shot by Rankin.
2005
The One Laptop Per Child project announced by Nicholas Negroponte. The lime-green laptop is later designed by Yves Béhar.
2006
The Wii gaming console is launched by Nintendo, forever transforming the way we interact with games. We never need to go outside again.
2007
The 2012 London Olympic logo by Wolff Olins is revealed, sparking a international scandal as more than 50,000 British citizens sign a petition against its design. An animated version is said to cause seizures.
2008
Shepard Fairey creates the “Hope” poster to support Barack Obama’s presidential run. It becomes the single most representative image of any political campaign, ever. Fairey spends the next year in a heated fair-use battle with the Associated Press. No one wins. Oh, except Obama.
2009
Dubai’s Burj Dubai, designed by Adrian Smith, tops out at 2,684 ft, the tallest man-made structure ever built. It’s scheduled to open in January 2010 as reports of Dubai’s downfall begin to trickle into architectural publications.
According to Mashable, Facebook is getting a redesign. After looking at the screenshots, shown below, it’s seems to be quite a substantial tweak to the architecture. Personally I find Facebooks current design hard to navigate and lacks basic usability. These new visuals show an appreciation for the less IT savvy facebooker. Search seems to be pushed more with a larger search box in the header and an inbox preview on the homepage seems a great idea.
Screenshots of new Facebook UI currently in user testing
News feed
Requests
Inbox preview
Notifications
Account settings tab
Your thoughts?
Let us know your thoughts on the Facebook design, both current and new, in the comments below.
This year General Motors (GM) began the fourth largest bankruptcy proceedings in history, joining the many other large and venerable companies that have sunk to the bottom during this economic crisis. In fact, eight of the 20 largest bankruptcies have happened during the last two years of crisis. This infographic from Good illustrates visually the magnitude of these collapses.
After being shot down by an over enthusiastic designer for calling a typeface a font to a client over the phone this particular developer would now disagree. You see to Joe Bloggs A type and a Font are the same thing, to a developer it’s like saying a Gerbil and a Hamster are the same thing. To them they’re both a small, furry and sometimes smelly caged pet. A designer of the other hand is a little pickier when it comes to detail, after all they are trained to look at the smallest details. He would say to the developer..
“A Gerbil is nothing like a Hamster, Hamsters for a start like to live alone and seem to wake up when you go to sleep. Gerbils on the other hand are the complete opposite, they are happiest in groups and love being active, chewing and gnawing at the bars till you play with them.”
So yes, fonts and typefaces are technically different though relate to the same thing.
What is a typeface?
Think of a typeface as the ‘design’ of the design of the alphabet, the shape of the letters that make up the typestyle. The letters, numbers, and symbols that make up a design of type. So when you say “Arial” or “Garamond” you’re talking about a set of letters in a specific style, a ‘typeface’.
What is a font?
Think of a font as the digital file that contains/describes the typeface. Think of the font as a little piece of software that tells the computer and printer how to display and print the typeface.
Adobe’s type glossary description
According to Adobe’s type glossary: “A font is one weight, width, and style of a typeface. Before scalable type, there was little distinction between the terms font, face, and family. Font and face still tend to be used interchangeably, although the term face is usually more correct. A typeface is the letters, numbers, and symbols that make up a design of type. A typeface is often part of a type family of coordinated designs. The individual typefaces are named after the family and are also specified with a designation, such as italic, bold or condensed.
F*** you designer snob!
Next time you encounter a stuck up designer who likes to take every opportunity to correct you on design related jargon, just think, here’s one small dollop of typography info to counter his attacks. I’d be so blunt as to knowingly misdescribe the font/typeface then counter his verbal nonsense with your new found knowledge.
Photoshop files (PSDs) can be huge in file size, especially if you are working on a large format high resolution file. Here’s a quick tip that can save you valuable HD space, anywhere between 10% – 90%, simply by turning off layer previews when you save.
Before you save
It’s best to organise your layers in groups and delete any unwanted layers before you save. This isn’t a crucial step but it can drastically reduce the size of the PSD when saved. To do this header on over to the layers palette, click the icon in the top right corner and click ‘Delete Hidden Layers’ (shown below).
Turn layers off
Now that your layers are tidy and organised it makes this next step easier. To the left of each layer you should be able to see an icon of an eye (shown bottom left image), simply click on each eye icon to hide the layers (shown bottom right image).
Compare file sizes
In theory the PSD with layers hidden should be smaller in file size than the same file but with layers shown. The graphic below is an illustration showing the same PSD with and without layers shown. In this case the file with layers hidden is over 50% smaller in file size than the same file showing the layers.
Is it right for you?
In most cases yes. Personally I use the approach on backup versions of a design only. I tend to keep the layers in an active working copy shown for speed. If I get to version filename-01F however, I’ll use this approach in all previous files, A through to E. Finally once the project is finished I will ZIP up the folder, after erasing all unnecessary layers and archive them away. On one project alone I ran through 13 PSD versions and saved a total of 2.3GB in disk space with this technique.
If you have any questions please feel free to leave them in the comments below, I’d be more than happy to answer them.
The internet is big, as as this illustration proves, it’s growing faster than the Solar System. It’s amazing when you put all these figures down in one place, it makes you feel quite inadequate in comparison. 210 billion daily emails is staggering, if I just try a little harder I’m sure I’ll be able to increase that to 211,000,000,000 emails. Simply leave your email below and we’ll get the ball rolling
