A blog by the Brick Factory The Brick Factory
IE7 = Awful

10 popular websites that look awful in Internet Explorer 7

If you ask a web developer what they think of Internet Explorer they will probably tell you how awful it is in very colorful language.  If you ask them specifically about Internet Explorer 7 they will either burst into tears or punch you in the face.  You see, over the last four years that web developer is likely to have wasted hundreds of hours implementing hacks to make theirs sites work in IE7, which doesn’t support many modern web development techniques.  That pain runs deep.

It didn’t have to be this way.  IE7 was originally released in October 2006 and a new version hasn’t come out since April of 2009.  If it followed a normal adoption cycle it would have been forgotten years ago.  But due to some poor planning by Microsoft and the ubiquity of Windows, IE7 has shown amazing resilience.  Sort of like a cockroach.  IE7 maintained 5-10% market share for years after its last release.

Over the last year IE7’s market share dropped below 1% and developers finally feel free to ignore it completely.  However I still get the occasional client that requests IE7 compatibility.  As a way of helping make the argument against IE7 compatibility, I’ve made a list of some popular websites that look awful in Internet Explorer 7.  If these folks can completely ignore IE7, can’t we all?

(1) Tumblr

Signing up for Tumblr is a little challenging in IE7.

tumblr-ie

(2) Gawker

The entire Gawker family of web properties (Deadspin, Jezebel, IO9, etc.) look completely awful in IE7.  God bless them.

gawker

 

(3) Mashable

It should come as no surprise that Mashable’s cutting-edge, scroll-tastic design has problems in the ancient IE7.

mashable=ie

 

(4) MSNBC

You would think that a site operated by Microsoft as recently as last year would work in IE7.  Not so much.

msnbc

(5) Atlantic

Like many, The Atlantic includes a note telling you very nicely to install a real browser.

atlantic

(6) Salon

The IE7 version of the Salon website skips the whole site branding/navbar thing altogether.

salon

 

(7) NBC News

Users of IE7 are probably quite used to seeing overlapping text like this.

nbcnews-ie

 

(8) YouTube

Before you are even allowed to browse YouTube in IE7 you get a giant warning saying that your browser isn’t supported.  Site looks ok, with the exception of none of the video thumbnails being visible.

youtube-ie

 

(9) Twitter

Twitter appears to be showing the mobile version of their site to IE7 users.

twitter-e

 

 

(10) Healthcare.gov

This one is sort of piling on, as www.healthcare.gov still functions pretty well in IE7.  But if you look at the screenshots below you’ll see the bottom half of the homepage is pretty different in IE7 when compared to Chrome.

Internet Explorer 7

healthcare-ie7

Chrome

healthcare-gov-chrome

1,000 programmers can’t fix healthcare.gov in a month

Like many folks in the DC web development community, I’ve been reading with interest the horror stories about the launch of healthcare.gov.  Just yesterday new revelations came out that showed just how complicated the site truly is and just how deep the problems are. 

As a web developer, my reaction to the situation is a bit different than most people’s.  I mostly feel pity for the people who built the site and who are stuck fixing the problem.  Now I don’t feel sorry for the management at companies like CGI Federal, who are likely getting rich off the site’s $174,000,000 price tag.  But I do feel sorry for the web developers that are in the trenches right now working to fix the site’s problem.  From experience, I can tell you they are in hell.

Based on what I’ve read, I’m also extremely pessimistic that the “tech surge” ordered by the Administration will get all the bugs with the site fixed by the end of November, as the Administration has promised.  

The truth is that throwing more resources at healthcare.gov isn’t likely to solve the problem, at least not in the short term.  The new developers and project managers brought in to help will need time to familiarize themselves with healthcare.gov’s source code.  Developers and project managers already sourced to the project will have to spend time training new folks instead of fixing the problems themselves.   The new resources brought on may actually slow things down initially due to the complexity of integrating them into the work flow. 

Perhaps the bigger problem with the one month timeline is that it assumes that healthcare.gov as it exists in its current form can actually be fixed.  Given its rumored 5,000,000 lines of source code, healthcare.gov could be a spaghetti code scenario that requires a complete rewrite. 

You don’t fix a site that has 5,000,000 lines of code by bringing in more people to write more code.  Human resources can’t be scaled the way servers can be.

The whole situation reminds me of this quote from computer scientist Fred Brooks about throwing resources at a project.

baby

For the developers working on the project, I really hope healthcare.gov is stabilized by the end of November.  But based on my experience, I think we’ll be hearing about bugs on healthcare.gov for many months beyond November.  The people making that November promise are the same ones who gave the go ahead to launch a disastrously buggy site by October 1. 

large

Motorcycle Photos and the Art of Branding

