When I first designed this site, responsive design was not as big as it is now. My main focus was getting a site dedicated to my interests in UX issues up and running as quickly as possible. After the big push to get it launched, I settled into the satisfaction of indifference that follows such endeavors. I knew that responsive design was the wave of the future, but it was not now for me at least. However, it was not long before the responsive design clarion bells of Luke Wroblewski and others clanged in my subconscious as I read various articles on the surge in mobile usage.
So I finally have taken a couple weekends here to update this site with a responsive design. The process I used started somewhat informally as it is a personal site after all. At first I thought I would use one of the well known frameworks for responsive design, either Foundation or Bootstrap. The design of this site has been kept very simple intentionally, and while the frameworks listed provide simplified templates they seemed bloated to me. The style sheets in particular just seemed monstrously large weighing in over a 100k even after being minified. Further, neither one offered the kind of mobile navigation I was looking for, which meant I was going to have to modify them. I then investigated several other responsive frameworks and templates. I could not find anything that really fit what I was looking for in a simplified format.
I decided then it would be best to do my own responsive retrofit. I have a local copy of the site running on my laptop and I started out by adding a mobile style sheet and simply began modifying classes to see how things looked. It didn’t take long for me to realize that I needed to focus only on the mobile layouts first and not worry about how things got screwed up in the larger format. The basic layout came together fairly quickly as the design is rather simple. I have done a lot of work making desktop designs flexible for the variety of screen sizes that could impact a user’s experience over the years so this was not that much different.
Of course Luke W’s words “mobile first” and the advice he gives sprang to mind and I ended up taking a long detour reviewing several of his articles and looking at the html/css code of his site. One of the first things I wanted to understand is if having separate media queries in the html made it so that the browser would not download the others. This turned out not to be the case and for good reason as the display would not adjust if you change the size manually on a large screen. I have kept the separate files for now as it is easier to tweak the design this way. The benefit of having a single css file reducing the number of server calls is not as critical to my low traffic site, but it is something I will do later nonetheless.
The major pain point came in doing the global navigation. I was planning to use jquery and figured this would be quite simple, but I had to write just a bit more code than I had planned to deal with some edge cases in the design that nobody would likely see or notice. The menu would hide when the screen was made narrow and then by using the toggle function it would appear/disappear on tap/click of the menu icon. However, it would stay hidden when the browser width was enlarged. The toggle was dynamically inserting a “display: none” to the div. So I could either write my own complete toggle that used a different method or do what I eventually did which was to write a function that detected the width and properly restored the inline-block for the larger width screens.
After working through all the interaction issues, I settled in on finishing the tweaks to the larger view that were broken by the mobile view. There are a few things I still need to clean up including; modifying the contact form for mobile, deciding if I need a tablet version (I don’t think I do), and adding/moving the search to the global nav in the mobile version. And of course cleaning up code and optimizing things a bit more. I am also working on some alternative page templates in wordpress for a new section I am adding in the future.
Go to the comment form