Moving beyond responsive designwith Adaptive ProfilesBUSY NOGGIN DIGITALserious websites for those who mean businessFriday,...
BUSY NOGGINDIGITALAdaptive Profiles is a new TYPO3 extensionauthored by Busy Noggin Digital.It is currently available at gi...
BUSY NOGGINDIGITALIt provides a powerful, yet easy, methodology for creatingand serving TYPO3 pages that adapt to differen...
BUSY NOGGINDIGITALMore and more of the visitor’s to your web siteare using devices other than desktop computers.This is no...
BUSY NOGGINDIGITALThe real question confronting developers today is not, “Should my site useresponsive design.” The real q...
BUSY NOGGINDIGITALUsually this means a desktop site and a mobile site. Ithas the advantage of being able to individually c...
BUSY NOGGINDIGITALIt has the advantage to having only one site tobuild, maintain and run, but has issues withimage sizes b...
BUSY NOGGINDIGITALWhat the terms “responsive” and “adaptive” mean to web developers isstill being sorted out. For this pre...
A Demonstration of Adaptive ProfilesFriday, May 31, 13
BUSY NOGGINDIGITAL• Browser requests page• The extension checks if the screen width has been set in the cookie. If thescre...
BUSY NOGGINDIGITAL• On the second page request, the same process is followed, but since theprofile set in the session match...
BUSY NOGGINDIGITAL• Instructions are in the manual• Install• Create profiles• Write conditional TS for each profile• Set pro...
Upcoming SlideShare
Loading in …5
×

Adaptive profiles t3 con13 sf

609 views
550 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
609
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Adaptive profiles t3 con13 sf

  1. 1. Moving beyond responsive designwith Adaptive ProfilesBUSY NOGGIN DIGITALserious websites for those who mean businessFriday, May 31, 13
  2. 2. BUSY NOGGINDIGITALAdaptive Profiles is a new TYPO3 extensionauthored 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) sometimein June, 2013 under the extension key bn_adaptiveprofiles.What is Adaptive Profiles?Friday, May 31, 13
  3. 3. BUSY NOGGINDIGITALIt provides a powerful, yet easy, methodology for creatingand serving TYPO3 pages that adapt to different sizedscreens. It moves beyond simple responsive design byserving not only CSS tailored to the screen size, but alsocustom HTML, image sizes and content.What does it do?Friday, May 31, 13
  4. 4. BUSY NOGGINDIGITALMore and more of the visitor’s to your web siteare using devices other than desktop computers.This is not where things are headed. This iswhere things are.Web Reality CheckFriday, May 31, 13
  5. 5. BUSY NOGGINDIGITALThe real question confronting developers today is not, “Should my site useresponsive design.” The real question is “How should we accommodatethe many different devices accessing our site.?”Historically, tackling that issue meant either building multiple sites (desktop& mobile) or responsive design.The real issueFriday, May 31, 13
  6. 6. BUSY NOGGINDIGITALUsually this means a desktop site and a mobile site. Ithas the advantage of being able to individually craft theusers’ experience and content, but means having twosites to maintain and run.Providing multiple sitesFriday, May 31, 13
  7. 7. BUSY NOGGINDIGITALIt has the advantage to having only one site tobuild, maintain and run, but has issues withimage sizes being larger than needed for manyscreens and other limitations.Responsive designFriday, May 31, 13
  8. 8. BUSY NOGGINDIGITALWhat the terms “responsive” and “adaptive” mean to web developers isstill being sorted out. For this presentation, this is what they mean.Responsive: using CSS to adjust the presentation of a web page basedon the screen width.Adaptive: providing different HTML, CSS or content by the server to thebrowser based on screen width.Responsive could be considered a subset of adaptive and adaptive andresponsive techniques can be used together.Our terminologyFriday, May 31, 13
  9. 9. A Demonstration of Adaptive ProfilesFriday, May 31, 13
  10. 10. BUSY NOGGINDIGITAL• Browser requests page• The extension checks if the screen width has been set in the cookie. If thescreen width has not been set and the user agent is compared againstthe 51degrees.mobi library and a best guess for profile is made and apage based on that profile is sent to browser.• As soon as the HTML is rendered, JavaScript looks at the screen widthand determines the true profile needed and that screen width is set in thecookie. If this matches the originally selected profile the browser continuesto render the page by downloading the images and the assets. If it doesnot match a new request is sent to the browser for the properly profiledpage.How it worksFriday, May 31, 13
  11. 11. BUSY NOGGINDIGITAL• On the second page request, the same process is followed, but since theprofile set in the session matches the profile calculated by JavaScript thenthe page is only generated and served once.• The one exception to this is when the user has changed the orientation oftheir tablet or phone. In that case, it will be caught by the JavaScriptcheck, a new profile determined and a request sent to the server. The userwill end up with a properly sized page.• So, there will be occasions where a page will be generated / served twicebut it does not happen often. When it does it is invisible to the user anddoes not take long as not all the assets on the first request aredownloaded.How it worksFriday, May 31, 13
  12. 12. BUSY NOGGINDIGITAL• Instructions are in the manual• Install• Create profiles• Write conditional TS for each profile• Set profiles on content elementsInstallation and SetupFriday, May 31, 13

×