We are in the process of redesigning our Brick Factory website.  It has been slow going.  Client work competes for resources and we tend to over think everything when doing work for ourselves.  But we are getting there, and expect to launch our new site before the end of the year.

As we planned the redesign I took a look at the websites of design and development firms from around the world.  It was inspiring.  Lots of firms have taken the time to create unique and beautiful websites.  Browse through some of them here.

However, as I did my research one thing that struck was the sameness of many of them.  In particular, I was bothered by the use of client work as the primary company branding.   Let me explain.

Design Firm X will have a client that has awesome photographic resources – say a company that builds motorcycles.  So when I visit the homepage of Design Firm X, I’ll see giant, sexy, professionally-taken photos of people riding awesome motorcycles.  And that is pretty much it.  The portfolio is the brand.

While sites that take this approach often look great and are likely effective, it sort of bothers me.  It feels like cheating. Your site is one of the few chances you have to do whatever you want.  Make your own brand, and don’t just showcase the brands you’ve helped create for your clients.   Take your own photos.  Create your own art.  Write your own copy.

Make it about you.  Tell me your story.

So as part of our site redesign we are developing supplemental branding elements that will be sprinkled throughout the site.  Below are snippets of two such pieces of art we have created.  The first is a factory illustration that is a primary branding element on our homepage.  The second is a Hunter S. Thompson inspired seal we will be working into a few spots.  Much more to come…

 

factory1

1378185_446869582088388_53778580_n

Responsive Design

Screen size diversity and the case for responsive design

The increasing ubiquity of smartphones and tablets has lead to exponential grown in the percentage of visitors accessing the web from mobile devices over the last few years.  In a study of the mobile statistics of Brick Factory clients we found that site visits from tablets and smartphones has doubled every year the last three years.  20% of the visitors to our client websites now come from smartphones and tablets.

Given these figures, the question is no longer “Should I optimize for mobile?” but “How should I optimize for mobile?”.

Traditionally, there have been two main ways to make your website mobile-friendly:

  1. You can create a mobile-specific template that is served to visitors who access your site from smartphones and/or tablets.  Essentially you are designing one site aimed at desktop/laptop users and another aimed at smartphone users.
  2. You can create a responsive design that automatically resizes the content based on the user’s screen size. The result is a website that is optimized for all devices, from desktops to iPads to iPhones. If you visit the website we designed for No Labels and resize your browser you will see the concept in action.

A few years ago option 1 was the most popular approach.  The iPhone was the dominant smartphone for web browsing and the iPad hadn’t really taken off yet, so creating a mobile template tailored for the iPhone made pretty good sense.

While mobile-specific themes are still a popular approach in some sectors, such as the news industry, I think it is safe to say that a consensus has formed around responsive design the last few years.  I think a big part of the reason for the move towards responsive design is the increase in the number of screen sizes you have to deal with now.  Check out this finding from our mobile study:

resolutions

The number of screen resolutions used to access our average client website doubled from 2012 to 2013.

There are a variety of reasons for the increase, beyond the simple fact that more people are using smartphones and tablets.Android has gained a ton of market share the last few years, and Android-based phones and tablets come in a variety of screen resolutions.   Desktop monitors are getting bigger and bigger – we are now seeing screen sizes as large as 2909*1606. There is more variance in the screen sizes for laptops then there used to be.

The diversity of screen sizes has made building websites much more complicated than it was a few years ago.  Two or three years ago you could design your site for a typical desktop size (say 1024*768) and create a specific theme for mobile.  And you were done.

Now?  You’ve got to account for visitors coming from screens both much smaller and larger than that 1024*768 target.  A site designed for 1024*768 may not look so good on a 1600*900 screen, much less one that is 2909*1606 or 320*568.

The increase in the diversity screen sizes has made creating device-specific themes impractical.  There are just too many resolutions to deal with now to create a specific theme aimed at a few target screen sizes. Responsive design is the most efficient way to deal with the increasing diversity with which people are accessing the web.

blog_art_mobile2

New Brick Factory Study: 20% of web traffic now comes from mobile devices

There  has been a lot of hype about the rise of web browsing from smartphones and tablets over the last few years.  The research firm IDC projects that by 2015 more people will access the Internet from mobile devices than from desktops and laptops.

This is all important stuff for us to follow.  But as big of a deal as these overall industry trends are, at the Brick Factory it is more important for us to understand what is going on in our own world of non-profits, advocacy groups and brands.  How is the move towards mobile impacting our clients?

In an effort to answer that question, we took an aggregate look at how mobile usage of the websites we manage (60+ sites) is evolving.  The results are eye opening.

We found that 20% of all web visitors are now accessing the web from smartphones or tablets, and that mobile visitors are doubling every year.

blog_image

The mobile web isn’t something that will come someday – it is here now.

Check out the full study.