I’ve been planning a major redesign of InThePanhandle.com (ITP for short) for most of the year. Client work, and a fear of trying to eat an elephant this large, has prevented me from getting started with this project. I’ve decided that I need to set reasonable goals to finally start (and finish) this project. I have decided that an hour a day is a reasonable, accomplishable goal to start with. The hour can be dedicated to any part of the project whether that be sketching new logo designs, wire framing page layouts, writing code or researching upgrade options for ExpressionEngine, whatever, as long as it is an hour spent on the project. I have also decided to create a diary for the development of the project which will help me from day to day to see what I’ve done, where I’ve had wins and where I’ve struggled. In addition to being motivating, I’m hoping it will help create logical “next steps” or, for lack of a better term, rhythm. Additionally, I plan to share helpful links, tools and code that I use during development.
An hour a day to work on InThePanhandle.com.
When I set out to redesign InThePanhandle.com, I started by thinking about the primary goals of a user who visited the site. What do they want. I looked at traffic and I came up with a short list of actions / objectives the typical user.
- Reading - whether it be articles, event information or reviews.
- Finding a business
- Finding something to do
Of course there are other things that a large percentage of users do on the site; download menus, reviewing businesses, saving articles / events, etc. But I really felt like the three items listed above were the most important parts of the site and they had to be done right.
With that in mind, I decided that readability and findability were the two most important aspects of the redesign. The third most important aspect, which is derived from analyzing data and anticipating future site usage, is mobile. The site has to perform those tasks well on a mobile device. Specifically, a mobile device that fits in your pocket.
The following links were helpful in debugging and inspecting the mobile browser.
- Remote Web Inspector via Safari (http://moduscreate.com/enable-remote-web-inspector-in-ios-6/)
- Setting max image width (http://davidwalsh.name/image-max-width)
- iPhone 5 CSS Media Query (http://stackoverflow.com/questions/12539697/iphone-5-css-media-query)
- Typekit Mobile for iOS Enabled.
Items to explore
- Full width images when in landscape mode
- Activity Feed module for EE
- Text is very readable on iPhone
Link of the day
- Mobile specific layout for the article page. Article: Nov. 16th Antietam National Battlefield Hosting Genealogy Specialist
As a side note, I’m also going to share tools that I’m using for both development and the keeping of this diary. I’m writing the diary entries in Evernote, my writing tool of choice, but I’m writing it in Markdown. I’ve been wanting to really learn Markdown for some time, as I think it will make me more efficient at conferences where I tend to take lots of notes very quickly and then publish them to the web shortly thereafter. Kind of like a live blog, but slightly delayed.
I am then converting the Markdown to HTML in Espresso, my IDE of choice. - See update below.
I have found one issue with using Evernote to write Markdown. When I copy and paste from Evernote to my publish page, a bunch of line breaks are added which have to be removed. On the plus side, I have found SmartDown, an ExpressionEngine plugin that converts Markdown to HTML when I publish the page. This allows me to skip the step of converting the Markdown to HTML in Espresso. Efficiency!