Altran Websites for tablets and mobiles Mobile friendly From anywhere For everyone Responsive Web Design Project June 30th 2013
Jan 17, 2016
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