SlideShare uma empresa Scribd logo
1 de 35
Where There Is No Vision,
      The People Perish
          David J. Hinson, EVP & CIO
                      Hendrix College
Alternate Translation:
Where There Is No Vision,
The People Cast Off Restraint
Mobile First, Responsive Web
Design, Native Apps, And The Whole
Vision Thing
Mobile First
Luke Wroblewski, product designer,
entrepreneur, author and speaker

Design with Mobile in mind,
rather than the Desktop, First

With millions of mobile device activations
per day, people more likely to see your site
on mobile devices before they do on
desktops

Leads to better “full site” designs:
simplify, prioritize, pick out the things
that really matter

Forces you to get down to the bare essence
of what makes your content work

Capabilities that don’t exist on personal computers
Really big change to people’s processes
and mindset

It’s a lot of work
Responsive Web Design
Ethan Marcotte, web designer and
developer

Process of arranging layout so that
important information is presented in a
user readable way, on any kind of device
or screen size

Design meant to be viewed along a
gradient of different experiences

Fluid grids, flexible images, media queries

Same code and content used
throughout your site
It’s a lot of work


Common-denominator approach; even
though it is meant to provide a “gradient
of experiences”, not all experiences are
created equally.


Some duplicated content may be
necessary; you may need to move
content into areas that CSS can’t (now)
accommodate (CSS Regions may provide
some relief here).
WARNING: Humble brag, next 5 minutes
HTML5 / CSS3 Applications
Web applications written in
HTML, Javascript,and CSS


Often easier to develop than
native applications


Generally avoids device-specific
development


Favors “reach” over “richness”


Single code base across all platforms


Titanium, Sencha, PhoneGap, and Mosync are examples of HTML
frameworks designed to support this model of development
A little more work to monetize


No single authoritative
source for application
“discovery”, beyond SEO


They look, act, and “feel”
differently than native mobile
apps


An active internet connection is (mostly) a must


Cautionary (???) Tale: Facebook Mobile and HTML 5
Native Applications
A smartphone application that
is coded in a specific
programming language,
such as Objective C for iOS
and Java for Android
operating systems.


Fast performance and a high
degree of reliability


Access to a phone's various devices, such as its camera, accelerometer,
compass, GPS, and address book


Native apps can be written to be used without an internet connection


Tailored to the native capabilities of the device for which it
is written: native APIs, specific hardware, and display form factors
For each native platform,
expertise must be developed

Platform specialists are
more expensive per hour than
web developers (generally)

iOS development requires
Mac OS X development
machines to run Xcode;
Android may be developed using either Mac or PC; and so on

Device capabilities will prevent a uniform user experience from platform
to platform

Artwork and design assets, while sharable to some extent, must be
specialized by platform

Code re-use between platforms? Aside from service / server side APIs,
it’s a nice bed-time story to tell your kids
Yeah, Yeah Yeah.

   So What?
Before doing
  anything,
Define the problem
you’re solving, and what
   would constitute a
  successful outcome.
Who is your audience?

     What are their expected
      behavioral patterns?

What kinds of devices do they carry?
Who “owns” your app?

     Who will maintain it?

What skillsets do you currently
       have in-house?

What is the expected lifetime
         of this app?
What will it cost to develop?

Where does the money come from?

   Who decides on feature set?

 Who handles customer support?
Who performs QA?

Who are your evangelists?

Who is responsible for PR?

Who declares “victory?”
Mobile Development Prime Directive:

    Strategize, then Operationalize

 What is the story you are trying to tell?
                   NOT

 I have a hammer. Where are the nails?
Where There is
   No Vision,
The People Perish
Questions?
Thank You!
                                                    Twitter: @davidjhinson
                                               Email: hinson@hendrix.edu
http://www.slideshare.net/davidjhinson/where-there-is-no-vision-the-people-
                                                                     perish
Image Credits

http://www.etilox.com/img/main01.png

http://www.psmassages.com/v2/images/vitruvian_man_600.png

http://www.mosync.com/sites/all/themes/mosync/css/img/banner-nov12-devices.png
Sites and Tools Mentioned

http://www.abookapart.com/products/mobile-first

http://www.netmagazine.com/interviews/luke-wroblewski-mobile-first

http://www.edtechmagazine.com/higher/article/2012/09/3-college-websites-
responsive-design

http://www.ektron.com/Press-Releases/Hendrix-College-Wins-Ektron-2012-Site-
of-the-Year-Award/

http://www.abookapart.com/products/responsive-web-design

http://www.alistapart.com/articles/responsive-web-design/

http://www.alistapart.com/articles/fluidgrids/

