Dev Diary: ITP Day 7

Today, I have decided that I will work on styling and debugging any issues in the various browsers. Specifically, an issue that I ran into when I decided to change the way the search box displayed. The new search box has styling issues in both Firefox and IE. Debugging and fixing styling issues is usually painful but with a little help from Windows (the cause of all of the problems in the first place), IETester and the Firefox Developer Tools, I should be able to come up with a satisfactory solution to the search box issue.

5/28 - Day 7

The first thing I did this morning was update the iOS app icon to match the iOS app. This is the icon that is used when someone adds the website to their home screen.

1
<link rel="apple-touch-icon" href="http://inthepanhandle.com/images/ui/App-Icon.png">

Search Box

In using the site, I had the idea to change the focus behavior of the search box. The initial design simply displayed white search text over the gradient background. I thought it might be more interesting to instead change the background of the search area to white with maroon text on focus. I also added a .2 second css transition to the background change.

1
2
3
4
5
6
7
8
9
10
11
.search_txt:focus {
     border: none;
     background: #fff;
     border: none;
     color: #6d0019;
     outline: none;
     -webkit-transition:background .2s ease-in; 
     -moz-transition:background .2s ease-in; 
     -o-transition:background .2s ease-in; 
     transition:background .2s ease-in;
}

Testing

Testing a website in various browsers is always the most difficult and frustrating part of designing for the web. The first thing I try to figure out is which browsers do I need to test for? This can be determined by using something like Google Analytics (you do have an analytics package installed, right?) to see which browsers (and versions) are most popular among your audience.

If traffic showed that 50% of visitors were using IE6, I’d probably shut the site down and run an ice cream truck.

Here is what I found about InThePanhandle.com. These stats make up all visits for the 2013 calendar year. I didn’t feel like it was necessary to go further back than that.

  • IE - 33%
  • Safari - 20%
  • Firefox - 16%
  • Chrome - 14%
  • Android - 11%
  • Safari Mobile - 3%

Browser Version Data

For me, the Internet Explorer data is most important as it is often costly to support older versions of IE.

  • IE 9 - 50%
  • IE 8 - 32%
  • IE 10 - 12%
  • IE7 - 5%
  • IE 6 - .19%

Thankfully, most of the traffic comes from IE 8 and above. Not because I love IE, I’d much rather users use Safari, Chrome or Firefox, but newer versions of IE are easier to support than older versions. If traffic showed that 50% of visitors were using IE6, I’d probably shut the site down and run an ice cream truck.

For testing IE, I use the IE Tester from DebugBar in Windows 7 (via Parallels). It’s a free web browser that allows you to run the rendering and javascript engines of IE5.5 - 10 in a single app.

Search Box Styling Issues

As you can see in the image, I have compared the header - specifically, the search field - in Safari (rendering properly) with Firefox and IE9. Both Firefox and IE have issues with padding which are more prominently seen when you click on the search box and bring it into focus.

I spent some time working with padding, margins and line-height and finally came up with a combination that worked well in each. As you can see in the image below, the search icon and placeholder text (I’m looking for…) are aligned for the most part. The icon in Safari is a couple pixels higher than I would like but for now, that’s fine. Eventually, I may clean it up by either massaging the CSS a bit more or by using something like CSS Browser Selector.

Search Box Styling Issues Fixed

That took a lot longer than I would have liked but I’d rather take the extra now to make sure it works than to have to deal with it later when the codebase is more complex.

⇠ Next Article Previous Article ⇢

About The Author

G. Brad Hopkins's avatar
  • G. Brad Hopkins
  • About Me: I bought my first computer - an Apple Performa 6320 - when I was in college and have been building websites ever since. These days I spend most of my time writing code and helping to bring interesting projects to life.
  • @gbradhopkins