Adaptive profiles t3 con13 sf
•
1 like•746 views
The document discusses an adaptive profiles extension for TYPO3 that provides customized HTML, CSS, images and content for different screen sizes, moving beyond responsive design. It works by checking the user's screen width, selecting the appropriate profile, and serving tailored content without the need for separate mobile and desktop sites. The extension determines the optimal profile on the initial page load and subsequent requests to ensure the proper version is served.
Report
Share
Recommended for you
Recommended for you
More Related Content
What's hot
What's hot (9)
Viewers also liked
Similar to Adaptive profiles t3 con13 sf
Similar to Adaptive profiles t3 con13 sf (20)
Adaptive profiles t3 con13 sf
- 1. Moving beyond responsive design with Adaptive Profiles BUSY NOGGIN DIGITAL serious websites for those who mean business Friday, May 31, 13
- 2. BUSY NOGGIN DIGITAL Adaptive Profiles is a new TYPO3 extension authored by Busy Noggin Digital. It is currently available at github.com/busynoggin. Documentation at: www.busynoggin.com/extensions/bn_adaptiveprofiles/ It will be loaded into the TYPO3 Extension Repository (TER) sometime in June, 2013 under the extension key bn_adaptiveprofiles. What is Adaptive Profiles? Friday, May 31, 13
- 3. BUSY NOGGIN DIGITAL It provides a powerful, yet easy, methodology for creating and serving TYPO3 pages that adapt to different sized screens. It moves beyond simple responsive design by serving not only CSS tailored to the screen size, but also custom HTML, image sizes and content. What does it do? Friday, May 31, 13
- 4. BUSY NOGGIN DIGITAL More and more of the visitor’s to your web site are using devices other than desktop computers. This is not where things are headed. This is where things are. Web Reality Check Friday, May 31, 13
- 5. BUSY NOGGIN DIGITAL The real question confronting developers today is not, “Should my site use responsive design.” The real question is “How should we accommodate the many different devices accessing our site.?” Historically, tackling that issue meant either building multiple sites (desktop & mobile) or responsive design. The real issue Friday, May 31, 13
- 6. BUSY NOGGIN DIGITAL Usually this means a desktop site and a mobile site. It has the advantage of being able to individually craft the users’ experience and content, but means having two sites to maintain and run. Providing multiple sites Friday, May 31, 13
- 7. BUSY NOGGIN DIGITAL It has the advantage to having only one site to build, maintain and run, but has issues with image sizes being larger than needed for many screens and other limitations. Responsive design Friday, May 31, 13
- 8. BUSY NOGGIN DIGITAL What the terms “responsive” and “adaptive” mean to web developers is still being sorted out. For this presentation, this is what they mean. Responsive: using CSS to adjust the presentation of a web page based on the screen width. Adaptive: providing different HTML, CSS or content by the server to the browser based on screen width. Responsive could be considered a subset of adaptive and adaptive and responsive techniques can be used together. Our terminology Friday, May 31, 13
- 9. A Demonstration of Adaptive Profiles Friday, May 31, 13
- 10. BUSY NOGGIN DIGITAL • Browser requests page • The extension checks if the screen width has been set in the cookie. If the screen width has not been set and the user agent is compared against the 51degrees.mobi library and a best guess for profile is made and a page based on that profile is sent to browser. • As soon as the HTML is rendered, JavaScript looks at the screen width and determines the true profile needed and that screen width is set in the cookie. If this matches the originally selected profile the browser continues to render the page by downloading the images and the assets. If it does not match a new request is sent to the browser for the properly profiled page. How it works Friday, May 31, 13
- 11. BUSY NOGGIN DIGITAL • On the second page request, the same process is followed, but since the profile set in the session matches the profile calculated by JavaScript then the page is only generated and served once. • The one exception to this is when the user has changed the orientation of their tablet or phone. In that case, it will be caught by the JavaScript check, a new profile determined and a request sent to the server. The user will end up with a properly sized page. • So, there will be occasions where a page will be generated / served twice but it does not happen often. When it does it is invisible to the user and does not take long as not all the assets on the first request are downloaded. How it works Friday, May 31, 13
- 12. BUSY NOGGIN DIGITAL • Instructions are in the manual • Install • Create profiles • Write conditional TS for each profile • Set profiles on content elements Installation and Setup Friday, May 31, 13