Skip to Main Content

go to Indiana University Indiana University


See How Your Website Looks Cross-Browser and Cross-Platform for FREE

Generic Website Design Template

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?

Use http://browsershots.org/.

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:

  1. 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.
  2. In a web browser,  navigate to: http://browsershots.org/

Once the BrowserShots page loads,

  1. Type in the URL to the page you uploaded to the server
  2. Indicate the browsers and operating systems you want to see your page displayed on
  3. Select other attributes, like screen resolution
  4. Click the submit button at the top of the page.

BrowserShots homepage showing options

The wait to see screenshots of your page might be awhile, so go grab a cup of coffee.

The Results

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.

Screenshot of Browsershots Results page, with thumbnail images of your page in the browsers you selected

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.


10 Responses to "See How Your Website Looks Cross-Browser and Cross-Platform for FREE" to “See How Your Website Looks Cross-Browser and Cross-Platform for FREE”

  1. David Poindexter Says:

    Amy, this method is very widely used; however, it is really only good for testing your layout and CSS.

    If you want to test JavaScript/AJAX behavior though, only a natively running browser will do. Now that you can dual boot Windows on Mac, I run Windows XP and Windows Vista via VMWare Fusion on the Mac.

    That way, I can test all the browsers on Mac, all the browsers on Windows, and I also have my wife’s Blackberry, my iPod Touch (like the iPhone), and my HTC Touch Pro running WindowsMobile close at hand to test any functionality on nearly any platform.

    The only one I’m missing is Symbian on the Nokia’s…

  2. Amy Neymeyr Says:

    David – You are absolutely correct in that what BrowerShots does is take virtual screensnaps of the web page as they would _appear_ in various browsers, so no interaction with the page is possible (so, for example, it is not possible to use BrowserShots to see how your links will look when the user has their mouse hovered over). For folks who are newer to the web development game and are unfamiliar with the term “JavaScript/AJAX”, what David’s referring to is the use of a client-side scripting language called JavaScript to achieve a richer and faster user experience than with just XHTML and CSS alone. For an example of what JavaScript can do on a web page, see this example of Lightbox 2.

  3. Rules Says:

    Nice love this blog

  4. Jessica Longel Says:

    Hi, loved the post but quick question…I had a little difficulty loading your page – I use firefox, do you think this was the problem…Bookmarked :-)

  5. Amy Neymeyr Says:

    Hi Jessica –

    Thanks for the feedback – can you describe a little more what the problem was with loading the page? Did it take a long time or did you see an error of some kind? Let us know – we’d love to help!

  6. satrap Says:

    Thanks for the post, good info. its hard to find useful information these days. every blog or site you go to is just copy posting the same old content just to be “blogging”. its refreshing to hear something different, no matter the topic. anyway thank you.

  7. James Icann Says:

    Hi Amy,

    Thank’s for sharing this great tools for webmasters, it helps a lot.=)

  8. steve Says:

    thanks for these tools , very useful – another good tool i found like this only does versions of IE but is very fast

    http://ipinfo.info/netrenderer/

  9. Best Hand Tools Says:

    It’s now 2 years later and technology has raced ahead. Browsers have become smarter and web design has become incredibly easy. The debate now stands is how your website will look in MOBILE devices….not just standard browsers

  10. Sarah - Ayoworld Says:

    Thanks a lot for sharing, I just checked it for my website and it looks same on all browsers hurrayyyy!

Leave a Reply

 

Get Training Tips via RSS Subscribe to Entries feed or Read Comments via RSS Subscribe to Comments feed.