Feb 06 2013
Feb 06
Help with browser testing

I'm excited about the future of web design/development. 

  • Screen-size agnostic approaches like responsive design using media queries. 
  • High resolution graphics. Apple has branded this high resolution display as a "Retina" display. Other manufacturers are beginning to come close to the same resolution level. No doubt, we'll only see increased resolution going forward.
  • CSS3/HTML5 now in the mainstream.
  • Hosted fonts (Google Fonts, Typekit, etc) are becoming more common and higher quality.

Enter the scary part

The process of including IE7 and now even IE8 in my workflow feels "post war" and not current, modern or exciting. I remember the beautiful day when I stopped supporting IE6 a few years ago — the world was full of CSS promise.

But over the last few months, I've had several projects in which the compatibility process got out of control.

  • There are compatibility modes in IE 10 (and 9 and 8) that cause even modern Internet Explorer to behave like IE 7.
  • Windows XP and Windows 7 have different rendering engines for IE 8. 

On the desktop side, we currently test on: 

  • Win XP: IE 8, Firefox, Chrome
  • Win 7: IE 8/9, Firefox, Chrome
  • Win 8: IE 10
  • Mac: Firefox, Chrome, Safari.

We also test multiple mobile and tablet screen sizes and orientations.

Now, we introduce Retina graphics. At a minimum, that affects mobile and tablet testing. With Apple now selling Retina laptops, I need to consider when to start developing and testing for this audience as well.

Retina graphics introduce more work. I have to either create a low and high resolution version of every graphic or I have to create a high or medium graphic and use CSS to resize the graphic down to the low resolution version (this would increase load time for the page).

What should I do?

I am really at a loss. There are several conflicting arguments in my head. Here are the voices I hear … which should I listen to?

  • Various IE compatibility permutations are outliers. Don't worry about outliers, develop for anything over 90% usage in analytics.
  • I have corporate clients with various compatibility modes and their internal employees will be what I consider outliers. How can I allow it to be broken for them?
  • Sometimes I can ask a client to correct their compatibility mode, but there are always clients where that isn't possible or practical.
  • Wait for Retina graphics until usage is mainstream, or develop in a future-proof manner. It is important to begin incorporating Retina graphics now so my sites aren't outdated in a year.

Please chime in with your perspective. I learn much from the Drupal community.

[Image: Wikipedia]

Jan 27 2012
Jan 27
Leave Arial and Times in the past -- @font-your-face to the rescue

If you are a graphic designer or Drupal themer, you don't need to be stuck using Arial on your website; you can easily use a great typeface from one of several providers and implement them using a Drupal module called @font-your-face.

Web font providers have packaged up thousands of fonts for use on the web and have taken care of the licensing issues related to the copyright for each font.

Since web fonts require a special license, you won't find every typeface you may use on your computer. Various providers also vary in cost — ranging from free up to around $10/month. The most common cost is around $7 per year — pretty inexpensive.

It isn't difficult to implement the code from these providers in your theme, but I like the simplicity and administrative interface that the @font-your-face module provides.

The module currently works with the most common proviers: Typekit, Google Fonts, Font Squirrel, Kernest, Fontdeck, and Fonts.com. Once installed and configured, you can restyle elements of your site under the Appearance menu. You can browse or search for the desired font, then apply it. When you apply the font, you can choose which HTML or CSS selector for the font.

  • I love being able to expand my selection of typefaces — take care, however, because I have found a number of fonts are not properly configured to work well in IE 7. You will know if it isn't working, as the type will look rough and difficult to read. This small issue won't stop me, though! I love to have beautiful typography on my site.
  • Each font and attribute is usually a separate file that is downloaded to the browser.  If I only change the font of the H1 tag, then I'm fine. If I decide to break design rules and use five different fonts with normal, bold and italic of each, I've just added 15 good size files to my page load time. Needless to say, less is more.

More on enhancing your content

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web