Yahoo!’s early hugely successful directory format with dozens of underlined links has yielded to a still successful image-rich format devoid of underlined links.
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.
Wooga, which develops “social games” and is based in Berlin, Germany, tells about realigning (I wonder if something went slightly askew in language translation) its logo in The New Wooga Logo: Realign over Redesign. The motivation is largely captured in this sentence: The logo space for Bubble Island on the iPhone or iPad is only 10×10 pixel [sic]:
Still, this paragraphs adds more:
The old logo was designed for web applications, which allowed several shades and highlights and a more complex visual appearance. Designing for mobile has to take different aspects into account: such as data size. If you small shrink the logo for mobile, the intricacies of the old design would become blurry. Wooga also uses the logo for in-game items on web and mobile and with this in mind three key factors emerge: legibility for smaller screens, reducing logo related bugs and emphasizing the existing features of the logo.
The new logo (below right) seems a touch less anthropomorphic, a touch less personified. While I slightly prefer the former, it had fewer constraints than the newer, which probably is quite satisfactory. To further reduce the logo’s footprint and perhaps loading time, some have mentioned that Wooga could eliminate the gray “W” as it is redundant.
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.
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):