Updating the Interface

I have been busy, and frustrated, as I work on the worksheet generation app. And, unfortunately, I haven’t been adding new functionality or improving the existing functionality. At least, I haven’t been improving it from the point of view of how the worksheets are made. I’ve been working on how people make the worksheets.

This is what the app interface used to look like:

old-formattingIt really isn’t bad, it’s just very basic. I knew I’d change it at some point — I use this site more than anyone else, and I have an idea how I want it to look — but I wanted to focus on features.

Then, recently, I invited friends and colleagues to try the website out. And nobody seemed to understand what it did. I told them (in emails, in person) and they loved the idea, but the interface that seems obvious to me… well, it obviously isn’t.

I had an idea: I’ll make a sort of tour you take, before you can sign up, that will explain the functionality with screen-grabs. 

But, there are so many things on my plate, I know the chances of me making the same tour twice are not great. At least, not in the same year. So, logically, the interface should be changed.

CSS is hard!

The thing about CSS is this: you can  download templates (like I did for the landing page, from a great resource called Start Bootstrap), and I figured I could easily adapt the rest of my page to match it.

Wrong!

To be fair, I haven’t yet come across a CSS problem that, once I figured out how to articulate it correctly, didn’t have a clear answer somewhere. (Also, I love the resources provided by W3Schools, but hate their search functionality. Are they trying to make money there?) But, every step felt like an uphill battle.

Eventually, I got to a point where I was starting to be satisfied with the result.

Hosting static files on django is poorly explained!

I’m starting a list of things that were hard for me to learn about django, to eventually explain when I feel like I understand them. One thing would be the deployment to linode (remember that?) and another would be hosting static files.

After a lot of googling and basically blindly trying things, I’ve stumbled into a configuration that worked. But, for a while, it only worked on the linode site and not locally and I was too frustrated to change it. So, every change I made had to be pushed to the site to be tested, which was also frustrating.

Then, I got around to working out my development file hosting and was able to test changes more quickly (and without feeling like I’d have ‘broken’ the site just then when a friend would try to use it), but when I pushed my changes to the linode server, I realized that I’d broken hosting there!

Now, things seem to be working both locally and on the server, and I’m going to not play around with it. But, I have other projects cooking, and I’ll need to wrap my head around this.

So, what does it look like now?

Obviously, after all that drama, you’d expect something amazing, right? Well, it turns out that I can fix individual problems, but I don’t really have much of a vision of an overall design. So, while the layout is basically the same, the new formatting is something I’d rather spend my time looking at:

new-formatting

It has a title bar that remains fixed as you scroll, and functions are presented as buttons (because they seem to suggest action) and, rather than telling you “there is enough vocabulary to make a memory activity,” it simply doesn’t show you the option unless there is sufficient memory.

I can live with this for the rest of the academic year, I think. Now, I just have to clean up all the pages and make a tour, as well as finishing up my ‘minimum functionality…’

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s