So I’ve been putting more effort into Logan Apps recently. I came to the realization that I would need to update the website for the apps. As much as I would love to just write apps all day, this is one of those necessary evils that really must be done. The current site was a template that didn’t really work well on mobile (which is really bad considering my target audience).
I did the logo on my own.
I hadn’t done a website from scratch in a long time. My website design skills are outdated. Someone had recommended oDesk as a place to put out jobs. He gave me the name of a person and I looked at his work and it seemed great. So I hired him to do the site.
He asked for a design reference. So I made sketches of what I thought the page should look like. I included descriptions and the requirements. I then got drafts of the actual layouts (where he takes the design and turns it into a picture). It looked pretty good, but some of the critical things I had in my design diagram didn’t exist. For example, there are two tiers of apps on the site. Featured apps are the more complex ones, and then other apps which may be smaller apps that have a very specific purpose. In early drafts, there was no description available for the “other” apps. A single picture was the only way to convey what the app was about. Of course, that doesn’t work, so I had him change things to how they were in the design document.
The individual app pages are suppose to serve as the marketing tool for that particular app. It’s meant to be able to stand as a standalone page. In the initial drafts, the header on the individual page still say “Logan Apps” along with the placeholder for the Logan Apps logo. No where on the page did it actually have the title of the app or the app logo. So yet again, we go back to the design document and make it look like that.
Once the layout was agreed upon, then the conversion started moving to actual website code. The first draft I got had featured apps all on a single line. And if I had more than 2 featured apps, the others would be hidden and available if the user scrolled. This wasn’t standard scrolling either, but clicking on a button. This did not work at all on the iPad since there is no mouse. The main bit of information I wanted to provide to the users was hidden! Ugh. So let’s change the design……yup, we went back to the design document.
At this point, it’s getting pretty frustrating. I had some corrections that I’ve pointed out a few times and finally just give up on because I know enough web programming to fix them on my own. I point out some of the major things he’s missing from the design document. For other things, I just ensure that I’m able to do them on my own. I get the final draft, look over it for any major bugs, don’t find any, accept it and go to actually implement the site.
Along the way I find some more issues. For example, he had the design done so that if the description was long, it would simply delete the extra text. This is also bad because if the user had their font change, additional text would just be deleted. So I fix it up to not do that. I can’t figure out in what circumstances people would say, “Well, if that information doesn’t fit, just delete it, it’s probably not important.”
The site had some issues with Chrome, and it turned out it was because he was trying to resize images using Javascript instead of CSS. I have no idea why he was trying to do that using Javascript. Luckily, I know enough to be able to rip it out and fix it.
There’s still some things I need to fix. The screenshot area doesn’t follow the requirements outlined, and they also have a bug with how they are displayed sometimes. I’m hoping I can fix this by just making the screenshots previews “pre-shrunk”.
What could have been done better?
- When the person is looking at the description, they should’ve written a list of what I was looking for. I don’t think he referred back to this much considering some big bullet points were missed. Perhaps I should’ve made a checklist of the requirements and given him that to mark off.
- Use my existing information. This wasn’t completely from scratch. Use the existing things I have like screenshots and graphics to see how things should’ve worked. I think this would’ve pointed out some major shortcomings he had in his designs had he done this.
- Follow the design document! Or if you want to change things, that’s fine. But perhaps run it by me first. Don’t spend hours doing something that’s fundamentally wrong. This was probably the most frustrating thing.
- Clean up the code. Digging through the code, I did find some things that were “dead code” (stuff that would never be executed). It’s probably from some iteration, but leaving it in makes things very messy when trying to do an update.
Could I have made that page on my own? Probably not. But what I have now works and it’s better than before. I’ll probably try to relearn HTML sometime. I do need to invest some more time into it to fix things that should’ve been done. But now I know what things to look out for next time I need to send something to a 3rd party.
Do you have trouble handing things off?