http://www.1stwebdesigner.com/tutorials/fluid-grids-in-responsive-design/

http://www.alistapart.com/articles/fluid-images/
Sites and Tools Mentioned

https://www.sencha.com/

http://phonegap.com/

http://www.mosync.com/

http://www.html5rocks.com/en/mobile/nativedebate/
Where There is No Vision, The People Perish
Where There is No Vision, The People Perish

Mais conteúdo relacionado

Destaque

self development
self developmentself development
self developmentthuy phan
 
UBTech - The Digital Liberal Arts Experience: Expand Learning Without Leaving...
UBTech - The Digital Liberal Arts Experience: Expand Learning Without Leaving...UBTech - The Digital Liberal Arts Experience: Expand Learning Without Leaving...
UBTech - The Digital Liberal Arts Experience: Expand Learning Without Leaving...David J. Hinson
 
Powerpoint intro
Powerpoint introPowerpoint intro
Powerpoint introbasselin
 
Creative Collaboration at Hendrix: 3D Printing & Makerspaces
Creative Collaboration at Hendrix: 3D Printing & MakerspacesCreative Collaboration at Hendrix: 3D Printing & Makerspaces
Creative Collaboration at Hendrix: 3D Printing & MakerspacesDavid J. Hinson
 
Philippines - Comprehensive DRM Framework End of Course Project
Philippines - Comprehensive DRM Framework End of Course ProjectPhilippines - Comprehensive DRM Framework End of Course Project
Philippines - Comprehensive DRM Framework End of Course Projectanne.orquiza
 
The Five "P"s of Being a Successful CIO
The Five "P"s of Being a Successful CIOThe Five "P"s of Being a Successful CIO
The Five "P"s of Being a Successful CIODavid J. Hinson
 

Destaque (8)

self development
self developmentself development
self development
 
Creative Blocks
Creative BlocksCreative Blocks
Creative Blocks
 
Raspberry Pi Bake-Off
Raspberry Pi Bake-OffRaspberry Pi Bake-Off
Raspberry Pi Bake-Off
 
UBTech - The Digital Liberal Arts Experience: Expand Learning Without Leaving...
UBTech - The Digital Liberal Arts Experience: Expand Learning Without Leaving...UBTech - The Digital Liberal Arts Experience: Expand Learning Without Leaving...
UBTech - The Digital Liberal Arts Experience: Expand Learning Without Leaving...
 
Powerpoint intro
Powerpoint introPowerpoint intro
Powerpoint intro
 
Creative Collaboration at Hendrix: 3D Printing & Makerspaces
Creative Collaboration at Hendrix: 3D Printing & MakerspacesCreative Collaboration at Hendrix: 3D Printing & Makerspaces
Creative Collaboration at Hendrix: 3D Printing & Makerspaces
 
Philippines - Comprehensive DRM Framework End of Course Project
Philippines - Comprehensive DRM Framework End of Course ProjectPhilippines - Comprehensive DRM Framework End of Course Project
Philippines - Comprehensive DRM Framework End of Course Project
 
The Five "P"s of Being a Successful CIO
The Five "P"s of Being a Successful CIOThe Five "P"s of Being a Successful CIO
The Five "P"s of Being a Successful CIO
 

Último

Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfAdmir Softic
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.christianmathematics
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structuredhanjurrannsibayan2
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxDenish Jangid
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxEsquimalt MFRC
 
Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseAnaAcapella
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibitjbellavia9
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxAreebaZafar22
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSCeline George
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...ZurliaSoop
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and ModificationsMJDuyan
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdfQucHHunhnh
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfSherif Taha
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...christianmathematics
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxVishalSingh1417
 
Dyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptxDyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptxcallscotland1987
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin ClassesCeline George
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17Celine George
 

Último (20)

Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 
Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please Practise
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POS
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdf
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
Spatium Project Simulation student brief
Spatium Project Simulation student briefSpatium Project Simulation student brief
Spatium Project Simulation student brief
 
Dyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptxDyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptx
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 

