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 …

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 …

first pull request!

I'm a bit late to posting this, but I recently joined the latest group of OPW interns. I'm excited to be part of the OSS community and am looking forward to do my part to contribute! My OPW project is to work on front-end design and development for Hyperkitty. One of the interesting things about the OPW application process is that you have to make an initial contribution to the project that you want to work on. After chatting with Máirín, I learned that Hyperkitty's front-end is based on Twitter's Bootstrap. We decided…Read more …

installing chromium

Fedora comes with Firefox, but I also like developing on Chrome. And as a front-end developer, it's always good to do cross-browser tests. To install Chrome: wget http://repos.fedorapeople.org/repos/spot/chromium-stable/fedora-chromium-stable.repo sudo cp fedora-chromium-stable.repo /etc/yum.repos.d sudo yum -y install chromiumRead more …