Design First, Then HTML-ize
If you’re new to the web design game, developing a new website (or redesigning an old one) is much like starting a new job: there are a thousand small details competing for your attention and its difficult to know how to proceed in a relatively efficient fashion.
One typical workflow, especially for smaller sites that only have static HTML pages, is to design the appearance of the site first. Some folks sketch designs on a pad of paper, others use a graphics program like Adobe Photoshop or Adobe Fireworks to lay out how the site will look. In fact, there’s been more than one great website design where the impetus came from cocktail napkin scratchings at a Friday night happy hour.
The Challenges of Translating Your Design into HTML
Regardless of the method, at some point, the designing phase must end, and translating the design into HTML pages must begin. And therein lies the potential for much frustration and consternation – what is possible with Renaissance-age pen and paper can be difficult or impossible to achieve with space-age web browsers. For new web designers who have a background in designing for print, the road is made more difficult because the most elemental aspects of design that are assumed in print (oh, you know, like choice of font and the font size) cannot be assumed at all when designing for the web. “Wait a minute, ” you wail. “Is this really true? Do I really have such little control over how my pages look?” In a word, yes. Here’s why:
- Web browsers, much like snarky teenagers, vary widely in how they choose to interpret your commands. What looks great in Firefox may look like a train wreck in Internet Explorer on the Mac.
- End-users may be viewing your web pages on an ancient computer with a tiny monitor, or via their iPhone, or via a giant LCD screen.
- End-users, via their browsers, can override many of your settings. You may intend your content to display in 12 pixel Georgia, but my great-aunt Betty can set up her browser to display the content at 44 pixel Verdana. And if you didn’t account for that, great-aunt Betty will see a horrid-looking page and never send you cookies for your birthday ever again.
A Solution for Cross-browser, Cross-platform Checking
So, what to do about this state of affairs? A simple adage: test early and test often, across as many different browsers, browser versions, and operating systems as possible. Don’t spend hours and hours hammering away on your HTML pages and then test, as the problems you discover during testing will necessitate more hammering and undoing of what you already spent hours doing. But how do you test across all the various browsers and platforms there are?
Unlike its commercial competitor BrowserCam, BrowserShots is free (albeit slow, depending on how many other folks are using it.) Here’s how to see what your web site looks like in a variety of browsers and operating systems:
- Upload one of your HTML pages to a web server; don’t forget to also upload any needed images or CSS files. Make sure to note the URL.
- In a web browser, navigate to: http://browsershots.org/
Once the BrowserShots page loads,
- Type in the URL to the page you uploaded to the server
- Indicate the browsers and operating systems you want to see your page displayed on
- Select other attributes, like screen resolution
- Click the submit button at the top of the page.
The wait to see screenshots of your page might be awhile, so go grab a cup of coffee.
When the results come up, BrowserShots will display a thumbnail-sized image of the page as it will be rendered in the various browsers and operating systems you selected on the first page. There will also be a link to download the images so you can look more closely at various areas.
In the above screenshot of the BrowserShots results page, there are two thumbnail images in the middle that look like pure text, with no images. BrowserShots sometimes grabs a screenshot of the page before it actually finishes loading. In these cases, the problem is not with your page design, but BrowserShots. If the other screenshots look as you would expect, don’t worry about the ones that look like this and move on.