web design

responsive design: list of lists

The landing page for hyperkitty is the list of lists page. As the name implies, this page shows a list of all the available mailman lists. Here's the current front-end for the page: In creating a responsive design for this page, I considered what kind of layout the page should have for smaller screens and decided that there were a few design changes I wanted to make: Sidebar: On wide screens, having a menus on the sides are a good utilization of what would probably just end up being whitespace. However, on smaller…Read more …

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 …

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 →