Have It Your Way Theme

Have It Your Way Theme

Created by

Published on

Updated on

Tags

This theme was my first real foray into responsive design as it’s intended. Prior to this my efforts had been to make one layout for computer users that would scale down for other devices.

While I enjoyed them for not being sweeping layout changes, they were not as accessible for users on touch devices. Have It Your Way will serve as a bridge between my one-fits-all approach from before and a more thoughtful design for non-computer users.

Highlights

  • jQuery
  • Responsive design
  • HTML5 boilerplate
  • CSS3
Animation

Animation demonstrating the layout of articles

jQuery & CSS3

I’ve had the idea for a long time to make main navigation partially visible, enticing the user to move their cursor near it to reveal it all. This seems as good a time as any to kick the tires on the idea and see it in action. This effect is for computer users only—tablet and mobile phone users will see all links to begin with.

Animation

Animation of navigation reveal

Responsive Design

Responding to mobile devices is somewhat subdued in this theme—it’s mostly a test bed for me to get more comfortable with media queries. Importantly to me, images scale to fill horizontal space as they should but otherwise the only other notable device-dependent effect is whether or not main navigation does its fun reveal or not.

I feel that the overall layout holds up regardless of the device it’s on. Since my portfolio is very image intensive, it made sense to have pictures scale consistently and serve as touchable icons for phones and tablets. Because of this, I didn’t feel a lot of interface concessions needed to be made.