Great Blue Heron with Fish, Bosque del Apache National Wildlife Refuge, San Antonio NM

Sandhill Crane Landing on the Pond

Bosque del Apache National Wildlife Refuge, San Antonio NM

January 10, 2013

On Designing a Simple Elegant Website

For this website I wanted a simple and elegant design to show off my pictures and my writing. The goal was to come up with a design that would look good and work well on portable devices as well as on larger screens, a responsive design that adapts to work well regardless of screen size.

Simple Elegance

“When you first start off trying to solve a problem, the first solutions you come up with are very complex, and most people stop there. But if you keep going, and live with the problem and peel more layers of the onion off, you can often times arrive at some very elegant and simple solutions. Most people just don’t put in the time or energy to get there.”

— Steve Jobs

I can vouch for that - simple takes a LOT of time and energy!

Controlling What We See

Ideally the web designer wants the viewer to see what the designer sees. Designers want their work to look just the way they designed it to look. Until recently most sites were designed for computer screens but those designs don't work well on the smaller screens of mobile devices.

Designers for the web traditionally tried to control the user experience by carefully locking everything into blocks and boxes that would look the same on any web browser. That approach worked fairly well until the proliferation of mobile devices when the number of discrete screen sizes and resolutions being made soon overwhelmed developers with all the tweaks and workarounds needed to keep sites looking "just so" on all those different browsers.

The latest approach to the problem is to use some recently developed responsive design tools and techniques to serve up content which automatically adjusts to fit whatever browser the viewer is using. I’m trying to do that here in a simple way.

Less is More

I’m taking a less-is-more approach, trying to let go of as much control as I can, only overriding the viewer’s browser defaults where it’s necessary to arrive at a design I like that hopefully works well on any screen.

Getting there took a lot of tweaks and iterations but I’m happy now with this design. While I don't have access to many devices to test the results I think the site should look pretty good on most devices, including yours I hope.