Altran Websites for tablets and mobiles Mobile friendly From anywhere For everyone Responsive Web...
-
Upload
cuthbert-mcdowell -
Category
Documents
-
view
216 -
download
0
Transcript of Altran Websites for tablets and mobiles Mobile friendly From anywhere For everyone Responsive Web...
![Page 1: Altran Websites for tablets and mobiles Mobile friendly From anywhere For everyone Responsive Web Design Project June 30th 2013.](https://reader036.fdocuments.in/reader036/viewer/2022062518/5697bf761a28abf838c80c8f/html5/thumbnails/1.jpg)
Altran Websites for tablets and mobilesMobile friendly
From anywhere
For everyone
Responsive Web Design ProjectJune 30th 2013
![Page 2: Altran Websites for tablets and mobiles Mobile friendly From anywhere For everyone Responsive Web Design Project June 30th 2013.](https://reader036.fdocuments.in/reader036/viewer/2022062518/5697bf761a28abf838c80c8f/html5/thumbnails/2.jpg)
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
![Page 3: Altran Websites for tablets and mobiles Mobile friendly From anywhere For everyone Responsive Web Design Project June 30th 2013.](https://reader036.fdocuments.in/reader036/viewer/2022062518/5697bf761a28abf838c80c8f/html5/thumbnails/3.jpg)
A// Why a projet for tablets and mobiles? And when?
Now November 2013
![Page 4: Altran Websites for tablets and mobiles Mobile friendly From anywhere For everyone Responsive Web Design Project June 30th 2013.](https://reader036.fdocuments.in/reader036/viewer/2022062518/5697bf761a28abf838c80c8f/html5/thumbnails/4.jpg)
B// What is Responsive Design?
1. Presentation
2. Advantages of Responsive Design
![Page 5: Altran Websites for tablets and mobiles Mobile friendly From anywhere For everyone Responsive Web Design Project June 30th 2013.](https://reader036.fdocuments.in/reader036/viewer/2022062518/5697bf761a28abf838c80c8f/html5/thumbnails/5.jpg)
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
![Page 6: Altran Websites for tablets and mobiles Mobile friendly From anywhere For everyone Responsive Web Design Project June 30th 2013.](https://reader036.fdocuments.in/reader036/viewer/2022062518/5697bf761a28abf838c80c8f/html5/thumbnails/6.jpg)
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
![Page 7: Altran Websites for tablets and mobiles Mobile friendly From anywhere For everyone Responsive Web Design Project June 30th 2013.](https://reader036.fdocuments.in/reader036/viewer/2022062518/5697bf761a28abf838c80c8f/html5/thumbnails/7.jpg)
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
![Page 8: Altran Websites for tablets and mobiles Mobile friendly From anywhere For everyone Responsive Web Design Project June 30th 2013.](https://reader036.fdocuments.in/reader036/viewer/2022062518/5697bf761a28abf838c80c8f/html5/thumbnails/8.jpg)
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
![Page 9: Altran Websites for tablets and mobiles Mobile friendly From anywhere For everyone Responsive Web Design Project June 30th 2013.](https://reader036.fdocuments.in/reader036/viewer/2022062518/5697bf761a28abf838c80c8f/html5/thumbnails/9.jpg)
9
1. New rules for the navigation menu
![Page 10: Altran Websites for tablets and mobiles Mobile friendly From anywhere For everyone Responsive Web Design Project June 30th 2013.](https://reader036.fdocuments.in/reader036/viewer/2022062518/5697bf761a28abf838c80c8f/html5/thumbnails/10.jpg)
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.
![Page 11: Altran Websites for tablets and mobiles Mobile friendly From anywhere For everyone Responsive Web Design Project June 30th 2013.](https://reader036.fdocuments.in/reader036/viewer/2022062518/5697bf761a28abf838c80c8f/html5/thumbnails/11.jpg)
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.
![Page 12: Altran Websites for tablets and mobiles Mobile friendly From anywhere For everyone Responsive Web Design Project June 30th 2013.](https://reader036.fdocuments.in/reader036/viewer/2022062518/5697bf761a28abf838c80c8f/html5/thumbnails/12.jpg)
12
1. No more content in the left column: exclusively reserved for sub-navigation
Example: move the content in the right column
![Page 13: Altran Websites for tablets and mobiles Mobile friendly From anywhere For everyone Responsive Web Design Project June 30th 2013.](https://reader036.fdocuments.in/reader036/viewer/2022062518/5697bf761a28abf838c80c8f/html5/thumbnails/13.jpg)
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
![Page 14: Altran Websites for tablets and mobiles Mobile friendly From anywhere For everyone Responsive Web Design Project June 30th 2013.](https://reader036.fdocuments.in/reader036/viewer/2022062518/5697bf761a28abf838c80c8f/html5/thumbnails/14.jpg)
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
![Page 15: Altran Websites for tablets and mobiles Mobile friendly From anywhere For everyone Responsive Web Design Project June 30th 2013.](https://reader036.fdocuments.in/reader036/viewer/2022062518/5697bf761a28abf838c80c8f/html5/thumbnails/15.jpg)