Building the BlackBerry Blog
Thrillworks has recently been working with BlackBerry in creating a new responsive site for their WordPress BlackBerry Blog. We’ve been lucky enough to get in touch with Arley McBlain,
the lead front end dev on the project, to get the lowdown on some of the more interesting aspects of the build.
Here’s what he had to say:
A couple unique responsive details come to mind:
1) In design comps designers always pick the perfect amount of text to be in layouts, but in reality some post titles are insanely long! This is a challenge especially on the front page of this BlackBerry blog where there is a fixed height for the title area. To solve this there’s JavaScript in place that basically resizes, then vertically centers the titles (on the front page teasers as well as the titles in the featured posts carousel). A pretty nice solution for content responsive design!
2) If you’re not logged into WordPress.com the header is sticky (when you’re logged into WP.com there’s an admin bar that’s also position:fixed, so the header doesn’t stick because it was awkward to have two fixed elements). This uses a vertical media query. This use of vertical responsiveness is literally ripping off this post I wrote last year: http://css-tricks.com/responsive-web-above-the-fold/
Fixed headers can be a nice UX, but it makes QA way more in depth! Not only do you have to think about the context responsively horizontally, but now vertically for one breakpoint; and with/without the admin bar in place! Personally I have trouble wrapping my head around mixing vertical and horizontal media queries if I’m tired! It’s definitely not late afternoon work!
3) The lead designer on this project @theryanbruce also helped out on front end coding. Notably the menu flyout uses the same markup as the desktop category nav. He’s not one to create mobile and desktop specific areas if he doesn’t have to.
A huge thanks to @ArleyM for sharing some of his experiences and we look forward to hearing more after the first round of public feedback comes through.
