SS

Speaker??: Eric Overfield, Rita Zhang

2007 has seen the first release of the iPhone, leading the change in the way people consumed the informations. This also changed the way people were doing designs and user experience. With the increasing number of devices, it is no longer possible to have one site per device.

Responsive design is a concept of using one web site being able to show on every kind of devices, screens or browsers. Two methodologies, progressive enhancement and graceful degradation. Responsive web design is in the middle, which is encompassed in adaptive web design. Progressive enhancement is mobile first, while graceful degradation is desktop first.

Responsive design relies on fluid design, which means that elements have relative dimensions, in percentage, rather than absolute values. It also relies on the media queries (@media in CSS). The media query allows to define the screen sizes and orientation. Be careful, IE8 does not support media queries. For IE8, a specific stylesheet has to be provided, but, normally IE8 is only available on desktop, reducing the amount of work to adapt the design.

It is highly recommended to adopt a mobile first approach and starting building code for mobile interfaces. Also, you can have more control on the resources and already avoid using big images. This helps focusing on content first.

Regarding navigation, it has to be adapted to the different viewports, and what kind of navigation to use (dynamic or static). For mobile navigation, a complete touch navigation experience has to be implemented.

Begin with site planning, such as content planning, site map, information architecture. The wireframes need to include mobile devices, along with the mockups. At the same time, design for the extreme. Always remember SharePoint, and decide what will be part of the Master Page and Page Layout. How to handle the navigation is a frequent question.

After the wireframes and high fidelity mockups, it is time for an html prototype. It is possible to define your own grid, or to reuse an existing framework and leverage the experience of other developers. It obviously saves time and budget. Many of these frameworks provide extra features, such as collapsing navigation for example. Nevertheless, it can take time to ramp up on a framework and may not be SharePoint ready.

Some frameworks : Twitter Bootstrap. Zurb, Skeleton, Less frameworks.

Moving from the html prototype to SharePoint, it has to be split between the Master Page and Page Layouts. It is possible to reuse the SharePoint components from the snippets gallery.

A key advice (among others cited) : develop for the real world (will mobile users need to edit pages ?)