When starting a new project it will probably take you at least 15-20 minutes of getting your stuff together. Many times I found that exactly these routine tasks are the most annoying which keep us from being productive (and happy). So, go get the html5boilerplate.com and be happy
This project by 5 driven guys, Nicolas Gallagher, Hans Christian Reinl, Mathias Bynens, Paul Irish, Cãtãlin Mariş, and Divya Manian is a great starting point for any HTML based web development. Simply awesome!
The boilerplate bundle includes:
- Directory structure (index file, img dir, js dir, css dir, etc.)
- CSS reset using normalize.css
- HTML5 feature detection through Modernizr
- Google Analytics snippet (just replace your own id)
- Other really useful tips and tricks for better development
- HOW TO: Get Started With Google Analytics (by Meghan Peters) - Helps you monitor and analyze visitors, traffic sources, content, goals, e-commerce,...
- Usability Testing: What You need to Know? (by hongkiat) - read about how to structure tasks and questions
- 30 Inspiring “About Me” Pages (by Stephanie Hamilton) - yes, get inspired!
- Designing Effective FAQ Pages (by Mohammad Moradi) - use them as a last resort, but most important: make them helpful and not require another FAQ page to decipher
- Real Time Web Analytics Services – Best of (by hongkiat) - which web analytics service do you use?
- Guidelines for URI Design (by Jacob Gillespie) - URI structure is primarily important for user recognition and easy of use, search engine optimization is nice too.
- 8 Ways to Make Your Website Mobile Friendly (by Joel Reyes) - isn't it sweet that our mobiles will drive us towards better web development also? Something we should have been doing for a long time already?
- The ADA and the Web: Concerns and Misconceptions (by Jared Smith) - Is an accessibility law for e-commerce coming? Will this take the look of the web back to 1990? Jared has some nice Q&A there...
- Stop Designing Aesthetics, Start Designing Emotions (by John O’Nolan) - Design for emotions, definitely not a new concept but usually poorly covered. John takes a good stab on it.
- 5 Small Biz Web Design Trends to Watch (by Grace Smith) - Minimalism, Unique Photography, Bold Typography, Clear Calls to Action, A/B Testing - what more to say?
- iPad User Experience Guidelines (by UX Magazine) - with the source doc at Apple's Human Interface Guidelines for the iPad
- A Complete Guide to A/B Testing (by Cameron Chapman) - convince yourself and your clients of a design that works better - good summary and tool collection.
- It Isn't Minimalism (by Dmitry Fadeyev) - as Dmitry argues: "Simplicity isn’t a design trend, it’s an attribute of good design."
- Complete Beginner’s Guide to Content Strategy (by Andrew Maier) - about strategies to abstract, analyze, collect, publish & manage. Nice!
- Understanding border-image (by Nora Brown) - nice CSS3 tutorial for custom borders - come on Microsoft, you can do it...
- Search Analysis with Google Analytics (by Dave Sparks) - may I introduce, your users. Get to know your users, what they do, what they want, what they are looking for. All invaluable information. Good intro by Dave.
- Best Tools for Testing Cross Browser Compatibility (by Joel Reyes) - every designers nightmare, browser compatibility.
- 10 Tools for Getting Web Design Feedback (by Ben & Jerry’s) -
- Drawing the Line: 6 Things You Shouldn’t Tolerate in Projects (by Sacha Greif) - Thank you, thank you, thank you. Can't reiterate enough. We Designers have to show integrity! Thank you.
- Complete Beginner’s Guide to Web Analytics and Measurement (by Andrew Maier) - a really great summary of tools and methods for web analytics.
- Favorite UX & Technology Blogs | Learning About New Web & Mobile Applications (by Janet M. Six) - uxmatters answer to favorite UX and technology blogs and how to learn about new Web and mobile applications.
- 10 New UX Books To Look Out for in 2010 (by Paul Seys) - what more to say...?
- 7 Steps to Better Website Feedback (by hongkiat) - good content but I really love this blog entry for its references.
- 15 Google Chrome Extensions for the Avid Designer (by Joel Reyes) - from Firebug to Resolution test and many more...
- Using Landmarks Makes Page Layout Easy (by Ben Gremillion) - harmony in design is based on well-known layout principles - great discussion by Ben!
Which browser platform should we design for? To most web developers this question is a nightmare and dilemma at the same time, but yet again we face it almost on a daily basis. Just to show you how difficult an answer might be is the disparity between two projects I'm involved in, one for a federal government body that by definition only supports IE6 and another that is expected to be finished in 6 months and therefore was hoping to target IE8. Are these expectations realistic?
Let's have a look at some website analytics that were collected over the past year (July 2008 - July 2009), taken from Fanposter.org, a social media website with over 5000 registered users from almost 100 countries and collected through Google Analytics.
Note: While I'm aware that the audience of this website might not be representative for all age groups or countries/regions, it still provides valuable hints about browser usage and trends.
Lesson 1: Internet Explorer on the fall
Internet Explorer is historically bundled with Microsoft Windows Operating Systems. IE6 was released August 27, 2001 just months before WinXP; IE7 was released October 18, 2006 and included with Windows Vista and Win Server 2008; IE8 final was released March 19, 2009 and will be included with Windows 7.
The combined total market share for Internet Explorer over the past year was 76.5% but the trend shows a clear decline over the past months from 74.0% in May to 68.8% in June and 53.9% in July.
Will this trend continue to hold true?
A lot will depend on the upcoming release of Windows 7 in October 2009 with Microsoft's power in reaching the people to upgrade their browsers. But almost certainly Microsoft will loose its dominant position of 95% in 2002 and 2003 (IE5 & IE6) or over 75% in the past year to its numerous very capable competitors.
Lesson 2: IE8 on the rise
When comparing the 3 current versions of Internet Explorer out there (IE6, IE7 and IE8 with IE5 and lesser not appearing in the analytics anymore and therefore being disregarded) it seems to be evident that IE8 is on the rise. Though the really surprising observation is that this increase cannot be accounted to users abandoning IE6 but rather to users upgrading their version of IE7. How come? The answer seems to lie in fact that many companies and their IT departments as well as governmental bodies still continue to hold on to and enforce the use of IE6. Can Microsoft overcome these - mostly security-related - concerns through IE8?
Lesson 3: IE6 might not die as soon as we all may wish
As discussed above IE6 is still a requirement for many users. A quick look at Google Trends reveals that searches for IE6 (Figure 3: blue line) have been pretty stable over the past 4-5 years while searches for IE7 (Figure 3: red line) are declining and searches for IE8 (Figure 3: yellow line) are in the lead. This goes hand in hand with the observations in Lesson 2 above.
In the meantime let's join the numerous battles to kill IE6 like Norwegian Websites Declare War on IE 6 and IE Death March or more seriously at Bring down IE6. Joke or not, IE6 will be around for some more time and therefore needs to be considered if we want it or not.
It won't even help that Digg is discussing to drop support for IE6 or YouTube Will Be Next To Kiss IE6 Support Goodbye. Both sites don't need users that cannot upgrade IE6 e.g. due to limitations at work because exactly these users have limited access restricted by their companies anyway.
Lesson 4: Firefox stays on top
A very interesting observation is the fact that Firefox does a really great job in staying on top of things and keeping their user base up to date. In the last month of the observation period less than 5% of all Firefox users had a version lesser than 3, or in other words, the great majority of Firefox users was using version 3 and higher. And with versions 3.7 and Firefox 4 in the making, a huge base of motivated developers and fascinating plug-ins the future looks bright. Firefox's marketshare seems to climb steadily also, as of July 2009 it showed 32.1% (20.5% average over the past year) with the majority Windows versions and only 0.6% on Mac and 0.2% on Linux. Obviously we all love the high commitment to standards compliancy that makes developing web apps a blast, right?
Lesson 5: Chrome & Safari
Google Chrome was released December 11, 2008 and first received as Google's never-ending battle against Microsoft (see graphic by Federico Fieni) but more likely just another smart move to keep users on the web - the faster, the better - or like Ben Parr explains "Revenue = Amount of Time on the Web".
As far as marketshare is concerned, Chrome rose to 2.3% in July according to my analytics. This is still fairly small but not to be underestimated. In terms of testing Google's developer page for Chrome suggests that "if you’ve tested your website with Safari 3.1 then your site should already work well on Google Chrome". But what about Safari?
Safari accounts for 1.3% in the yearly average (with 1.2% on Mac and the rest on Windows). Should we test Safari with a marginal share like this? It really depends on your budget and company structure which might require unjustified additional resources for your QA team. Do the math for yourself: 1% of 10k visitors are 100 potential customers - is it worth the effort?
Lesson 6: Opera is the misunderstood genius
Opera shows an average of 1.1% with an unexpected peak in July 2009 - I need to continue observing where and why that came from. Needless to say, Opera is strong in European countries like Russia and on mobile devices such as mobile phones, smartphones and PDA's (personal digital assistants). It's a shame that Opera is not further ahead, it has been and still is innovator and spearhead in terms of new useful features as well as standards compliancy and implementation.
What are your experiences?
Without giving any decisive conclusions I'd like to hear your experiences or analytics to this subject. For which browser platform do you design for? What do you tell your clients when they ask you this question?