Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013

on

  • 1,408 views

Slides from my part 2 class of Designing for multiple devices run at General Assembly in London on the 18th of March 2013. ...

Slides from my part 2 class of Designing for multiple devices run at General Assembly in London on the 18th of March 2013.

ABSTRACT
In Fundamentals for Designing for Multiple Devices, we covered the basics of responsive design and mobile apps (for both Android & iOS). We also looked at how user expectations have shifted behaviour, how consumption patterns have changed and what that has meant for designing products that will be used on multiple devices. This follow-on session will take outset in the guiding principles covered in the previous class and take a closer look at:

- common challenges faced when designing for multiple devices and how to address them
- content strategy and hierarchy across devices
- navigation patterns for responsive design
- app structures and navigation patterns
- how to test both responsive sites and apps

Statistics

Views

Total Views
1,408
Views on SlideShare
1,407
Embed Views
1

Actions

Likes
4
Downloads
25
Comments
0

1 Embed 1

https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013 Presentation Transcript

  • 1. Anna Dahlström founder byflock www.annadahlstrom.com anna.dahlstrom@gmail.com annadahlstrom PART 2 DESIGNING FOR MULTIPLE DEVICES London 18th March 2013http://desktopwallpaper-s.com/19-Computers/-/Future/ Anna Dahlström founder byflock www.annadahlstrom.com annadahlstrom
  • 2. I’m Anna IA & UX DESIGNER | SWEDISH BUT LONDON BASED FREELANCING + WORKING ON A STARTUP LOVES QUOTES & CHALLENGES This is Öresundsbron, the bridge between Sweden & Denmarkwww.flickr.com/photos/dahlstroms/4411448782/
  • 3. AGENDA 1. RECAP ON GUIDING PRINCIPLES 2. COMMON CHALLENGES 3. CROSS DEVICE CONTENT STRATEGY & HIERARCHY 4. RESPONSIVE NAVIGATION 5. APPS STRUCTURE & NAVIGATION 6. TESTING APPS & RESPONSIVE SITES 7. EXERCISES 8. SUMMARY 9. Q & Awww.flickr.com/photos/27147/3648039063
  • 4. 1. RECAP ON... GUIDING PRINCIPLESwww.flickr.com/photos/publicenergy/1846375599
  • 5. MOBILE DEVICES ARE USED 1 ANYWHERE & EVERYWHEREwww.flickr.com/photos/exlibris/2552107635 www.flickr.com/photos/yahnyahn/2996454839
  • 6. A LARGE PROPORTION OF 2 USAGE HAPPENS WHEN WE HAVE TIME TO KILLhttp://www.flickr.com/photos/hanhutton/320464105/ www.flickr.com/photos/edduddiee/4307943164
  • 7. THE SAME TASKS ARE CARRIED 3 OUT ON SMARTPHONES AS ON DESKTOPSwww.flickr.com/photos/frantaylor/4296536332 www.flickr.com/photos/stuckincustoms/440157748
  • 8. USERS INCREASINGLY EXPECT AN 4 EQUAL & CONTINUOS EXPERIENCE ACROSS DEVICESwww.flickr.com/photos/demandaj/7287174776 www.flickr.com/photos/joachim_s_mueller/7110473339
  • 9. CORE CONTENT SHOULD REMAIN 5 THE SAME BUT THE EXPERIENCE SHOULD BE OPTIMISEDwww.flickr.com/photos/ericconstantineau/5618576278 www.flickr.com/photos/jmtimages/2883279193
  • 10. BUT WHY? ” Todays popular devices are not tomorrows so building something which works on any device is better than building something which works on todays devices “ - COMBINED WISE WORDS FROM @ONEXTRAPIXEL & @TRENTWALTONwww.flickr.com/photos/lastquest/1472794031
  • 11. “ 1,057 different mobile devices accessedThe Guardian beta site yesterday (includingone person on a zune!)” ** Source: The Guardian
  • 12. In 2009 1% of global internet traffic camefrom mobiles. In 2010 the number was 4%.By the end of 2012 it had risen to13%.* * Source: www.forbes.com/sites/parmyolson/2012/12/04/5-eye-opening-stats-that-show-the-world-is-going-mobilewww.flickr.com/photos/nasamarshall/6289116940
  • 13. 41% of emails are now opened onmobile devices * * Source: http://econsultancy.com/uk/blog/62268-41-of-email-is-now-opened-on-mobile-deviceswww.flickr.com/photos/jayfresh/3388253576/
  • 14. 2. THE MOST COMMON CHALLENGES WITH RESPONSIVE DESIGNhttp://www.flickr.com/photos/eyesore9/3206408088/
  • 15. WHERE TO START? DEFINE YOUR MOBILE STRATEGY, START SKETCHING &www.flickr.com/photos/pinkpurse/5355919491/ WORKING ACROSS DISCIPLINES
  • 16. HOW MANY VERSIONS SHOULD WE WIREFRAME FOR? DEPENDS ON YOUR PROJECT, BUDGET & TEAM AS WELL AS WHO IS BUILDING ITwww.flickr.com/photos/jorgeq82/4732700819
  • 17. WHAT ABOUT VISUAL DESIGN? LESS STATIC DESIGNS, MORE MODULARITY & PROTOTYPINGwww.flickr.com/photos/donsolo/2136923757/
  • 18. WHAT SCREEN SIZES & RESOLUTIONS SHOULD I DESIGN FOR? USE ANALYTICS FOR GUIDANCE & DESIGN FOR THE MOST COMMON ONESSource: www.flickr.com/photos/dpstyles/3448453466
  • 19. 80% of traffic in your analytics will oftencome from 20% of devices…seems a shamenot to ensure that the site looks and worksespecially well on these devices.* * Source: www.slideshare.net/yiibu/pragmatic-responsive-designwww.flickr.com/photos/adactio/6153481666
  • 20. HOW DO I DEFINEMY BREAKPOINTS?BASE IT ON THE MOST IMPORTANT SCREEN SIZES &ORIENTATIONS AS WELL AS CONTENT & LAYOUT NEEDS www.slideshare.net/yiibu/pragmatic-responsive-design
  • 21. HOW DO I DEFINEMY BREAKPOINTS?BASE IT ON THE MOST IMPORTANT SCREEN SIZES &ORIENTATIONS AS WELL AS CONTENT & LAYOUT NEEDS www.slideshare.net/yiibu/pragmatic-responsive-design
  • 22. HOW DO I DEFINEMY BREAKPOINTS?BASE IT ON THE MOST IMPORTANT SCREEN SIZES &ORIENTATIONS AS WELL AS CONTENT & LAYOUT NEEDS www.slideshare.net/yiibu/pragmatic-responsive-design
  • 23. HOW MANY DEVICES SHOULD I TEST ON? AS MANY AS POSSIBLE BUT PRIORITISE BASED ON YOUR AUDIENCEwww.flickr.com/photos/nomadic_lass/5598218199
  • 24. HOW DOI HANDLEIMAGES?IMAGES & ICONSSHOULD BE AS FLEXIBLEAS POSSIBLEwww.flickr.com/photos/jorgeq82/4732700819
  • 25. 3. CROSS DEVICE CONTENT STRATEGY & HIERARCHYhttp://www.flickr.com/photos/young_einstein/74097753/
  • 26. “ Content needs to be choreographed to ensure the intended message is preserved on any device and at any width ”www.flickr.com/photos/theaftershock/2811382400/ - TRENT WALTON
  • 27. KNOW YOUR CONTENT PRIORITISE WHAT & HOW MUCH BUT KEEP THE CORE CONTENT THE SAMEwww.flickr.com/photos/sepblog/3649959481
  • 28. CONSIDER THE MOBILE CONTEXT THE USE CASE MAY BE THE SAME BUT USING A MOBILE DEVICE IS DIFFERENTwww.flickr.com/photos/stephangeyer/
  • 29. DEFINE YOUR GRID & BREAK POINTS • USE AS THE BASIS OF YOUR PAGE LAYOUTS • CHECKPOINT FOR MODULE SIZES & VARIANTS • FIXED OR FLUID COLUMNS • DEFINES HOW CONTENT WILL BEHAVE ACROSS DEVICEShttp://foundation.zurb.com/docs/layout.php
  • 30. www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/WORK THROUGHYOUR CONTENTSTACKING STRATEGYACROSS DEVICES & ORIENTATION
  • 31. MOBILE VS. DESKTOP FIRST• START LARGE OR SMALL WHAT EVER WORKS BEST FOR YOU• ABOUT CONTENT, PRIORITISING & CONSIDERING HOW IT WILL WORK ACROSS DEVICES
  • 32. DON’T JUST WORK WITH COLUMNS THINK OF THE NARRATIVE OF THE PAGEwww.flickr.com/photos/garrettc/6260768486/
  • 33. IDENTIFY YOUR MAIN MODULE TYPES DEFINE HOW THEY SHOULD BEHAVE ACROSS DEVICES & ORIENTATIONSwww.flickr.com/photos/boltofblue/4418442567
  • 34. “ With thousands and thousands of pageson the Crayola site, it wasn’t efficient towireframe every single page and state. Wecreated a system of components that couldbe assembled in different configurations toaccommodate the unique content neededfor each type of page.” * * Source: http://danielmall.com/work/crayola/Screenshot: www.crayola.co.uk/
  • 35. LIKE PLAYING REAL LIFE TETRISPRE-DEFINED POCKETS FOR THE CONTENT TO SLOT INTOwww.flickr.com/photos/fritzon/195008860
  • 36. 4. A LOOK AT RESPONSIVE NAVIGATIONwww.flickr.com/photos/taytom/5277657429
  • 37. EXCELLENT READ‘RESPONSIVE NAVIGATION PATTERNS’by Brad Frost.*Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns
  • 38. “ Mobile navigation should be like a goodfriend: there when you need them but coolenough to give you your space.” * * Source: http://bradfrostweb.com/blog/web/responsive-nav-patternswww.flickr.com/photos/tim_norris/2789759648
  • 39. CONSIDER YOUR PROJECT ASSESSING THE DEPTH NEEDED AS WELL AS & PROS & CONS OF DIFFERENT NAVIGATION APPROACHESwww.flickr.com/photos/inpivic/5205918163/
  • 40. DEFINE YOUR DIFFERENTTYPES OF NAVIGATIONPRIMARY, SECONDARY, TERTIARY AS WELL ASFOOTER & CROSSLINKING http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design
  • 41. BE CONSISTENT USE THE SAME APPROACH THROUGHOUT & HAVE CLEAR, SAYING VISUAL CUESScreenshot: http://cognition.happycog.com/
  • 42. BE CONSISTENT USE THE SAME APPROACH THROUGHOUT & HAVE CLEAR, SAYING VISUAL CUESScreenshot: http://cognition.happycog.com/
  • 43. CONSIDER NAVIGATION ACROSS PRODUCTS WHERE APPS & MOBILE OPTIMISED WEBSITES ARE SIMILAR KEEP IT CONSISTENTScreenshot: www.bbc.co.uk/sport
  • 44. CONSIDER NAVIGATION ACROSS PRODUCTS WHERE APPS & MOBILE OPTIMISED WEBSITES ARE SIMILAR KEEP IT CONSISTENTScreenshot: www.bbc.co.uk/sport
  • 45. CONSIDER NAVIGATION ACROSS PRODUCTS WHERE APPS & MOBILE OPTIMISED WEBSITES ARE SIMILAR KEEP IT CONSISTENTScreenshot: www.bbc.co.uk/sport
  • 46. 5. A LOOK AT... APP STRUCTURES & NAVIGATIONwww.flickr.com/photos/46355638@N00/4414640784
  • 47. EVERY PLATFORMIS ITS OWNLITTLEWORLDWITH THEIR OWN UIGUIDELINES THATUSERS ARE USED TOwww.flickr.com/photos/gadl/3570118243
  • 48. iPhone 12:15 PM More BASIC iOS Customise APP NAME IMG Item NAVIGATION IMG Item IMG Item IMG Item CONSISTENT ACROSS IMG Item VERSIONS Content area IMG Item IMG Item NAVIGATION BAR IMG Item Enables navigation through the app IMG hierarchy. Holds the back button, Home Item Item Item More controls for managing screen content & the title of the screen. Home Item Item Item More BACK BUTTON Should always take the user one step back from where they came from & be descriptive. TAB BAR Can often be customised. Holds the main sections of the app. ‘MORE’ TAB BAR ITEM Used to hold & provide access to all other sections of the app that don’t fit in the tab bar.Source: http://developer.android.com/design/patterns/new-4-0.html
  • 49. ANDROIDNAVIGATIONDIFFERENT BETWEENVERSIONS. IN ICE CREAMSANDWICH:NAVIGATION BARFor devices that dont have thehardware keys. Holds Back, Homeand RecentsACTION BARHolds the most important action buttons foryour app (3 + overflow menu)UP VS. BACK BUTTONThe Up button is used to navigate up one levelbased on the hierarchical structure of the site.Back is used to navigate back one step fromwhere you came from & as such works inreverse chronological order.Source: http://developer.android.com/design/patterns/new-4-0.html
  • 50. IDENTIFY YOUR MAIN SECTIONS EACH SHOULD HAVE A CLEAR FOCUS & PURPOSEwww.flickr.com/photos/inpivic/5205918163/
  • 51. SKETCHYOUR SCREEN FLOWS,NAVIGATION & CONTENTwww.flickr.com/photos/saucef/7184615025
  • 52. AVOID USING THE HOMESCREEN AS A STEPPING POINTCONSIDER THE USE CASE & ENSURE YOU DELIVER VALUEFROM THE FIRST VIEWwww.flickr.com/photos/kruger_otto/5581886586
  • 53. RESEARCH COMMONAPPROACHESFOR INSPIRATION &BEST PRACTICE www.uxarchive.com/
  • 54. RESEARCH COMMONAPPROACHESFOR INSPIRATION &BEST PRACTICE www.uxarchive.com/tasks/sign_up/
  • 55. LOOK ATWHATOTHERS DOBE CREATIVE http://pttrns.com/
  • 56. 6. HOW TO... TEST APPS & RESPONSIVE SITEShttp://www.flickr.com/photos/tomitapio/4053123799/in/photostream/
  • 57. TESTING APPS STRUCTURE, NAVIGATION, INTERACTIONS & TRANSITIONSwww.flickr.com/photos/cristiano_betta/2909483129
  • 58. TESTING RESPONSIVE SITES DO THIS AS EARLY AS POSSIBLEwww.flickr.com/photos/adactio/5818096043
  • 59. IN THE BROWSERBY RESIZING THE BROWSER WINDOW &CHECKING THE DISPLAY OF CONTENT http://thenextweb.com/
  • 60. IN THE BROWSER BY DESIGNING IN THE BROWSER & CREATING A WORKING HTML PROTOTYPEwww.flickr.com/photos/jorgeq82/4732700819
  • 61. USING HANDY TOOLSHELP YOU STYLE & TEST YOUR TYPOGRAPHY http://responsive.is/typecast.com
  • 62. USING EMULATORSALLOW YOU TO VIEW YOUR SITEACROSS DEVICES & ORIENTATIONS http://screenqueri.es/ http://quirktools.com/screenfly/ www.responsinator.com/ http://mattkersley.com/responsive/
  • 63. ON ACTUAL DEVICES EXPENSIVE BUT THERE ARE WAYS AROUND ITwww.flickr.com/photos/arne/5835855777/in/photostream/
  • 64. BUYING BUNDLES & SHARING HELPING EACH OTHERwww.flickr.com/photos/adactio/6800969243/in/photostream/
  • 65. WITH USERS DEFINE YOUR AUDIENCE, TEST CASES, OBJECTIVES & CONSIDER EXPECTATIONS & LIMITATIONSwww.flickr.com/photos/jorgeq82/4732700819
  • 66. 7. TIME TO... PRACTICEwww.flickr.com/photos/icedsoul/3041770422
  • 67. RESPONSIVE NAVIGATION THE TASK: Youve been asked to develop a responsive site for a small furniture store for summer. They sell indoor tables (dinner, kitchen, sofa tables) as well as outdoor tables. They are an EXERCISE ONE independent store and want to inform users about their store. Define how the navigation will work for desktop and mobile. 10 MINUTESwww.flickr.com/photos/icedsoul/3041770422
  • 68. COMPLEX RESPONSIVE NAVIGATION THE TASK: After the successful table store project youve been asked to develop a responsiveEXERCISE TWO site for a large furniture store in time for summer. They sell indoor as well as outdoor furniture and frequently have offers and products they want to push. They group products by room (e.g. kitchen but also by category (e.g. storage) and sub-category (e.g. food storage). Define how the navigation & including sub- navigation will work for desktop and mobile.www.flickr.com/photos/icedsoul/3041770422 15 MINUTES
  • 69. APP STRUCTURE & NAVIGATION THE TASK: The same furniture store wants you to develop an app. Based on the navigation youve defined for the responsive site, work through theEXERCISE THREE screenflow for your app and how the user would navigate to and back from different sections. 15 MINUTESwww.flickr.com/photos/icedsoul/3041770422
  • 70. 8. TO SUMMARISEhttp://www.flickr.com/photos/martinteschner/4569495912/
  • 71. GUIDING PRINCIPLES MOBILE DEVICES ARE USED ANYWHERE & EVERYWHERE A LARGE PROPORTION OF USAGE HAPPENS WHEN WE HAVE TIME TO KILL THE SAME TASKS ARE CARRIED OUT ON SMARTPHONES AS ON DESKTOPS USERS INCREASINGLY EXPECT AN EQUAL & CONTINUOS EXPERIENCE ACROSS DEVICES CORE CONTENT SHOULD REMAIN THE SAME BUT THE EXPERIENCE SHOULD BE OPTIMISEDwww.flickr.com/photos/thecaucas/2597813380
  • 72. COMMON PROBLEMS NUMBER OF WIREFRAMES DEPENDS ON YOUR PROJECT, BUDGET & TEAM AS WELL AS WHO IS BUILDING IT VISUAL DESIGN LESS STATIC DESIGNS, MORE MODULARITY & PROTOTYPING SCREENSIZES & BREAKPOINTS USE ANALYTICS FOR GUIDANCE & DESIGN FOR THE MOST COMMON ONES WHAT TO TEST ON AS MANY AS POSSIBLE BUT PRIORITISE BASED ON YOUR AUDIENCE IMAGES & ICONSwww.flickr.com/photos/thecaucas/2597813380 AS FLEXIBLE AS POSSIBLE
  • 73. CONTENT STRATEGY & HIERARCHY KNOW YOUR CONTENT PRIORITISE WHAT & HOW MUCH BUT KEEP THE CORE CONTENT THE SAME CONSIDER THE MOBILE CONTEXT THE USE CASE MAY BE THE SAME BUT USING A MOBILE DEVICE IS DIFFERENT DEFINE CONTENT STACKING THE GRID & BREAKPOINTS IS YOUR GUIDE BUT DONT JUST WORK WITH THE COLUMNS. CONSIDER EACH MODULE &www.flickr.com/photos/thecaucas/2597813380 THE STORY OF THE PAGE
  • 74. RESPONSIVE NAVIGATION RESEARCH DIFFERENT APPROACHES KNOW YOUR OPTIONS & THE PROS & CONS FOR EACH BASE IT ON YOUR PROJECT ASSESS HOW MANY LEVELS THAT ARE NEEDED & REVIEW APPROACH ACROSS DEVICES BUT ALSO WHAT GOES IN WORK WITH DIFFERENT TYPES ITS NOT JUST ABOUT THE MAIN NAVIGATION BUT ALSO SUB-NAVIGATION, SEARCH, IN PAGE LINKS & THE FOOTER BE CONSISTENT USE SAYING VISUAL CUES & CONSIDERwww.flickr.com/photos/thecaucas/2597813380 NAVIGATION ACROSS ALL PRODUCTS
  • 75. APP STRUCTURES & NAVIGATION BASE ON PROJECT & PLATFORM IDENTIFY YOUR MAIN SECTIONS & KEEP DIFFERENCES IN STRUCTURE & UI GUIDELINES BETWEEN PLATFORMS IN MIND SKETCH BEFORE WIREFRAMING WORK THROUGH YOUR SCREENFLOW, NAVIGATION & CONTENT ACROSS SCREENS VALUE FROM FIRST VIEW AVOID USING THE HOME SCREEN AS A STEPPING POINT BEST PRACTICE & INSPIRATIONwww.flickr.com/photos/thecaucas/2597813380 FOR TYPICAL TASK FLOWS & SCREENS
  • 76. TESTING APPS & RESPONSIVE SITES TESTING APPS BOTH STRUCTURE, NAVIGATION, INTERACTIONS & TRANSITIONS TESTING RESPONSIVE SITES DO THIS AS EARLY AS POSSIBLE TO ENSURE IT ACTUALLY WORKS IN THE BROWSER TESTING IN THE BROWSER BY RESIZING THE BROWSER WINDOW OR DESIGNING & CREATING PROTOTYPES USING EMULATORS ALLOWS YOU TO VIEW HOW YOUR SITE ISwww.flickr.com/photos/thecaucas/2597813380 DISPLAYED ACROSS DEVICES & ORIENTATIONS
  • 77. TESTING APPS & RESPONSIVE SITES ON ACTUAL DEVICES TEST ON AS MANY AS POSSIBLE. THE BEST REPRESENTATION BUT CAN BE EXPENSIVE. INVEST IN KEY DEVICES & POOL TOGETHER TO SHARE DEVICES TESTING WITH USERS TEST EARLY & FREQUENTLY. DEFINE YOUR AUDIENCE, TEST CASES, OBJECTIVES & IDENTIFY SPECIFIC CROSS DEVICE SPECIFIC EXPECTATIONS & LIMITATIONSwww.flickr.com/photos/thecaucas/2597813380
  • 78. 9. FOR THE ROADSOME TAKEAWAYS www.flickr.com/photos/st3f4n/4387291247
  • 79. DEMO, SKETCHING & WORKFLOW www.thismanslife.co.uk/projects/lab/ responsivewireframes/ www.thismanslife.co.uk/projects/lab/ responsiveillustration/ http://nocturnalmonkey.com/archive/ responsive-sketching http://jeremypalford.com/arch-journal/ responsive-web-design-sketch-sheets http://danielmall.com/work/crayola/www.flickr.com/photos/st3f4n/4387291247
  • 80. NAVIGATIONFOR RESPONSIVEDESIGNhttp://bradfrostweb.com/blog/web/responsive-nav-patterns/http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design www.flickr.com/photos/st3f4n/4387291247
  • 81. TESTING http://bradfrostweb.com/blog/mobile/ test-on-real-mobile-devices-without- breaking-the-bank/ http://www.welcomebrand.co.uk/ thoughts/website-testing-phone-bundles/ https://bagcheck.com/blog/22-mobile- device-testing-the-gearwww.flickr.com/photos/st3f4n/4387291247
  • 82. TESTING YOUR RESPONSIVE SITE http://responsive.is/typecast.com http://screenqueri.es/ http://www.responsinator.com/ http://quirktools.com/screenfly/ http://mattkersley.com/responsive/ http://responsivepx.com/ http://protofluid.com/ http://responsiveviewport.com/www.flickr.com/photos/st3f4n/4387291247
  • 83. OTHER USEFUL LINKS www.slideshare.net/yiibu/pragmatic- responsive-design http://stephanierieger.com/on-designing- content-out-a-response-to-zeldman-and- others/ http://bradfrostweb.com/blog/mobile/ support-vs-optimization/ http://en.wikipedia.org/wiki/ List_of_displays_by_pixel_density http://stuffandnonsense.co.uk/blog/about/ we_need_a_standard_show_navigation_i con_for_responsive_web_design http://danielmall.com/work/crayola/www.flickr.com/photos/st3f4n/4387291247
  • 84. Thank you! QUESTIONS? annadahlstrom annadahlstrom anna.dahlstrom@gmail.com www.annadahlstrom.comwww.flickr.com/photos/dahlstroms/4411448782/