Responsive Design (test your site on a lot of devices)

Responsive Design (test your site on a lot of devices)

Once upon a time, there were just desktop computers. Then laptops. Then phones. Then tablets.

Today your portfolio can be seen on all kinds of devices. Medium screens. Huge screens. Tiny screens. If you design your portfolio for any one type of screen, it might be a poor or difficult viewing experience on a different screen.

Responsive Design

The term Responsive Design refers to a website designed to adapt to different screens and provide a strong user experience on all of them. If you're coding your site yourself, then you're responsible for this.

With most of the platforms most of you are using in our ePortfolios for Artists class, the "theme" or "template" designer has probably already taken care of this for you. But considering that it's your portfolio, and by extension, your career, and perhaps your rent money, it's still on you to check and make sure your site can be viewed, and viewed well, on many devices.

Things you should check

The (not so long ago) days when a website would look totally different on Windows or Mac, or on Firefox vs Chrome, are mostly behind us. But to be safe, you should still check your site in as many different viewing conditions as possible:

  • Devices: Laptop & Phone. Also: Desktop & Tablet
  • Browsers: Chrome, Safari, Firefox, MS Edge
  • Operating Systems: Win, Mac, iOS, Android

And any other way you can check your site! If you're in a computer lab - a School of Art Lab, or the campus Spidel Center or Horn Center, jump on a machine and pull up your site. If you're having lunch with a friend, borrow their phone and check your site. It will probably look the same on their Samsung as it does on your iPhone, but it's really good to be sure. Plus maybe you can get your friend to look at your work! :)

Bad things can happen

A long time ago I created a website for a client. Back then I only used Macs and had never owned a PC. When the site was ready I tested it on several different browsers on my Mac. It looked good so I sent it to the client, who looked at it on Firefox on his PC. It looked good to him too. So my client sent the website to his client.

We'd already tested the site on Mac & PC and on several different browsers. But the one thing that neither Ralph or I had done, is to look at the site with Internet Explorer on a PC. And back then, IE on PC was the #1 web browser in the world. You can probably already guess that when my client's client looked at the site on IE on their PC, the whole thing fell apart! (the site used HTML tables and IE rendered them differently than other browsers)

The week after that I went out and bought my first PC. I realized that if I was going to do web design, I needed to be able to test on more platforms.

It's easier today and many things do look the same on different platforms. But again, you need to check. You don't want to lose out on an opportunity because someone can't see your work or the presentation is somehow messed up.

example of a website being displayed on Desktop, Laptop, Phone & Tablet devices image: Ethan Marcotte's website from

Subscribe to