Being “Responsive-able”

Monday, November 10, 2014

Here’s a shocker: we check out the web on our phones these days. *gasp*

We all browse the web this way, but for many, we seem to forget that when building our own websites this small pocket sized computer is the screen with which our clients will first see our website.

I’ve checked out many artists’ websites on my phone and I was shocked at how many are still stuck in the pre-iPhone days. Some still had Flash. Some had designs that assumed I had a 21-inch monitor.

We should be think about how mobile devices will display our work. The newest coding tech allows us to build adaptable websites.

The coding term is “responsive,” since the website literally adapts its layout according to the screen on which it is being displayed. Loading on an iPhone will show a different layout than on a desktop.

We should be responsible artists and think about responsive design very seriously. I’m dubbing it, being “responsive-able.”

As a case in point, below is the “above the fold” screenshot of the site I built for Angie this past week, called Digital Diva.

main-full

Notice how I’m able to keep the design clean and make use of large images, bold colors, and let the viewer scroll at their own pace. This isn’t a terrible design for an iPhone, but the text below “services” would be almost impossible to read. And the links at the top would be pretty small, too. So let’s hide the links at the top into a menu that is similar to a mobile phone app design (the three lines we all recognize). And let’s reformat the layout for the iPhone:

main-iphone

Here you can see how the flow fits the form much more naturally. Here are two more desktop/iphone layout comparisons:

timeline-full

timeline-iphone

In the above image, you can see how the text alternates sides of the timeline, making full use of the larger screen. In the iPhone version, the timeline images are left justified and the text is on the right, making a smoother experience for the viewer.

The past several websites I have designed all had this in mind. The first that I really dove into responsive design was for my iPhone app, Paper Tree, which was a relatively simple, one page site. This was followed up by a more in-depth rebuild I did of my company website, Digital Blacksmiths. This last site was a challenge since I had multiple, animated images and text on the screen.

And these sites are not all hand coded from scratch. Each one of these examples was built using WordPress as the main engine and then using a skeleton framework, called “Bootstrap” which allows for the responsive part to be built in.

Now, I still had to determine how that layout would look on a tablet, phone, and desktop, but at this point, I can focus on the design and less about the code. It’s sort of like baking a cake with flour that you already have instead of growing the wheat and grinding it first.

The bulk of the design is done in CSS once the Bootstrap framework is created. This allows me to play very easily with colors, fonts, and grid layout in a simple text editor. I happen to use an app called Coda, but any text editor and FTP program will do the job.

I can determine exactly at what point the menu ‘clicks’ from being all text to the collapsed version with the three lines. And while I didn’t do it for these sites yet, I can also focus on having the smartphone layout use more compressed images instead of the full sized images, saving the viewer’s bandwidth.

So whether it is a personal blog, a one page business landing page site, or a full fledged CMS driven website, think a bit about how your site will be viewed on a mobile device, since in all likelihood, that’s exactly where it will be viewed.




Hi. I'm Scott Sullivan, a slave of Christ and husband to my awesome wife Angie. I'm an artist and writer, living in the beautiful countryside of Lancaster, Pa.

I recently published, Searching For Me, my first memoir. It’s about my adoption, search for my biological family, and how it affected my faith. Read about it here.