design4drupal boston 2013 - bumps in the road to responsive
TRANSCRIPT
![Page 1: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/1.jpg)
BUMPS IN THE ROADAddressing the Challenges of Responsive Web Design
![Page 2: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/2.jpg)
WHO WE ARE
• Michael Miles (@mikemiles86)
• Salem Ghoweri (@salem_ghoweri)
• Genuine Interactive (@WeAreGenuine)
![Page 3: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/3.jpg)
AS RESPONSIVE WEB DESIGN (RWD) IS MATURINGWE ARE BEGINNING TO
IDENTIFY AND UNDERSTANDTHE ROADBLOCKS
![Page 4: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/4.jpg)
WE ARE HERE TO SHARE WHAT WE’VE LEARNED
![Page 5: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/5.jpg)
RWD CHALLENGES
• many designers still think in terms of pixels
• traditional design software only supports static layouts
• confusion about what’s appropriate for which tools
• where to start? start from scratch? use community theme?
• page bloat (multiple versions of images, tons of javascript and css)
![Page 6: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/6.jpg)
IN THE BEGINNING
OF THE WEB...
![Page 7: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/7.jpg)
• Everyone used the same up-to-date Modern browser
![Page 8: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/8.jpg)
• On the same sized, perfectly calibrated monitor
![Page 9: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/9.jpg)
![Page 10: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/10.jpg)
![Page 11: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/11.jpg)
“Ever” -no one
![Page 12: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/12.jpg)
ASSUMPTIONS PERIOD:.COM BUBBLE - IPHONE
http://nataliemilton.com/wp-content/uploads/2013/03/960px-900.png
• “The web is just a page in a browser”
•Defined design areas.
•Only needed one design
![Page 13: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/13.jpg)
•Mobile web browsing
• Separate, different experiences for users.
•Need two designs
ASSUMPTIONS PERIOD:IPHONE - IPAD
![Page 14: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/14.jpg)
0
20
40
60
80
2008 2009 2010 2011 2012 2013 2014 2015
U.S. SMARTPHONE ADOPTION
![Page 15: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/15.jpg)
iPad Nexus 10 Galaxy Tab 3 Galaxy Note
Nexus 4iPhone 4S iPhone 5 Galaxy S 3 Galaxy S 4 Droid DNA HTC One Galaxy Note 2 Galaxy Mega LG Optimus
Nexus 7Galaxy Mega Galaxy Tab 3 iPad Mini
TODAY, THINGS ARE COMPLICATED.
![Page 16: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/16.jpg)
• There is only one web
• There is only one design
•Users expect one experience
ASSUMPTIONS PERIOD:IPAD - TODAY
![Page 17: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/17.jpg)
![Page 18: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/18.jpg)
A PAGE IS NOT A PAGECan’t make assumptions
Fixed sizes: Gone
Must think differently
![Page 19: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/19.jpg)
HOW DO I DESIGN RESPONSIVELY?
![Page 20: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/20.jpg)
![Page 21: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/21.jpg)
• Elements will shift • Define columns • Keep it simple
![Page 22: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/22.jpg)
eesc.mit.eduMIT EECS
![Page 23: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/23.jpg)
FROM FIXED TO FLUID
Designers:
• Think in terms of percentages
•Make element proportional to parents
•Discuss with developers
![Page 24: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/24.jpg)
SHARED VALUE INITIATIVEsharedvalue.org
![Page 25: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/25.jpg)
FLUID FLEXIBLE GRID
•Does not care about device
• Easy to implement
•Create clear, creative designs
![Page 26: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/26.jpg)
TOOLS IN AN AGE OF RESPONSIVE
![Page 27: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/27.jpg)
VS
![Page 28: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/28.jpg)
DESIGNING IN PHOTOSHOP
• Static mockups don’t translate into flexible layouts
• Impractical to mockup infinite number of layout variations
•Difficult to communicate behavior, gestures, animations, etc.
![Page 29: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/29.jpg)
YOU CAN’T DESIGN FOR THE UNKNOWN
![Page 30: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/30.jpg)
DESIGNING IN THE BROWSER
You lose details that might not easily translate to the browser!
•Not everyone is comfortable coding
• Problematic to build what hasn’t been explicitly defined
•Unknown factor : setting expectations and client sign-off are difficult
![Page 31: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/31.jpg)
• Adobe Edge Reflow
![Page 32: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/32.jpg)
![Page 33: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/33.jpg)
THE “PERFECT” RWD DESIGNER TOOL DOESN’T EXIST YET
& MIGHT NEVER EXIST
![Page 34: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/34.jpg)
DON’T WAIT FOR PERFECT;USE WHAT WORKS FOR YOU
![Page 35: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/35.jpg)
ADDITIONALSOLUTIONS
![Page 36: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/36.jpg)
Style Tiles
![Page 37: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/37.jpg)
Style Guide
![Page 38: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/38.jpg)
Interactive Prototype
![Page 39: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/39.jpg)
Front-end Development & Drupal THEMING
![Page 40: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/40.jpg)
WHERE TO START?
• Project has a timeline and budget
• Limited amount of time to start
•Need to know your options
![Page 41: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/41.jpg)
TWO ROADS TO TRAVEL
Community Theme Custom Theme
![Page 42: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/42.jpg)
FIRST WORLD PROBLEMS
![Page 43: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/43.jpg)
THREE BEST OPTIONS(in our experience)
Adaptive Themes Omega Zen
![Page 44: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/44.jpg)
•Modern techniques (SASS, Compass, etc)
• Plugin system
• Plays well with others
PROS
drupal.org/project/adaptivethemeADAPTIVE THEMES
•Advanced settings
•Generate CSS files (6-8)
CONS
![Page 45: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/45.jpg)
•Optimize core CSS
•Drupal 8 CSS Standards
•Drush Integration
PROS
drupal.org/project/omegaOMEGA
•Advanced settings
•Unique “Zones” paradigm
CONS
![Page 46: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/46.jpg)
• Flexible Fluid Grid
• SASS or vanilla CSS
•Clean Templates
PROS
drupal.org/project/zenZEN
• Very basic
•More time consuming
CONS
![Page 47: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/47.jpg)
• Fits your workflow
• You control the code
•Customized to fit projects
PROS
CUSTOM THEME
• Very time consuming to build correctly
•No community support
CONS
![Page 48: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/48.jpg)
WHICH TO CHOOSE?
Flexibility & Time
Budget
![Page 49: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/49.jpg)
COMBATTING PAGE BLOAT
•Having a single code base with RWD is a double-edged sword
•Common practice is to hide and show device specific content (display: none)
• Remember: mobile users expect fast browsing experience
Browsers still download hidden inline images!
![Page 50: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/50.jpg)
THE SOLUTION: SEND LESS CODE!
![Page 51: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/51.jpg)
; Set the conditional stylesheets that are processed by IE.stylesheets-conditional[lt IE 7][all][] = ie6-and-below.cssstylesheets-conditional[IE 9][all][] = ie9.cssstylesheets-conditional[IE][print][] = ie-print.css
drupal.org/project/conditional_styles
![Page 52: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/52.jpg)
THE SOLUTION: SEND LESS CODE!
+
•Conditional Stylesheets Module
•Modularize CSS with SASS & Compass
• Load, fire your JavaScript conditionally (RequireJS, EnquireJS, Modernizr)
![Page 53: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/53.jpg)
THE SOLUTION: SEND LESS CODE!
•Conditional Stylesheets Module
•Modularize CSS with SASS & Compass
• Load, fire your JavaScript conditionally (RequireJS, EnquireJS, Modernizr)
![Page 54: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/54.jpg)
IMAGES. IMAGES EVERYWHERE.
![Page 55: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/55.jpg)
• Images account for ~60% of page weight
• Resolution independence is one of the largest challenges facing RWD
•Many techniques exist, browser vendor solutions in-progress (Picturefill, srcset)
Retina is here to stay.
IMAGES. IMAGES EVERYWHERE.
![Page 56: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/56.jpg)
SOLUTION #1:TACKLE EVERYTHING BUT
INLINE <IMG>
![Page 57: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/57.jpg)
ICONS & SPRITESFont-icons such as Icomoon or Font Awesome
![Page 58: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/58.jpg)
SVGScalable Vector Graphics (SVGs) for vector graphics, textures
![Page 59: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/59.jpg)
CSS3Background image gradients, textures, box-shadow, etc.
![Page 60: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/60.jpg)
CSS3CSS Hat plugin for Photoshop
![Page 61: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/61.jpg)
CSS3colorzilla.com/gradient-editor
![Page 62: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/62.jpg)
SOLUTION #2:DELIVER HIGH-RES INLINE IMAGES,
OPTIMIZED LIKE HELL
![Page 63: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/63.jpg)
DELIVER SUPER-OPTIMIZED RETINA <IMG>
Non-retina: 95KB400 x 300
Retina: 45KB1024 x 768
filamentgroup.com/lab/rwd_img_compression/
![Page 64: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/64.jpg)
SOLUTION 3:SHIM INLINE RESPONSIVE IMAGES
(FOR NOW)
![Page 65: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/65.jpg)
Adaptive Images ModuleJS-set cookie determines which image version is served
![Page 66: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/66.jpg)
<span data-‐picture data-‐alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> <span data-‐src="small.jpg"></span> <span data-‐src="medium.jpg" data-‐media="(min-‐width: 400px)"></span> <span data-‐src="large.jpg" data-‐media="(min-‐width: 800px)"></span> <span data-‐src="extralarge.jpg" data-‐media="(min-‐width: 1000px)"></span>
<!-‐-‐ Fallback content for non-‐JS browsers. Same img src as the initial, unqualified source element. -‐-‐> <noscript> <img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> </noscript> </span>
PictureFill Modulefuture <picture> element today via JS
![Page 67: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/67.jpg)
DOWN THE ROAD
![Page 68: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/68.jpg)
DRUPAL 8 MOBILE INITIATIVEgroups.drupal.org/mobile/drupal-8
• All core themes are HTML5 and responsive
• Front-end performance improvements (device detection, conditional loading, responsive images)
• Documentation & Guidelines
![Page 69: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/69.jpg)
TAKEAWAYS
• think percentages, not pixels
• mockup in BOTH photoshop & browser, or use tool like Reflow
• code your own theme if experienced, have time, and need lots of flexibility
• otherwise use Adaptive Theme, Omega, or Zen
• reduce page bloat with Compass, Sass., and conditional JS loading
![Page 70: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/70.jpg)
?
![Page 71: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/71.jpg)
![Page 72: Design4Drupal Boston 2013 - Bumps in the Road to Responsive](https://reader034.vdocuments.mx/reader034/viewer/2022051709/5879ec9d1a28ab15288b6f95/html5/thumbnails/72.jpg)
THANK YOU!