Download Diapositive 1

Altran Websites for tablets
and mobiles
Mobile friendly
Responsive Web Design Project
June 30th 2013
For everyone
From anywhere
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
1. Presentation

Responsive Web Design (RWD) is a web design approach aimed to
provide an optimal viewing experience on every devices :
›
›
›

5
Computers
Tablets
Smarphones
The responsive
design enable the
site to dynamically
adapt to all screen
sizes
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
6
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
1. New rules for the navigation menu

1
Navigation rules on computers : roll-over on
« CARREERS » to show the subnavigation (1), and click
on the same « CAREERS » to display the page (2)
2
8
1. New rules for the navigation menu
9
1. New rules for the navigation menu



10
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.
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
1
Mobiles
Tablets
2
1
2
1
2
???
P.S.: Home pages are not concerned by this particularity.
11
1. No more content in the left column: exclusively reserved for sub-navigation

12
Example: move the content in the right column
3. No more use of internal navigation (PARA_Tabs)


Replace Main Internal navigation (PARA-tabs) by subpages (1)
Replace Second Internal navigation (PARA-expandable) by other BLOCS (2)
1
2
13
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