Altran Websites for tablets and mobilesMobile friendly

From anywhere

For everyone

Responsive Web Design ProjectJune 30th 2013

SUMMARY

A. Why a projet for tablets and mobiles? And When?

B. What is Responsive Design?

C. Main evolutions concerning the content : the menus and navigation

A// Why a projet for tablets and mobiles? And when?

Now November 2013

B// What is Responsive Design?

1. Presentation

2. Advantages of Responsive Design

5

1. Presentation

Responsive Web Design (RWD) is a web design approach aimed to provide an optimal viewing experience on every devices :

› Computers› Tablets› Smarphones

The responsive design enable the site to dynamically adapt to all screen sizes

6

2. Advantages of Responsive Web Design

Advantages

Only one website for all devices

Contributors manage all versions in a unique place

Site updates only have to be applied once

A better user experience

Better Seo results

C// First evolutions concerning the content : the menus

1. New rules for the main navigation menu

2. No more content in the left column: exclusively reserved for sub-navigation

3. No use of internal navigation (PARA_Tabs)

You have untill the launch (end of September 2013) to implement these changes

8

1. New rules for the navigation menu

Navigation rules on computers : roll-over on « CARREERS » to show the subnavigation (1), and click on the same « CAREERS » to display the page (2)

1

2

9

1. New rules for the navigation menu

10

1. New rules for the navigation menu

Each page having subpages must be an empty page (shortcut) Move the Main page content in a subpage for each section and sub-section Example: « About us » section begin with an introduction subpage.

11

1. No more content in the left column: exclusively reserved for sub-navigation

Move all your contents from the left column in other places

Computers Tablets Mobiles

???

11

1 2 2

2

P.S.: Home pages are not concerned by this particularity.

12

1. No more content in the left column: exclusively reserved for sub-navigation

Example: move the content in the right column

13

Replace Main Internal navigation (PARA-tabs) by subpages (1) Replace Second Internal navigation (PARA-expandable) by other BLOCS (2)

3. No more use of internal navigation (PARA_Tabs)

1

2

C// First evolutions concerning the content : the menus

1. New rules for the main navigation menu

2. No more content in the left column: exclusively reserved for sub-navigation

3. No use of internal navigation (PARA_Tabs)

You have untill the launch (end of September 2013) to implement these changes