Responsive Design

All the rage these days is about responsive web design. There was even talk of it last night at our monthly WordPress meetup. I have committed myself to trying to incorporate some form of responsive design in all my web projects moving forward.

What is responsive design?

Typically, sites are thought to be responsive when they automagically detect the screen size (or more importantly the browser size) of the device viewing the site. This happens through some CSS/Javascript magic that I won’t go into here. If you have poked around on the internet using a smart phone, I am sure you have seen the difference between sites with small screens in mind and ones that aren’t. 

Typically the way I approach responsive design is by setting up break points in my design. For example, screens smaller than 320px wide get  different view than screens larger than 1024px wide. Of course there are many breakpoints in between too.

Why did/do I do it this way?

The best answer I can give is that is what I thought best practices dictated. Like most other forward thinking web designers/developers out there, I read A List Apart. Not as often as I probably should, but from time to time.

Last night, I was reading an article about responsive design that got me thinking. Which can be a good thing or a bad thing. Ask my wife!

What the author posits in the article is somewhat revolutionary for me. Too bad I missed it three months ago when it was first published! I has always read that best practice for mobile meant giving the user a diminished experience.

There were reasons for this diminished experience. Some people said limit content (especially images) to increase load times or leave out items that may be hard to see or rendered irrelevant on a small screen. There are other reasons I have found too, and they all seem convincing. Limit content, but <- “BUT” give a link to the larger desktop site too (usually in the footer). 

This is how I proceeded with my last two designs. That big “BUT” should have stuck out in my head but didn’t. Karen corrected that. You see, these days people are looking for all kinds of information from their mobile phone or tablet or whatever. They need and want this information in an easy to read format no matter what device they are using. This means not having to switch over to the desktop view to find things that may be relevant to them. I have been that frustrated guy. I want some piece of information that is available to a desktop user, but I am not at home. I am out and about and using my iPhone. Then I have to switch to desktop view and pinch and zoom and tap and hunt on a viewport that is too large for my device. 

No More.

I am not master developer, but I am now committed to giving all content no matter the size of the viewport. Besides, if the content or design element isn’t needed for a mobile device, is it needed at all?

I am anticipating two upcoming personal projects that will make use of this new found philosophy. Stay tuned.

Type Design Project 2 – Completion

Last night I finished up working on my second project for Type Design. As you may recall, we were to pick fonts that somehow illustrated the names of five historic places. My final cut came down to Eden, Timbuktu, Taj Mahal, Stonehenge, and Avalon.

Timbuktu and Stonehenge gave me the hardest time. I found a font I loved for Timbuktu really early on in the process. The problem was when I went to add some decoration. My professor suggested I add an architectural element between the “b” and the “k” in Timbuktu. Researching Timbuktu’s architecture left me with some very sad looking results. The buildings aren’t grand ornamental places like the Taj Mahal. They are mud squares with some turrets. I did add an element, but after much fuss I still was not super happy with the results. 

Stonehenge wasn’t as bad. I added in a light shadow to the letters and some “grass.” I was pretty happy with the end results on this one. Could have been better, but not bad.

Eden is probably my favorite. It went a little different direction than I initially anticipated, or even the look of my second go. Initially, I wanted to place a stylized leaf under the word mark. The professor didn’t like that idea. He thought incorporating an apple would be better. I put it in the second “e.” First I tried just making that “e” red and putting a stem and leaf on top. He didn’t like that either and suggested I put in an apple with a bite out of it. So that is what i ended up with. My wife didn’t like the roundness of the apple, but I think it works in this context. 

Glad this one is behind me. Now… onwards!

eden

avalon

taj-mahal

The remaining two had some hand drawn elements, and I did not have time to scan them before submitting them to the professor. I will get those uploaded once we receive our grades.