Mobile Moment Monday: Nissan's Genome Project

Screenprint of Nissan's Genome Project, courtesy of AWWWARDS

As I was scanning the web for some good responsive designs, I came across a website called AWWWARDS that posted an article titled Best Websites Examples Of Designs With Responsive Design. There are many great responsive design websites posted here, but I chose to showcase Nissan's Genome Project because of it's added simplicity and interactivity.

Screenshot of website with
reduced resolution.

The website is actually an interactive medium that links to a user's Facebook account.  Once you give Nissan permission to access your Facebook account, it will ask you to select one of your profile pictures.  The website does the rest, analyses your account, and brings you an interactive experience that visually shows you how your likes and activity on Facebook links you to your friends and family.  Beyond seeing your own "genome," it also connects all your likes and information with anyone else that has signed into the genome project, so you can see information linking people all over the world, see what you have in common and many other things. It really has nothing to do with Nissan, except for the unobtrusive link at the bottom of the webpage.

What is impressive about this website is the page source.  When looking at the page source, it is clean, short and loads fast.  There is no indication as to what type of code they are actually using to create this website, which means that most of it is probably server based. It acts like flash, but there is no flash involved in the code. There is a little bit of JavaScript, but for the most part, all the power is under the hood.  This is definitely a well built professional website, which can only be expected from a company like Nissan.

The website adjusts to the size of your browser, and not to the size of your device.  It fits the definition of responsive to the T. The only con I found was that it takes a while for things to load sometimes and I had to refresh the page to get things going again.

I invite you to check it yourself and become part of Nissan's genome project and post your experience here.  Or check out some of the other responsive designs on AWWWARDS and tell me why you would choose them as good examples of responsive design.

Mobile Moment Monday: Àlex De Fluvià

Image created by Charles Williams, 

Screenshots of alexdefluvia.com

One thing I like is clean, innovative and original designs.  With responsive designs becoming the norm, instead of just being a "new" idea, every Monday I am going to start critiquing and presenting some websites that deserve a little recognition for their thoughtful design principles.

Today, I would like to introduce alexdefluvia.com. Àlex de Fluvià is a painter from Barcelona that is recognized around the globe.  His paintings are much like graffiti on canvas, much of which represents social and political resistance.

What I like about his website is the simplicity behind it.  The website is basically a portfolio for his paintings.  There is a link for news stories involving Fluvià's paintings, along with a link to a short biography. Everything else about this website is visual. The homepage consists of a header, some links, and a revolving background slideshow.  Once you click on one of the links however, that is when you can truly appreciate this website. Most of the background images are in black and white, unless it is displaying one of his paintings.  Once you click on the "paintings" link, then it gives you a nice symmetrical boxed visual menu, sorted by year, to view Fluvià's paintings.  The black and white background makes these image links pop out of the page.  His "works on paper" link follows the same format.

What is  special about this website is the responsive design.  Once you start adjusting the size of your browser on a regular desktop, you can see how the image links adjust their size and the main links switch to the bottom of the page.  All divs, images and links adjust accordingly.  This allows for one design for all screen sizes, so viewers are not redirected to a "mobile version" of his website, but you get a uniform experience no matter what device you are using. The only thing that holds this website back is its obtrusive "malware" warning that appears when trying to view this website through Google Chrome.  The code that allows the revolving background images comes up as a trojan horse warning, which will keep people from viewing his page.  While I am aware that the code is harmless, most people brought to his website probably will not.

I found this website via the article, 10 Great Examples of Responsive Design from Around the World, hosted on Econsultancy - Digital Marketing Excellence. Please check out Àlex De Fluvià website, and some of the other examples on the Econsultancy article for inspiration. For more information on responsive design, check out Wikipedia's article for a thorough explaination.

I will be posting a new blog each Monday to review some of the better (or worse) responsive designs on the web.  I hope these posts will help inspire other new web designers out there, and if you would like to post your own examples of good (or bad) responsive designs, feel free in the comments section.

About This Blog

Image Courtesy of Responsive Design

I am a web designer.  At least I want to be. Since I am always following new design techniques on the web I decided to start a blog about my findings and why I think they are important.

Even though I have been creating graphics and websites as a hobby for years, I still consider myself a "new-comer" to the web design scene. I have developed a couple websites, from nothing to something, but I have not yet done enough websites that I could call myself a "professional."

But that is my goal.  To become a professional.  I have been working with HTML and CSS for over six years.  I also have a grasp on simple JavaScript, working on JQuery, PHP, and MySQL.  My skills have all been self-taught.  I want to add "web programmer" to my occupational list.

What I have noticed over time is that standards, techniques, and technology change quickly, particularly those changes revolving around the Internet. Sometimes it is overwhelming to keep up on all those changes, especially if you are only a hobbiest like myself.

The cause of many of these new changes in web design is due to the rise of mobile technologies.  HTML5 and CSS3 where huge upgrades to the World Wide Web, upgrades that took years to happen.  The fact that I am learning all these new techniques and skills regarding different forms of media during this important time of change in the way user's view the Internet, makes me very fortunate.  For experienced designers that have been codding XHTML and CSS for years, some of these changes will significantly change the future of their careers and many of them will have to re-educate themselves so they can learn more modern web development.

A good example of a responsive design can be found at Responsive Web Design. If you change the width of your browser window you can see how the text and images resize depending on how big your window is. So whether you just keep your browser window smaller on you desktop screen, or you view the website on your mobile device, the website will change to accommodate any resolution.

An example of a website that is geared towards mobile development, but does not have a mobile version of their website is XDA Developers.  I read posts on this website all the time, but they do not have a mobile version, only an app.  The app is definitely for mobile devices, but lacks the ability to search and sort through forums and posts like the website.  The app is actually pretty useless to me in my opinion.

I find myself researching these changes often on my own.  I spend hours, upon hours of my time searching and reading articles, journals, and other web resources.  My quest for knowledge has left me well informed in regards to these standards and tricks-of-the-trade.  

I have decided that I would bring this collection of knowledge to one place for anyone to use and benefit from.  Many other websites do this. But when it comes to changes in technology, the more resources pointing to the information and the more detailed reviews backing up that information, the better. The information must be found, sometimes explained in different ways, and collaborative reviews of such information also assist in making those changes better.  

If you are interested in web standards, webdesign, or changes to new technologies on the Internet, then please subscribe to my blog today.  Also feel free to post links to your favorite responsive designs in the comments.