Where There is No Vision, The People Perish

  • 1.
  • 2.
  • 3. Where There Is No Vision, The People Perish David J. Hinson, EVP & CIO Hendrix College
  • 5. Where There Is No Vision, The People Cast Off Restraint
  • 6. Mobile First, Responsive Web Design, Native Apps, And The Whole Vision Thing
  • 8. Luke Wroblewski, product designer, entrepreneur, author and speaker Design with Mobile in mind, rather than the Desktop, First With millions of mobile device activations per day, people more likely to see your site on mobile devices before they do on desktops Leads to better “full site” designs: simplify, prioritize, pick out the things that really matter Forces you to get down to the bare essence of what makes your content work Capabilities that don’t exist on personal computers
  • 9. Really big change to people’s processes and mindset It’s a lot of work
  • 11. Ethan Marcotte, web designer and developer Process of arranging layout so that important information is presented in a user readable way, on any kind of device or screen size Design meant to be viewed along a gradient of different experiences Fluid grids, flexible images, media queries Same code and content used throughout your site
  • 12. It’s a lot of work Common-denominator approach; even though it is meant to provide a “gradient of experiences”, not all experiences are created equally. Some duplicated content may be necessary; you may need to move content into areas that CSS can’t (now) accommodate (CSS Regions may provide some relief here).
  • 13. WARNING: Humble brag, next 5 minutes
  • 14. HTML5 / CSS3 Applications
  • 15. Web applications written in HTML, Javascript,and CSS Often easier to develop than native applications Generally avoids device-specific development Favors “reach” over “richness” Single code base across all platforms Titanium, Sencha, PhoneGap, and Mosync are examples of HTML frameworks designed to support this model of development
  • 16. A little more work to monetize No single authoritative source for application “discovery”, beyond SEO They look, act, and “feel” differently than native mobile apps An active internet connection is (mostly) a must Cautionary (???) Tale: Facebook Mobile and HTML 5
  • 18. A smartphone application that is coded in a specific programming language, such as Objective C for iOS and Java for Android operating systems. Fast performance and a high degree of reliability Access to a phone's various devices, such as its camera, accelerometer, compass, GPS, and address book Native apps can be written to be used without an internet connection Tailored to the native capabilities of the device for which it is written: native APIs, specific hardware, and display form factors
  • 19. For each native platform, expertise must be developed Platform specialists are more expensive per hour than web developers (generally) iOS development requires Mac OS X development machines to run Xcode; Android may be developed using either Mac or PC; and so on Device capabilities will prevent a uniform user experience from platform to platform Artwork and design assets, while sharable to some extent, must be specialized by platform Code re-use between platforms? Aside from service / server side APIs, it’s a nice bed-time story to tell your kids
  • 20. Yeah, Yeah Yeah. So What?
  • 21. Before doing anything,
  • 22. Define the problem you’re solving, and what would constitute a successful outcome.
  • 23. Who is your audience? What are their expected behavioral patterns? What kinds of devices do they carry?
  • 24. Who “owns” your app? Who will maintain it? What skillsets do you currently have in-house? What is the expected lifetime of this app?
  • 25. What will it cost to develop? Where does the money come from? Who decides on feature set? Who handles customer support?
  • 26. Who performs QA? Who are your evangelists? Who is responsible for PR? Who declares “victory?”
  • 27. Mobile Development Prime Directive: Strategize, then Operationalize What is the story you are trying to tell? NOT I have a hammer. Where are the nails?
  • 28. Where There is No Vision, The People Perish
  • 30. Thank You! Twitter: @davidjhinson Email: hinson@hendrix.edu http://www.slideshare.net/davidjhinson/where-there-is-no-vision-the-people- perish
  • 32. Sites and Tools Mentioned http://www.abookapart.com/products/mobile-first http://www.netmagazine.com/interviews/luke-wroblewski-mobile-first http://www.edtechmagazine.com/higher/article/2012/09/3-college-websites- responsive-design http://www.ektron.com/Press-Releases/Hendrix-College-Wins-Ektron-2012-Site- of-the-Year-Award/ http://www.abookapart.com/products/responsive-web-design http://www.alistapart.com/articles/responsive-web-design/ http://www.alistapart.com/articles/fluidgrids/ http://www.1stwebdesigner.com/tutorials/fluid-grids-in-responsive-design/ http://www.alistapart.com/articles/fluid-images/
  • 33. Sites and Tools Mentioned https://www.sencha.com/ http://phonegap.com/ http://www.mosync.com/ http://www.html5rocks.com/en/mobile/nativedebate/

Notas do Editor

  1. Where There is No Vision, The People Perish
  2. Where There is No Vision, The People Perish
  3. Where There is No Vision, The People Perish
  4. Questions?
  5. Questions?
  6. Questions?
  7. Questions?
  8. Questions?
  9. Questions?
  10. Questions?
  11. Questions?
  12. Questions?
  13. Questions?
  14. David J. HinsonExecutive Vice President and Chief Information OfficerHendrix College1600 Washington AvenueConway, AR 72032501.505.1526hinson@hendrix.eduhttp://www.twitter.com/davidjhinson
  15. Image credits for images used in this presentation.
  16. Image credits for images used in this presentation.
  17. Image credits for images used in this presentation.