Responsive Web Design a case study: 2012 Cisco Networking Academy Venezuela Annual Conference

Posted by Darwin Morillo
Darwin Morillo
Integrador de Tecnologias Web
User is currently offline
on Jueves, 14 Febrero 2013 in Blog

In the mobile-ready websites debate a project emerged with the idea of having seamlessly presence not only in all browers but also in the mobile device fauna. Its content strategy, business identity, branding requirements and time were key factors for choosing responsive web design as a development approach.


The scope


The 2012 Cisco Networking Academy Venezuela Annual Conference is a forum designed to enhance communication, exchange of knowledge and direct contact between students, instructors and professionals interested in supporting the development of technological excellence in Venezuela. Is an open space for information exchange, technological innovation analysis and creativity, and gather each year, more than 1,000 students and teachers belonging to the Networking Academy program in Venezuela.


In 2012 Dr. Rafael Belloso Chacín University was chosen to host The Cisco Networking Academy Venezuela Annual Conference, this important designation brings the responsibility of creating the best environment and technological platform for supporting this event.


Responsive Web Design (RWD)


Is a reality that this matter is all around the web but a definition of responsive web design is always handy:
This term refers to an approach that suggests that design and development should respond to different screen size, platform and orientation. The technique consists of a mix of flexible grids, layouts, images and CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities.


Using (RWD) goes some way to delivering a better experience for people with mobile phones and tablets. It’s hard to get consistent stats about the state of the device market in Venezuela, and user behavior will vary widely from site-to-site and between different segments of the audience.


Responsive Main Navigation and branding


The main navigation menu responds to the idea of displaying in a clickable dropdown style for mobile devices and a standard horizontal menu for wide screen but including some hot and spicy to the recipe we wanted that the branding had some subtle elements for the breakpoints.

menu

 

 
Breakpoints


The first thing we did was to set the breakpoints, the amount of changes in the layout. It is almost impossible to do a different design to all resolutions and devices available today, so we decided the resolutions that would be the base of the design and kept a fluid design between these resolutions. In our case we are using the following breakpoints: 479px, 736px e 986px (remembering that 1235 is the width limit).

 

Media queries


Layouts are ready, time to work to make some magic happen. The arrangement of floating elements in the dynamic grid layout is thanks to jQuery Masonry, and break between resolutions is media queries CSS3 property, documentations about this are huge on w3c.org.


Content


In terms of content, we’ve tried to keep it accessible at all resolutions. However, the bottom images once the screen width drops down to tablet have been hidden. This is because of prioritizing content readability.


Results


The event was an absolute success and the registration process closed 6 weeks after the site launch, stats shows that multiples devices were used and user’s comments were incredibly good.

responsive

You can check the result on the website: www11.urbe.edu/academy