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