opw

responsive design: hidden complexities

Working on the hyperkitty frontend has been my first foray into responsive design. Previously, when designing for mobile devices, I'd focus on native applications or do mobile-only websites (e.g., upon detecting a mobile browser, you'd be redirected to a mobile version of the website). Both of these methods have the benefit of being able to design sites/apps that are tailored very specifically for mobile devices. However, the downside is that it's yet another piece of software that has to be maintained. So that's at least one good reason for moving towards responsive web…Read more …

django + less setup

While working on the front-end for hyperkitty, I was running into a lot of repetitive css. Now, I don't mind being a bit quick and dirty just to get things working quickly, but for long-term maintanance I thought it would be better to look into some stylesheet languages. Since hyperkitty is using Bootstrap, I naturally looked towards LESS. LESS has features like variables, extension, and nested rules, which makes CSS stylesheets look much more readable (and will hopefully mean it'll be easier to maintain moving forward). To get LESS working with hyperkitty's development…Read more …

maintaining a clean test environment

One of the tricky things I'm discovering is keeping up with all the changes when you're working on large project. Case in point, recently I was testing out some of my frontend stuff on my local web server. I sometimes worry I've mucked around my dev box too much, so I like to have a separate box that I use as a clean test environment. When I'm using that box, I usually only pull sources down to keep everything up-to-date, but recently when I tried to do that, I ran into several problems:…Read more …

mobile layouts

Recently I've been trying to figure out the best mobile layouts for some of the hyperkitty pages. The challenge has been that there is often a lot of content on these pages, so figuring out a clean way to display that on a small screen can be tricky. The screenshots below give you a sense of what I've been playing around with. These are for 3 different screen widths of the overview page: 320px screen width: 640px screen width: 768px screen width: The 320px is for the smallest Android screens, 640px is a…Read more …

breadcrumbs in navbar

As I was looking through some of the Hyperkitty redesigns, I noticed that there were different versions of the breadcrumbs in the navbar. One version looks like this: Another version looks like this: In my working branch, I've modified the latter version to look like this: The change was partially because due to the fact that on some screens, the breadcrumbs can be extremely long. For example, see this page: My thought was by aligning the breadcrumbs on the left margin, we'd get more space for potentially long strings. Of course, it's still…Read more …
← Newer Posts
Older Posts →