responsive design and joomla!
DESCRIPTION
The JoomlaChicago Loop sponsored "Joomla & Responsive Design", a presentation focused on the key ingredients and dynamics of making a Joomla website flow and react to the different viewing devices and browser viewport sizes. Dennis Kmetz (Director of Interactive Media, Taylor Bruce Design Partnership) presented Joomla & Responsive Design on Thursday, March 1, 2012.TRANSCRIPT
![Page 1: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/1.jpg)
Responsive Design- more than adaptive layouts -
![Page 3: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/3.jpg)
Responsive Design:
• History/Definition• Adaptive Layouts• Joomla! Usage
![Page 4: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/4.jpg)
Demo of Responsive Design
www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
Others:bostonglobe.com
2011.dconstruct.org (max-width: 1210, width:90%)
Many others:http://mediaqueri.es/
![Page 5: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/5.jpg)
www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
What You Saw
![Page 6: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/6.jpg)
Adaptive Layouts
![Page 7: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/7.jpg)
Adaptive Layouts - What Do They Do?
Enables development of designs that “adapt” to various screen sizes
Screen Size vs. Viewport size:
2660px by 1440px 27” displays now cost $600 - $800
![Page 8: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/8.jpg)
Ethan Marcotte (May 2010 article in alistapart.com)http://www.alistapart.com/articles/responsive-web-design
“INTERACTIVE ARCHITECTURE” (by Michael Fox and Miles Kemp)
• “a multiple-loop system… a continual information exchange.”
• Rather than creating immutable, unchanging spaces that define a particular experience, they suggest that the inhabitant and structure can—and should—mutually influence each other.
This is our way forward.
RESPONSIVE DESIGN:Three Methods:
1. CSS3 Media queries2. Flexible Layout (aka fluid grids, elastic layouts, etc.)3. Flexible images
![Page 9: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/9.jpg)
Ethan’s Book“But most importantly, responsive web design isn’t intended to serve as a replacement for mobile web sites.
Responsive design is, I believe,
• one part design philosophy, • one part front-end development strategy.
And as a development strategy, it’s meant to be evaluated to see if it meets the needs of the project you’re working on."
http://mediaqueri.es has several example sites
![Page 10: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/10.jpg)
Mark Boulten(Jan 2011 at the New Adventures Conference Nottingham, England)http://2011.newadventuresconf.com/audio/mark.html
Responsive design is nothing new.
• Products adapt to our needs.
• Human / technology connection that started with the monks.
EMBRACE REFLOW!!!
![Page 11: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/11.jpg)
1. Design base layout size from the content. If no constraints, create some
2. Use relative measurements, not fixed or absolute
3. Use media queries and responsive design techniques… embrace REFLOW
Mark Boulten(Jan 2011 at the New Adventures Conference Nottingham, England)
![Page 12: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/12.jpg)
Mark Boulten (Jan 2011)
http://www.markboulton.co.uk/journal/comments/a-responsive-experience
Adaptive Layouts:Currently we’re changing layouts based on a screen size.
We’re capable of so much more.
Today:• Screen size Device capabilities
Consider:• Network and context (at home, in a train (direction), etc.)
• Content based on context
![Page 13: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/13.jpg)
Mark Boulten (Jan 2011)
Responsive Web Design• Currently changes a layout because of the environment.
• Will grow into a practice of changing an experience because of the environment:
1. Content 2. Layout 3. Behavior 4. Perception 5. Brand6. Feel
All of those things are open for change…
http://www.markboulton.co.uk/journal/comments/a-responsive-experiencehttp://2011.newadventuresconf.com/audio/mark.html
![Page 14: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/14.jpg)
What is Responsive Design?
Adaptive Layout+
??????? ????????+
???? ??????????
Mairead Buchan – headlondon.comhttp://headlondon.com/our-thoughts/news/posts/responsive-web-design
![Page 15: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/15.jpg)
Jeffrey Zeldman July 2011 – expands definition
Our understanding of 'responsive design' should be broadened to cover any approach that delivers elegant visual experiences regardless of the size of the user’s display and the limitations or capabilities of the device."
http://unstoppablerobotninja.com/
![Page 16: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/16.jpg)
http://www.lullabot.com/articles/responsive-adaptive-web-design
Aaron Gustafson - ADAPTIVE WEB DESIGN (progressive enhancement)
Jared Ponchot (Sept, 2011)The key to understanding progressive enhancement or graceful degradation lies in the starting point.
√ So, I've continued believing that "adaptive web design" refers more to the secondary and less fluid approach of adapting existing web designs, or designing for controlled adaptation as opposed to a truly fluid and flexible "responsive" design.
Dan Cederholm (Aug 2011)Finally… we’re not designing sheets of paper that happen to be on screen.
√ “I’d love us to rethink things in a more holistic manner…but for now… for dribbble.com let’s take a step towards a responsive design by crafting an adaptive stylesheet… (and) continue to maintain just one codebase.
http://simplebits.com/notebook/2011/08/19/adapted/
![Page 17: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/17.jpg)
What is Responsive Design?
Adaptive Layout+
C?????? S???????+
???? ??????????
Mairead Buchan – headlondon.comhttp://headlondon.com/our-thoughts/news/posts/responsive-web-design
![Page 18: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/18.jpg)
Where do I start?
Adaptive Style-sheetHolistic ApproachProgressive EnhancementGraceful DegradationFluid Grid
?
![Page 19: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/19.jpg)
Mobile First (invert the design approach)
“This is accomplished by setting resolution “break points”
and applying a different set of layout rules and media assets
to each. A break point can be thought of as a conditional
statement that determines if a device meets specific criteria
like a minimum width of 600 pixels. If that condition is true,
then the browser applies a different set of layout rules, usually
through CSS, though sometimes with a little JavaScript as
well”
“With responsive web design, you can set a baseline (mobile) experience first, then progressively enhance or adapt your layout as device capabilities change.”
“Just a half-day of brainstorming about your mobile experience can open up new ways of thinking about your product”
![Page 20: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/20.jpg)
We really need to shift now to start thinking about building mobile first. This is an even bigger shift than the PC revolution.”
-Kevin Lynch, CTO Adobe
We're just now starting to think about mobile first and desktop second for a lot of our products.”
-Kate Aronowitz, Design Director Facebook
“Designing the mobile app first forced us to strip down to essentials.”
-Bill DeRouchey, BankSimple
“Web products should be designed for mobile first.”Luke Wroblewski - December 7, 2011 Technology Conference & Expo -Washington, DC
![Page 21: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/21.jpg)
Designing for Mobile First
Designing for mobile forces you to get there, like it or not.
The Southwest Airlines iPhone
application only has room for what
actually matters
Know your customers and their business…
![Page 22: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/22.jpg)
What is Responsive Design?
Adaptive Layout+
C?????? S???????+
???? ??????????
Mairead Buchan – headlondon.comhttp://headlondon.com/our-thoughts/news/posts/responsive-web-design
![Page 23: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/23.jpg)
What is Responsive Design?
Adaptive Layout+
Content Strategy+
???? ??????????
Mairead Buchan – headlondon.comhttp://headlondon.com/our-thoughts/news/posts/responsive-web-design
![Page 24: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/24.jpg)
ContentAnything that conveys information
• Text• Images• Graphics• Social media• Video
All disciplines are responsible for content
• Audio• Downloadable
documents• Icons• Logos• Buttons
• Brand managers• Developers• Designers
• Copywriters• UX• Online marketers
![Page 25: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/25.jpg)
Content StrategyHarmony through collaboration
• On-message copy• On-brand design• Intuitive and memorable interface• Solid and accommodating technology
There are no requirements for pixel perfection across platforms… content is malleable
Create the right content to serve the users’needs
.net issue 222 “Content strategy for the web” – Sandi Wassmer
![Page 26: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/26.jpg)
Jeffrey Zeldman
“Remember to think cross-device instead of just mobile.”
Our understanding of 'responsive design' should be broadened to cover any approach that delivers elegant visual experiences regardless of the size of the user’s display and the limitations or capabilities of the device."
![Page 27: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/27.jpg)
What is Responsive Design?
Adaptive Layout+
Content Strategy+
U??? E?????????
Mairead Buchan – headlondon.comhttp://headlondon.com/our-thoughts/news/posts/responsive-web-design
![Page 28: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/28.jpg)
What is Responsive Design?
Adaptive Layout+
Content Strategy+
User Experience
Mairead Buchan – headlondon.comhttp://headlondon.com/our-thoughts/news/posts/responsive-web-design
![Page 29: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/29.jpg)
User Experience
Dan Saffer, Kicker Studios1. What a customer perceives while engaged with your
product
2. A way of looking at a product holistically… doesn’t care how its made…
Jared Spool, CEO of User Interface EngineeringUX is just one thing… whether or not your design is intuitive
• The average designer doesn’t spend any time watching people use the things they design
• If you think of a designer as a type of artist, their medium is actually the behavior of the users
• A good designer creates behaviors
![Page 30: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/30.jpg)
Responsive Design Is
Adaptive Layout+
Content Strategy+
User Experience
Mairead Buchan – headlondon.comhttp://headlondon.com/our-thoughts/news/posts/responsive-web-design
![Page 31: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/31.jpg)
Two of my favorites:
![Page 32: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/32.jpg)
Responsive Design:Adaptive Layout
CSS3 Media queries
• Flexible Layout (aka fluid grids, elastic layouts, etc.)
• Flexible images
+Content Strategy
+User Experience
Mairead Buchan – headlondon.comhttp://headlondon.com/our-thoughts/news/posts/responsive-web-design
![Page 33: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/33.jpg)
Media QueriesAllow detection of:1. Width, height, orientation, aspect ratio
Example (HTML):<link rel=“stylesheet” href=“ipad.css” media=“screen”>
@media [not|only] type [and] (expression) {rules} [,type… ] [,type…]
Use of a meta tag is recommended:<meta name=“viewport” content=“width=device-width initial-scale=1”>
Examples (CSS usage):@import url(“iphone.css") screen and (max-device-width: 480px);
The not negates what follows… all that follows, except the comma OR@media not screen and (min-width: 600px) and (max-width:1200px)
The “only” keyword forces usage only by CSS3 capable browsers@media only and (device-aspect-ratio:16/9)
![Page 34: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/34.jpg)
Supported in all “modern” browsers (except IE8 and under)
• respond.js by Scott Jehlhttps://github.com/philwareham/txp-h5bp-theme/issues/9
• http://code.google.com/p/css3-mediaqueries-js/
• http://protofunc.com/scripts/jquery/mediaqueries/
http://www.quirksmode.org/blog/archives/2010/09/combining_meta.htmlhttp://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-querieshttp://resizemybrowser.com/
Media Queries
![Page 35: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/35.jpg)
Combine <meta> with viewport media queries
http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
<meta name="viewport" content="width=device-width">
Normally the layout viewport takes a width that the vendor has decided is optimal for viewing desktop sites.
If you combine a width media query with the meta viewport tag, your site will use the width that the device vendor considers optimal.
![Page 36: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/36.jpg)
/* Smartphones (portrait and landscape) ----------- */@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ }
/* Smartphones (landscape) ----------- */@media only screen and (min-width : 321px) { /* Styles */ }
/* Smartphones (portrait) ----------- */@media only screen and (max-width : 320px) { /* Styles */ }
/* iPads (portrait and landscape) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ }
/* iPads (landscape) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ }
/* iPads (portrait) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ }
//* Desktops and laptops ----------- */@media only screen and (min-width : 1224px) { /* Styles */ }
/* Large screens ----------- */@media only screen and (min-width : 1824px) { /* Styles */ }
/* iPhone 4 ----------- */@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ }
http://www.smipple.net/snippet/joost.kiens/Common%20@media%20queries
Common Media Queries
![Page 37: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/37.jpg)
Responsive Design:Adaptive Layout
• CSS3 Media queries
Flexible Layout (aka fluid, liquid grids, elastic layouts, etc.)
• Flexible images
+Content Strategy
+User Experience
Mairead Buchan – headlondon.comhttp://headlondon.com/our-thoughts/news/posts/responsive-web-design
![Page 38: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/38.jpg)
Grid Systems1. A grid is a consistent system for the placment of content
2. It works on two levels: • at the unit level of cells (e.g. 60×60 pixels)• at the column level (e.g. 4 columns)”
3. Consistently implemented, increases readers’ confidence
1140 – http://cssgrid.net
960 – 960.gs
http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/
http://www.codinghorror.com/blog/2007/05/lets-build-a-grid.html
![Page 39: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/39.jpg)
Two levels - Unit (cell) and Column
![Page 40: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/40.jpg)
Balance Increases Confidence
A confident layout A grid-less “insecure” layout
![Page 41: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/41.jpg)
Mind the grid:• When you're not sure where to begin with your UI design,
start by building a grid. • Not a straitjacket. • Embracing the constraints of a grid in your design-- and
knowing when to break those constraints-- is a crucial skill for designers.
http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/
http://www.codinghorror.com/blog/2007/05/lets-build-a-grid.html
![Page 42: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/42.jpg)
Flexible Layouts (Grids)1. Use percentages (for column widths, margins, padding, etc.)
2. Use ems instead of pixels (for font size and line height)
3. Use media queries when flexible layouts break… all layouts will have a “breakpoint”
4. Applied different CSS to change the layout aspect for each “breakpoint”
Flexible Grids – usage overview
![Page 43: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/43.jpg)
http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you
GridsFIXED FLUID, LIQUID, ADAPTIVE
![Page 44: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/44.jpg)
Grid Math- its all relative1. Start with the container, set it in pixels… say 960px
2. Make internal columns percentages using this formula:target ÷ context = result 200px ÷ 960 = 20.83%
3. Change Fonts and Line Height from “px” to “em”:1. Font-size:24px becomes font-size:1.5em (24px ÷ 16px = 1.5em) 2. Font-size:14px becomes font-size:0.875em (14px ÷ 16px = 0.875)3. Font-size:12px becomes font-size:0.75 em (12px ÷ 16px = 0.75)4. Font-size:12px becomes font-size:75% 5. Line-height: 1.5em; (em is relative to its container… 18px for 12px font size)
4. Now change the container to a percentage (960px to something like 80%)
That’s it! QED
![Page 45: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/45.jpg)
resizemybrowser.com
![Page 46: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/46.jpg)
benjaminkeen.com/misc/bricss/
![Page 47: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/47.jpg)
pxtoem.com
![Page 48: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/48.jpg)
Responsive Design:Adaptive Layout
• CSS3 Media queries
• Flexible Layout (aka fluid grids, elastic layouts, etc.)
Flexible images
+Content Strategy
+User Experience
Mairead Buchan – headlondon.comhttp://headlondon.com/our-thoughts/news/posts/responsive-web-design
![Page 49: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/49.jpg)
Flexible ImagesImages:width: 100% and use ie9.js
max-width: 100%
Backgrounds:jquery-backstretch by Scott Robbin for IE6, IE7, IE8
background-size:cover;– Scales the image, while preserving its intrinsic aspect ratio (if any), to the
smallest size such that both its width and its height can completely cover the background positioning area.
background-size:contain;– Scales the image, while preserving its intrinsic aspect ratio (if any), to the
largest size such that both its width and its height can fit inside the background positioning area.
![Page 50: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/50.jpg)
caniuse.com
![Page 51: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/51.jpg)
Responsive Design is:
Adaptive Layout+
Content Strategy+
User Experience
Mairead Buchan – headlondon.comhttp://headlondon.com/our-thoughts/news/posts/responsive-web-design
![Page 52: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/52.jpg)
Joomla Template Vendors with Responsive Templates1. JoomlaBamboo – yes since Sept 2011 2. JoomlaArt – yes since January, 2012 (T3V2)3. JoomlaPraise – yes since March, 20124. JoomlaJunkie – not yet (Morph/modernizer)5. Rocket Theme – not yet (Gantry/960 grid) 6. YooTheme – not yet (Warp)
EXTENSIONS1. Mobile Joomla - www.mobilejoomla.com/
CUSTOM
Seth Warburton (internet-inspired.com) created a starter HTML5/mobile-first Joomla template, along with HTML5 content override modules
![Page 53: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/53.jpg)
joomlabamboo.comUse Coupon Code (does not expire):
chicagobamboo
for 25% off a subscription… compliments of Anthony Olsen
![Page 54: Responsive Design and Joomla!](https://reader034.vdocument.in/reader034/viewer/2022051819/54c82cb84a7959584c8b457a/html5/thumbnails/54.jpg)
End of Presentation
Q&A andThank You!