SlideShare a Scribd company logo
1 of 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

More Related Content

Viewers also liked

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
 

Viewers also liked (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
 

Recently uploaded

Beauty Amidst the Bytes_ Unearthing Unexpected Advantages of the Digital Wast...
Beauty Amidst the Bytes_ Unearthing Unexpected Advantages of the Digital Wast...Beauty Amidst the Bytes_ Unearthing Unexpected Advantages of the Digital Wast...
Beauty Amidst the Bytes_ Unearthing Unexpected Advantages of the Digital Wast...DhatriParmar
 
Scientific Writing :Research Discourse
Scientific  Writing :Research  DiscourseScientific  Writing :Research  Discourse
Scientific Writing :Research DiscourseAnita GoswamiGiri
 
ESP 4-EDITED.pdfmmcncncncmcmmnmnmncnmncmnnjvnnv
ESP 4-EDITED.pdfmmcncncncmcmmnmnmncnmncmnnjvnnvESP 4-EDITED.pdfmmcncncncmcmmnmnmncnmncmnnjvnnv
ESP 4-EDITED.pdfmmcncncncmcmmnmnmncnmncmnnjvnnvRicaMaeCastro1
 
Transaction Management in Database Management System
Transaction Management in Database Management SystemTransaction Management in Database Management System
Transaction Management in Database Management SystemChristalin Nelson
 
ICS2208 Lecture6 Notes for SL spaces.pdf
ICS2208 Lecture6 Notes for SL spaces.pdfICS2208 Lecture6 Notes for SL spaces.pdf
ICS2208 Lecture6 Notes for SL spaces.pdfVanessa Camilleri
 
Mental Health Awareness - a toolkit for supporting young minds
Mental Health Awareness - a toolkit for supporting young mindsMental Health Awareness - a toolkit for supporting young minds
Mental Health Awareness - a toolkit for supporting young mindsPooky Knightsmith
 
Concurrency Control in Database Management system
Concurrency Control in Database Management systemConcurrency Control in Database Management system
Concurrency Control in Database Management systemChristalin Nelson
 
Man or Manufactured_ Redefining Humanity Through Biopunk Narratives.pptx
Man or Manufactured_ Redefining Humanity Through Biopunk Narratives.pptxMan or Manufactured_ Redefining Humanity Through Biopunk Narratives.pptx
Man or Manufactured_ Redefining Humanity Through Biopunk Narratives.pptxDhatriParmar
 
Team Lead Succeed – Helping you and your team achieve high-performance teamwo...
Team Lead Succeed – Helping you and your team achieve high-performance teamwo...Team Lead Succeed – Helping you and your team achieve high-performance teamwo...
Team Lead Succeed – Helping you and your team achieve high-performance teamwo...Association for Project Management
 
week 1 cookery 8 fourth - quarter .pptx
week 1 cookery 8  fourth  -  quarter .pptxweek 1 cookery 8  fourth  -  quarter .pptx
week 1 cookery 8 fourth - quarter .pptxJonalynLegaspi2
 
Unraveling Hypertext_ Analyzing Postmodern Elements in Literature.pptx
Unraveling Hypertext_ Analyzing  Postmodern Elements in  Literature.pptxUnraveling Hypertext_ Analyzing  Postmodern Elements in  Literature.pptx
Unraveling Hypertext_ Analyzing Postmodern Elements in Literature.pptxDhatriParmar
 
How to Fix XML SyntaxError in Odoo the 17
How to Fix XML SyntaxError in Odoo the 17How to Fix XML SyntaxError in Odoo the 17
How to Fix XML SyntaxError in Odoo the 17Celine George
 
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdfGrade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdfJemuel Francisco
 
4.11.24 Poverty and Inequality in America.pptx
4.11.24 Poverty and Inequality in America.pptx4.11.24 Poverty and Inequality in America.pptx
4.11.24 Poverty and Inequality in America.pptxmary850239
 
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...DhatriParmar
 
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptxINTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptxHumphrey A Beña
 

Recently uploaded (20)

Beauty Amidst the Bytes_ Unearthing Unexpected Advantages of the Digital Wast...
Beauty Amidst the Bytes_ Unearthing Unexpected Advantages of the Digital Wast...Beauty Amidst the Bytes_ Unearthing Unexpected Advantages of the Digital Wast...
Beauty Amidst the Bytes_ Unearthing Unexpected Advantages of the Digital Wast...
 
Scientific Writing :Research Discourse
Scientific  Writing :Research  DiscourseScientific  Writing :Research  Discourse
Scientific Writing :Research Discourse
 
ESP 4-EDITED.pdfmmcncncncmcmmnmnmncnmncmnnjvnnv
ESP 4-EDITED.pdfmmcncncncmcmmnmnmncnmncmnnjvnnvESP 4-EDITED.pdfmmcncncncmcmmnmnmncnmncmnnjvnnv
ESP 4-EDITED.pdfmmcncncncmcmmnmnmncnmncmnnjvnnv
 
Transaction Management in Database Management System
Transaction Management in Database Management SystemTransaction Management in Database Management System
Transaction Management in Database Management System
 
ICS2208 Lecture6 Notes for SL spaces.pdf
ICS2208 Lecture6 Notes for SL spaces.pdfICS2208 Lecture6 Notes for SL spaces.pdf
ICS2208 Lecture6 Notes for SL spaces.pdf
 
Paradigm shift in nursing research by RS MEHTA
Paradigm shift in nursing research by RS MEHTAParadigm shift in nursing research by RS MEHTA
Paradigm shift in nursing research by RS MEHTA
 
Mental Health Awareness - a toolkit for supporting young minds
Mental Health Awareness - a toolkit for supporting young mindsMental Health Awareness - a toolkit for supporting young minds
Mental Health Awareness - a toolkit for supporting young minds
 
INCLUSIVE EDUCATION PRACTICES FOR TEACHERS AND TRAINERS.pptx
INCLUSIVE EDUCATION PRACTICES FOR TEACHERS AND TRAINERS.pptxINCLUSIVE EDUCATION PRACTICES FOR TEACHERS AND TRAINERS.pptx
INCLUSIVE EDUCATION PRACTICES FOR TEACHERS AND TRAINERS.pptx
 
prashanth updated resume 2024 for Teaching Profession
prashanth updated resume 2024 for Teaching Professionprashanth updated resume 2024 for Teaching Profession
prashanth updated resume 2024 for Teaching Profession
 
Concurrency Control in Database Management system
Concurrency Control in Database Management systemConcurrency Control in Database Management system
Concurrency Control in Database Management system
 
Faculty Profile prashantha K EEE dept Sri Sairam college of Engineering
Faculty Profile prashantha K EEE dept Sri Sairam college of EngineeringFaculty Profile prashantha K EEE dept Sri Sairam college of Engineering
Faculty Profile prashantha K EEE dept Sri Sairam college of Engineering
 
Man or Manufactured_ Redefining Humanity Through Biopunk Narratives.pptx
Man or Manufactured_ Redefining Humanity Through Biopunk Narratives.pptxMan or Manufactured_ Redefining Humanity Through Biopunk Narratives.pptx
Man or Manufactured_ Redefining Humanity Through Biopunk Narratives.pptx
 
Team Lead Succeed – Helping you and your team achieve high-performance teamwo...
Team Lead Succeed – Helping you and your team achieve high-performance teamwo...Team Lead Succeed – Helping you and your team achieve high-performance teamwo...
Team Lead Succeed – Helping you and your team achieve high-performance teamwo...
 
week 1 cookery 8 fourth - quarter .pptx
week 1 cookery 8  fourth  -  quarter .pptxweek 1 cookery 8  fourth  -  quarter .pptx
week 1 cookery 8 fourth - quarter .pptx
 
Unraveling Hypertext_ Analyzing Postmodern Elements in Literature.pptx
Unraveling Hypertext_ Analyzing  Postmodern Elements in  Literature.pptxUnraveling Hypertext_ Analyzing  Postmodern Elements in  Literature.pptx
Unraveling Hypertext_ Analyzing Postmodern Elements in Literature.pptx
 
How to Fix XML SyntaxError in Odoo the 17
How to Fix XML SyntaxError in Odoo the 17How to Fix XML SyntaxError in Odoo the 17
How to Fix XML SyntaxError in Odoo the 17
 
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdfGrade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
 
4.11.24 Poverty and Inequality in America.pptx
4.11.24 Poverty and Inequality in America.pptx4.11.24 Poverty and Inequality in America.pptx
4.11.24 Poverty and Inequality in America.pptx
 
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
 
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptxINTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
 

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/

Editor's Notes

  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.