Keynote presentation mobile & responsive design
-
Upload
percussion-software -
Category
Documents
-
view
640 -
download
2
Transcript of Keynote presentation mobile & responsive design
![Page 1: Keynote presentation mobile & responsive design](https://reader033.fdocuments.in/reader033/viewer/2022052413/559aa10b1a28abeb088b4747/html5/thumbnails/1.jpg)
@bstninteractive
Responsive DesignScott Noonan, Boston Interactive
@bstninteractive
![Page 2: Keynote presentation mobile & responsive design](https://reader033.fdocuments.in/reader033/viewer/2022052413/559aa10b1a28abeb088b4747/html5/thumbnails/2.jpg)
@bstninteractive
who am i?
Boston Interactive CTO since 2001
Scott Noonan
30+ years software development
15 years in web/CMS space
![Page 3: Keynote presentation mobile & responsive design](https://reader033.fdocuments.in/reader033/viewer/2022052413/559aa10b1a28abeb088b4747/html5/thumbnails/3.jpg)
@bstninteractive
what is responsive design?
a flexible grid
the use of “media queries”
Ethan Marcotte publishes an article in“A List Apart” coining the term responsive design (2010)
![Page 4: Keynote presentation mobile & responsive design](https://reader033.fdocuments.in/reader033/viewer/2022052413/559aa10b1a28abeb088b4747/html5/thumbnails/4.jpg)
@bstninteractive
flexible grid designing your site to grow or shrink withthe size of the viewport
![Page 5: Keynote presentation mobile & responsive design](https://reader033.fdocuments.in/reader033/viewer/2022052413/559aa10b1a28abeb088b4747/html5/thumbnails/5.jpg)
@bstninteractive
flexible grid
![Page 6: Keynote presentation mobile & responsive design](https://reader033.fdocuments.in/reader033/viewer/2022052413/559aa10b1a28abeb088b4747/html5/thumbnails/6.jpg)
@bstninteractive
media queries
use this information to relayoutredesign certain portions of page
determine the width of the viewport
![Page 7: Keynote presentation mobile & responsive design](https://reader033.fdocuments.in/reader033/viewer/2022052413/559aa10b1a28abeb088b4747/html5/thumbnails/7.jpg)
@bstninteractive
media queries
![Page 8: Keynote presentation mobile & responsive design](https://reader033.fdocuments.in/reader033/viewer/2022052413/559aa10b1a28abeb088b4747/html5/thumbnails/8.jpg)
@bstninteractive
what does this really mean? we can now build a website that willrespond to the viewport of the device on which it is being viewed
![Page 9: Keynote presentation mobile & responsive design](https://reader033.fdocuments.in/reader033/viewer/2022052413/559aa10b1a28abeb088b4747/html5/thumbnails/9.jpg)
@bstninteractive
what is responsive design really about? allowing users to easily access and digestcontent regardless of device
creating a user experience that is completeand satisfying for any user on any device
being able to manage one code base andone code repository
being ready for the future - ‘future friendly’
part of your overall content delivery strategy
![Page 10: Keynote presentation mobile & responsive design](https://reader033.fdocuments.in/reader033/viewer/2022052413/559aa10b1a28abeb088b4747/html5/thumbnails/10.jpg)
@bstninteractive
what is responsive design really about?
responsive design is about your content and your users’ experience
![Page 11: Keynote presentation mobile & responsive design](https://reader033.fdocuments.in/reader033/viewer/2022052413/559aa10b1a28abeb088b4747/html5/thumbnails/11.jpg)
@bstninteractive
Unlike “winning an Olympic gold medal, where the problem is well
defined,” building a successful company is actually “more like a science, where you need to follow the trail wherever it leads.”
-Paul Graham, venture capitalist
why should you care?
![Page 12: Keynote presentation mobile & responsive design](https://reader033.fdocuments.in/reader033/viewer/2022052413/559aa10b1a28abeb088b4747/html5/thumbnails/12.jpg)
@bstninteractive
why should you care?
![Page 13: Keynote presentation mobile & responsive design](https://reader033.fdocuments.in/reader033/viewer/2022052413/559aa10b1a28abeb088b4747/html5/thumbnails/13.jpg)
@bstninteractive
why should you care?
![Page 14: Keynote presentation mobile & responsive design](https://reader033.fdocuments.in/reader033/viewer/2022052413/559aa10b1a28abeb088b4747/html5/thumbnails/14.jpg)
@bstninteractive
why should you care?
![Page 15: Keynote presentation mobile & responsive design](https://reader033.fdocuments.in/reader033/viewer/2022052413/559aa10b1a28abeb088b4747/html5/thumbnails/15.jpg)
@bstninteractive
is responsive the right choice for me?
1. Understand your audience
2. Understand your content
![Page 16: Keynote presentation mobile & responsive design](https://reader033.fdocuments.in/reader033/viewer/2022052413/559aa10b1a28abeb088b4747/html5/thumbnails/16.jpg)
@bstninteractive
is responsive the right choice for me?
2. Understand your content rich content
![Page 17: Keynote presentation mobile & responsive design](https://reader033.fdocuments.in/reader033/viewer/2022052413/559aa10b1a28abeb088b4747/html5/thumbnails/17.jpg)
@bstninteractive
is responsive the right choice for me?
2. Understand your content rich content
complex functionality
![Page 18: Keynote presentation mobile & responsive design](https://reader033.fdocuments.in/reader033/viewer/2022052413/559aa10b1a28abeb088b4747/html5/thumbnails/18.jpg)
@bstninteractive
is responsive the right choice for me?
2. Understand your content rich content
non-adaptable design
complex functionality
![Page 19: Keynote presentation mobile & responsive design](https://reader033.fdocuments.in/reader033/viewer/2022052413/559aa10b1a28abeb088b4747/html5/thumbnails/19.jpg)
@bstninteractive
![Page 20: Keynote presentation mobile & responsive design](https://reader033.fdocuments.in/reader033/viewer/2022052413/559aa10b1a28abeb088b4747/html5/thumbnails/20.jpg)
@bstninteractive
what have we learned?responsive is...
not the only answer
not simply resizing your website
not a mobile strategy
![Page 21: Keynote presentation mobile & responsive design](https://reader033.fdocuments.in/reader033/viewer/2022052413/559aa10b1a28abeb088b4747/html5/thumbnails/21.jpg)
@bstninteractive
what have we learned?responsive is...
device agnostic
about the future- be ‘future friendly’
part of your overall content deliverystrategy
![Page 22: Keynote presentation mobile & responsive design](https://reader033.fdocuments.in/reader033/viewer/2022052413/559aa10b1a28abeb088b4747/html5/thumbnails/22.jpg)
@bstninteractive
what have we learned?responsive is...
about content
about the user experience
![Page 23: Keynote presentation mobile & responsive design](https://reader033.fdocuments.in/reader033/viewer/2022052413/559aa10b1a28abeb088b4747/html5/thumbnails/23.jpg)
@bstninteractive@bstninteractive