My responsive web portfolio – williamp.com

Today I link to my own responsive web portfolio and present some screen captures, too, to show how the site responds to vastly different viewport characteristics.

Screen capture of index page of my web site  - williamp.com - bearing my web portfolio in a Firefox browser

Screen capture of index page of my web site – williamp.com – bearing my web portfolio in a Firefox browser.

Screen capture of index page of web site - williamp.com - bearing my web portfolio in a Blackberry Storm..

Screen capture of index page of my web site – williamp.com – bearing my web portfolio in a Blackberry Storm.

An exemplary responsive web site: viljamis.com

There is very, very little I dislike about viljamis.com. Perhaps that’s an odd way of putting it but so many web sites can be annoying with unruly pop-ups and animations or features whose use is less than clear or self-explaining that I start from a negative score and grade upward. But viljamis.com is beautiful with great typography, an excellent navigation system (different from the one at codelabgh.com featured in my previous post), and “easing” which you can glimpse if you resize the browser in a desktop or laptop (I don’t observe this in an iPhone, though, and I’m unsure about tablets) and which produces an acceptable animation (basically a very brief delay in the relocation of, for example, an icon) adding some playfulness to the site. The easing is unnecessary, but technically proficient and fun. The navigation system evident in widescreen viewports tucks into a select box for narrower viewports and allows more content to be viewed in phones and tablets where space is scarcer.

Widescreen view of viljamis.com.

Widescreen view of viljamis.com.

View of viljamis.com in an iPhone in portrait and landscape views.

View of viljamis.com in an iPhone in portrait and landscape views.

An excellent navigation system on a responsive web site

Codelabgh.com showcases the work of front-end web developer Joseph Twumasi. Front-end web developers, also known as front-side or client-side web developers, create the things that web users see, hear and otherwise interact with on a web site, rather than the server-side (or back-end) things such as an e-commerce database. I like the site’s color scheme and think it has a fantastic responsive navigation system.

Here are images of the header, including the navigation system, in a full-screen view on a laptop as well as the view of the site’s home on a mobile phone (a Palm Pre):

The navigation system of Codelabgh.com tucked neatly into the header in this wide screen view.

The navigation system stretches nicely along the header of Codelabgh.com.

Mobile phone (Palm Pre)portrait  view of Codelabgh.com

The navigation system stacks vertically for narrow viewports while other elements of the header that appeared in wider viewports have been removed.