In preparation of designing my own responsive portfolio site, I found that the best way to understand the considerations of a scalable site was to look at as many as possible and write a list of things that bothered me, or things that were especially delightful. The main issues I encountered revolved around:
- Organization | Elements on the page will have to shift as the screen size changes, but they need to remain in a logical reading order. Some elements may even be able to go away when real estate gets tight.
- Navigation | The navigation of choice seems to be a menu button with a drop down navigation list that appears when clicked/tapped. Because my site will only have a few page categories, I may be able to get away with keeping them all on the screen as opposed to hiding them behind a button. My logic says that if I can prevent the user from having to tap or click any more than necessary - without making them scroll for day just to get beyond the navigation - then visible buttons will be the way to go.
- Typography | The type will likely need to scale down in many places as the design scales. A few sites that I looked at however, had type that scaled exactly as the page did. That means that some of the small copy became so tiny for mobile devices that it was barely readable. Scaling type to an extent, and then redesigning to accommodate larger type on smaller devices seems like a better solution.
- Spacing and Proportion | All items may not scale proportionally and still look pleasing. Some images may need to stay a bit large, others may just go away once they've scaled to a certain point. Also, spacing that works for the desktop version may feel too generous for a mobile device. Other items began to feel very cramped as they shifted from multi-column to single-column without any change in organization or spacing.
Here are a few sites I found that seemed to handle these issues well.
One of the nicest responsive designs I've come across so far is that of Devbridge, a web development and design company based in Chicago. Devbridge's site is one of the few that feels very well organized and proportional no matter the width of the screen. The logo toggles back and forth between just the db mark and the full logotype depending on the arrangement. The type also becomes simplified as the screen narrows. The navigation at the mobile level is still visible on screen with the exception of the most narrow width, with nice finger-sized buttons.
I also like the streamlined look and organization of Vento Solutions' responsive site. I do feel that some of the type gets too small when the design is scaled down to the mobile version, but the white space is nice. Vento also uses a hidden/nested menu for smaller screens.
I also enjoy the way that Bearded's website scales. The subtle use of texture gives the site some polish while letting the work and the solid organization stand out. One feature that I'm not sure I like, is their particular use of a menu button for small screens. Rather than reveal a fly-out or drop down, the menu button is a jump link that sends the user down to the footer where they have the complete navigation. For anybody not accustomed to navigating a mobile site, I think this could probably cause some confusion. The upside though, is that on each page, users can jump right into the content rather than having to scroll through a few screens of menus, titles, etc.
