Responsive Portfolio Website

•

Responsive Portfolio Website
Personal website - version 2.0

Redesigning and building my own portfolio website, is the main way I’ve been able to teach myself HTML markup, CSS, and a bit of jQuery.

Recently, I've been fascinated by Responsive Web Design and decided it was essential my new portfolio website went beyond the desktop view and adapted responsively to smaller devices.

By utilising CSS3 Media Queries as well as a few CSS Vendor Prefixes, I have been able to rearrange the content of my portfolio, so the focus is on a more functional, yet aesthetically pleasing user experience.

I hope my new website delivers a quality experience to users no matter how large (or small) their display. Please visit my new responsive website at www.kyliehibbert.com and try it out.

For this new version of my portfolio, I've incorporated a click through jQuery slideshow, as well as a showcase area on the Home page. You'll note that this showcase is either cut down to three thumbnails or removed for a more concise experience on smaller devices.

Because of common mobile behaviors, I have moved the navigation menu to the bottom of the screen on smaller devices, allowing easier interaction when holding a mobile device one-handed. This placement of the menu also presents users with the choice to explore the website further, once they've reach the end of a screen.

Rollovers have been modified for touch devices throughout the design. For instance, project titles feature neatly underneath image thumbnails on smaller devices, where as a CSS slide up box rollover, is used on the desktop view.

A CSS vendor prefix has been used to split project information into two columns on the iPad portrait and iPhone landscape view, to increase legibility while reading large amounts of copy.