Typo3 RWD evolutions Mobile friendly From anywhere For everyone Webex Presentation February 19th 2014

SUMMARY A.Main Front-end evolutions 1.Menus 2.Content displaying 3.Images B.Main Back-end evolutions 1.Images 2.Blocs organisation 3.Bloc evolution and new blocs C.Test also your content for tablets and mobiles

A. Main Front-end evolutions

A1.A collapsed menu for all mobile format and tablets on portrait format 4

A2. Content displaying: Three different formats to adapt to the different types of devices 5  Main page columns reorganizes as follows: Format 3: All PCs formats and tablets in landscape format Format 2: Tablets in portrait mode and Mobiles in landscape format Format 1: Mobiles in portrait format Disapear for other formats P.S.: Home pages are not concerned by this particularity as they are only compose of one column px 800px

A2. Sub-columns content (inside the main column) also adapt 6  Content inside the main column content will also automatically reorganize to better fit the screen as the following example: Format 3: All PCs formats and tablets in landscape format Format 2: Tablets in portrait mode and Mobiles in landscape format Format 1: Mobiles in portrait format P.S.: Home pages will also automatically reorganize

A3. Images must fit any format 7  In the actual version, images are specifically adapted to a specific size of a bloc, in pixels  But in Responsive, all images take 100% of the column where they have been placed, and an image in a small column in format3 move in the same main column in format1  So now, each image have to be optimized for all possible formats  For example an image in zone 2 in format 3 has to be 200 pixels wide, but will have to be 360 pixels wide in format1 for a Samsung S4, and even 400 pixels for a Galasy Note to correctly fit the column Format 3:Format 2:Format 1:

B. Main Back-end evolutions

B1. New rules for images in the Back-End 9  All image you upload now, by default, is resized to a width of 560px, this size has been identified as the most optimized to fit all formats.  No image size will be increased. So if the image you have to upload is smaller, the original size will be uploaded. As it won’t fit 100% of all columns, it will be aligned on the left side when necessary.  In specific cases, you will need a different image size. Special folders, with special resizing rules will be available. This point has to be finalized with the agency. We will send you the exhaustive list when it is ready. For the moment we identified these cases:  1COL/zoom: 960px  2COL: 800px  Header Promo: 690px  Small Images / News / Profile : 150px  No-resize

B2. No more difference between PARA and BLOC 10  In the actual version, PARA are reserved for big column and BLOC for small ones  But in Responsive, an element in a small column in format 3 is place in the same main column in format 1  So now, all elements have been design to be able to fit any place and any column Format 3:Format 2:Format 1:

B3. Bloc evolution and New Blocs Presentation 11  Number of blocs have been reduced and reoganized in 4 tabs: Main Content / Widgets / Home / Columns  Existing blocs have been simplified. For example, no need to define the size of elements anymore  Old blocs still display correctly but can’t be used anymore  Videos and all elements in flash now have an equivalent version in html5 to e displayed on Tablets and Mobile  “Text + Image”: a complete bloc that replaces major content blocs and principally PARA-Simple  A new and simple Diaporama/Album  Alternative Flash animations  Recruitment section based on Profile has totally been adapted  Blocs that needs to be improved:  Video  Events  Addresses

C. Test also your content for tablets and mobiles

Do you have comments or questions?