0
WEB DEVELOPMENT                      for          UX DESIGNERSAshlimarie DongFormer HCDE Student
<life>
Web Developer     Since 2005
Programming forDesign’s Sake
Then College Happened
I DiscoveredUser Experience!And it was amazing.
Why shouldUX Designers   care?
Why should UX Designers care?      Complex Storyboarding                                =?
Why should UX Designers care?      Understanding   Browser Constraints
Why should UX Designers care?Creating Something Usable                                   Not reusable                     ...
Why should UX Designers care? Empathizing with Developers
PMUX        DEV
UX                    DEVDiagram credit: http://asinthecity.com/
Core Topics CoveredHardware ConstraintsWeb ConstraintsMobile Web IntroductionTerminologyHTML5 & CSS3 RedliningInternationa...
HardwareConstraints
Waiting sucks
Resource Hogs
Internet connection
Platform  vs
RAM and Virtual Memory
There are solutions!
Solutions to Hardware Constraints           Caching Data
Solutions to Hardware Constraints                        Prefetching    <link rel="prefetch" href="http://www.example.com/">
Solutions to Hardware Constraints        Touch Screen Devices
Solutions to Hardware Constraints: Touch Screen Devices                             Swiping
Solutions to Hardware Constraints: Touch Screen Devices                   No hover state
Solutions to Hardware Constraints: Touch Screen Devices                Ario’s Law                               Look out, ...
Web Constraints
ResolutionsUsing this font size,this sentence canfit a screen with aresolution like this. But doesn’t                     ...
Web Constraints Cross-browser Compatibility         One version to rule them all.
Web Constraints        Graceful Degradation
Web Constraints“Graceful degradation means that your Website continues to operate even when viewedwith less-than-optimal s...
IE9   IE7
Guilty!
Web Constraints                  But…   That doesn’t mean you have to build for the                oldest of the old.     ...
Mobile Focus.
Web vs Native Appshttp://www.worklight.com/resources/webinars-and-tools/native-web-hybrid-mobile-app-development
CommonTerminology
Document Object Model       (DOM)             Document Root                <html> Element                          Element...
Function Callsfunction doEquation() {  alert(3+ 20);}<script type=“text/javascript”>doEquation();</script>
Classes and IDsHi, I’m a class!    Hi, I’m an ID!I’m seen multiple   I’m unique intimes in a          a webpage!webpage..c...
API vs SDKApplicationProgrammingInterface(API)
API vs SDKSoftwareDevelopmentKit (SDK)
HTML History
W3C andWHATWG
http://evolutionofweb.appspot.com/
HTML5 is Rich
Content has more meaning
Resource Description        Framework in Attributes               (RDFa)<div xmlns:v="http://rdf.data-vocabulary.org/#" ty...
Microformats<div class="vcard"><img class="photo"src="www.example.com/bobsmith.jpg" /><strong class="fn">Bob Smith</strong...
Microdata<div itemscope itemtype="http://data-vocabulary.org/Person">My name is <span itemprop="name">Bob Smith</span> but...
Geolocationsvar x=document.getElementById("demo");function getLocation()  {  if (navigator.geolocation)    {    navigator....
CSS3
PseudoclassesPattern            Meaning                   Matches element E when EE:first-child      is the first child of...
Typography@font-face {  font-family: <a-remote-font-name>;  src: <source>;  font-weight: <weight>;  font-style: <style>;}
Detect device typeIn your HTML…<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">In your...
Frameworks        For BetterPerformance & Integration
User Experience Designers  must   deconstruct   designs and interactions           in order toeffectively communicate  con...
Redlining
http://www.currybet.net/cbet_blog/2010/05/will-we-need-to-specify-html5.php
Develop efficiently.
Develop efficiently.<div><h1>Formatting</h1></div>
Develop efficiently.<!--Commenting-->
Develop efficiently.Most importantly:Know the standards.
Develop efficiently.Tables are SO2004.* * Tables should be used for tabular data, not site layouts.
WebInternationalization
Single Byte vs Double Byte
<html lang="en">http://www.w3schools.com/tags/ref_language_codes.asp
Do itYourself.
Lab 1Redlining, HTML5, CSS3
JavaScript
Client-side Languagehttp://contentdeliverance.com/2011/client-server-architecture/
http://red27.net/2010/12/15/what-makes-web-applications-work/
Manipulating the DOM             Document Root                <html> Element                          Element <head>      ...
jQuerya JavaScript Library.  (There are many out there)
Cross-browserCross-language  Consistent    Quick
Animations!$(#clickMe).click(function() {$(#goAnimate).animate({opacity: 0.25,left: +=50,height: toggle }, 5000});
Slideshows              http://slidesjs.com/               http://galleria.io/http://manos.malihu.gr/tuts/sideways_jquery_...
Asynchronous JavaScript and       HTML (AJAX)$.ajax({  url: "test.html",  context: document.body}).done(function() {  $(th...
Plug-ins
Easy-to-use Interface$(function(){  $("#slides").slides({      preload: true,      preloadImage: /img/loading.gif,      pl...
Lab 2Animations and Plug-ins
“[Programmers] struggle with this idea ofmaking computers behave more like humans,because they see humans as weak andimper...
Now you can…Effectively share design conceptsMark up your designsSpeak the Geek Speak (get along with developers)Do it you...
ResourcesW3C Schools: great tutorials for beginnersjQuery Mobile: awesome resource for web appdevelopmentCSS-Tricks: resou...
Thanks!Follow me via Twitter: @designdaisukiOr e-mail me at ashlimarie@gmail.com
Web Development for UX Designers
Web Development for UX Designers
Web Development for UX Designers
Web Development for UX Designers
Web Development for UX Designers
Web Development for UX Designers
Upcoming SlideShare
Loading in...5
×

Web Development for UX Designers

46,183

Published on

An overview of web development essentials that will help you as a user experience designer to not only understand how to integrate designs with development components, but also to learn some tips on interacting effectively with developers.

Published in: Design, Technology

Transcript of "Web Development for UX Designers"

  1. 1. WEB DEVELOPMENT for UX DESIGNERSAshlimarie DongFormer HCDE Student
  2. 2. <life>
  3. 3. Web Developer Since 2005
  4. 4. Programming forDesign’s Sake
  5. 5. Then College Happened
  6. 6. I DiscoveredUser Experience!And it was amazing.
  7. 7. Why shouldUX Designers care?
  8. 8. Why should UX Designers care? Complex Storyboarding =?
  9. 9. Why should UX Designers care? Understanding Browser Constraints
  10. 10. Why should UX Designers care?Creating Something Usable Not reusable Axure rendered HTML
  11. 11. Why should UX Designers care? Empathizing with Developers
  12. 12. PMUX DEV
  13. 13. UX DEVDiagram credit: http://asinthecity.com/
  14. 14. Core Topics CoveredHardware ConstraintsWeb ConstraintsMobile Web IntroductionTerminologyHTML5 & CSS3 RedliningInternationalizationJavaScript and jQuery
  15. 15. HardwareConstraints
  16. 16. Waiting sucks
  17. 17. Resource Hogs
  18. 18. Internet connection
  19. 19. Platform vs
  20. 20. RAM and Virtual Memory
  21. 21. There are solutions!
  22. 22. Solutions to Hardware Constraints Caching Data
  23. 23. Solutions to Hardware Constraints Prefetching <link rel="prefetch" href="http://www.example.com/">
  24. 24. Solutions to Hardware Constraints Touch Screen Devices
  25. 25. Solutions to Hardware Constraints: Touch Screen Devices Swiping
  26. 26. Solutions to Hardware Constraints: Touch Screen Devices No hover state
  27. 27. Solutions to Hardware Constraints: Touch Screen Devices Ario’s Law Look out, Fitts’ Law!
  28. 28. Web Constraints
  29. 29. ResolutionsUsing this font size,this sentence canfit a screen with aresolution like this. But doesn’t mean it will fit a screen size like …
  30. 30. Web Constraints Cross-browser Compatibility One version to rule them all.
  31. 31. Web Constraints Graceful Degradation
  32. 32. Web Constraints“Graceful degradation means that your Website continues to operate even when viewedwith less-than-optimal software in whichadvanced effects don’t work.” Fluid Thinking, by Peter-Paul Koch
  33. 33. IE9 IE7
  34. 34. Guilty!
  35. 35. Web Constraints But… That doesn’t mean you have to build for the oldest of the old. http://www.microsoft.com/typography/web/fonts/comicsns
  36. 36. Mobile Focus.
  37. 37. Web vs Native Appshttp://www.worklight.com/resources/webinars-and-tools/native-web-hybrid-mobile-app-development
  38. 38. CommonTerminology
  39. 39. Document Object Model (DOM) Document Root <html> Element Element <head> <body> Element Element Element <title> <h1> <p>Text Node Text Node Text Node“My Site!” “Hello, World” “My name is..”
  40. 40. Function Callsfunction doEquation() { alert(3+ 20);}<script type=“text/javascript”>doEquation();</script>
  41. 41. Classes and IDsHi, I’m a class! Hi, I’m an ID!I’m seen multiple I’m unique intimes in a a webpage!webpage..className #idName
  42. 42. API vs SDKApplicationProgrammingInterface(API)
  43. 43. API vs SDKSoftwareDevelopmentKit (SDK)
  44. 44. HTML History
  45. 45. W3C andWHATWG
  46. 46. http://evolutionofweb.appspot.com/
  47. 47. HTML5 is Rich
  48. 48. Content has more meaning
  49. 49. Resource Description Framework in Attributes (RDFa)<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">My name is <span property="v:name">Bob Smith</span>, but people call me<span property="v:nickname">Smithy</span>.Here is my homepage: <a href="http://www.example.com"rel="v:url">www.example.com</a>.I live in Albuquerque, NM and work as an <spanproperty="v:title">engineer</span> at <span property="v:affiliation">ACMECorp</span>. </div>
  50. 50. Microformats<div class="vcard"><img class="photo"src="www.example.com/bobsmith.jpg" /><strong class="fn">Bob Smith</strong><span class="title">Senior editor</span> at <spanclass="org">ACME Reviews</span><span class="locality">Desertville</span>, <spanclass="region">AZ</span></div>
  51. 51. Microdata<div itemscope itemtype="http://data-vocabulary.org/Person">My name is <span itemprop="name">Bob Smith</span> but people call me <spanitemprop="nickname">Smithy</span>.Here is my home page: <a href="http://www.example.com"itemprop="url">www.example.com</a>I live in Albuquerque, NM and work as an <span itemprop="title">engineer</span>at <span itemprop="affiliation">ACME Corp</span>.</div>
  52. 52. Geolocationsvar x=document.getElementById("demo");function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} }function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; }
  53. 53. CSS3
  54. 54. PseudoclassesPattern Meaning Matches element E when EE:first-child is the first child of its parent. Matches element E if E is the source anchor of aE:link hyperlink of which theE:visited target is not yet visited (:link) or already visited (:visited).E:active Matches E during certainE:hover user actions.E:focusE:nth-of-type(n) an E element, the n-th sibling of its type
  55. 55. Typography@font-face { font-family: <a-remote-font-name>; src: <source>; font-weight: <weight>; font-style: <style>;}
  56. 56. Detect device typeIn your HTML…<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">In your CSS…@media only screen and (max-width: 480px), onlyscreen and (max-device-width: 480px) { /* CSS overrides for mobile here */}
  57. 57. Frameworks For BetterPerformance & Integration
  58. 58. User Experience Designers must deconstruct designs and interactions in order toeffectively communicate concepts to Developers.
  59. 59. Redlining
  60. 60. http://www.currybet.net/cbet_blog/2010/05/will-we-need-to-specify-html5.php
  61. 61. Develop efficiently.
  62. 62. Develop efficiently.<div><h1>Formatting</h1></div>
  63. 63. Develop efficiently.<!--Commenting-->
  64. 64. Develop efficiently.Most importantly:Know the standards.
  65. 65. Develop efficiently.Tables are SO2004.* * Tables should be used for tabular data, not site layouts.
  66. 66. WebInternationalization
  67. 67. Single Byte vs Double Byte
  68. 68. <html lang="en">http://www.w3schools.com/tags/ref_language_codes.asp
  69. 69. Do itYourself.
  70. 70. Lab 1Redlining, HTML5, CSS3
  71. 71. JavaScript
  72. 72. Client-side Languagehttp://contentdeliverance.com/2011/client-server-architecture/
  73. 73. http://red27.net/2010/12/15/what-makes-web-applications-work/
  74. 74. Manipulating the DOM Document Root <html> Element Element <head> <body> Element Element Element <title> <h1> <p>Text Node Text Node Text Node“My Site!” “Hello, World” “My name is..”
  75. 75. jQuerya JavaScript Library. (There are many out there)
  76. 76. Cross-browserCross-language Consistent Quick
  77. 77. Animations!$(#clickMe).click(function() {$(#goAnimate).animate({opacity: 0.25,left: +=50,height: toggle }, 5000});
  78. 78. Slideshows http://slidesjs.com/ http://galleria.io/http://manos.malihu.gr/tuts/sideways_jquery_fullscreen_image_gallery_nativescrollbars_clickm ode.html
  79. 79. Asynchronous JavaScript and HTML (AJAX)$.ajax({ url: "test.html", context: document.body}).done(function() { $(this).addClass("done");});
  80. 80. Plug-ins
  81. 81. Easy-to-use Interface$(function(){ $("#slides").slides({ preload: true, preloadImage: /img/loading.gif, play: 5000, pause: 2500, hoverPause: true });});http://slidesjs.com/#docs
  82. 82. Lab 2Animations and Plug-ins
  83. 83. “[Programmers] struggle with this idea ofmaking computers behave more like humans,because they see humans as weak andimperfect computing devices”- Alan Cooper, author of The Inmates are Running the Asylum
  84. 84. Now you can…Effectively share design conceptsMark up your designsSpeak the Geek Speak (get along with developers)Do it yourself!
  85. 85. ResourcesW3C Schools: great tutorials for beginnersjQuery Mobile: awesome resource for web appdevelopmentCSS-Tricks: resource for cool CSS tricksLynda.com: nice & informative tutorialsCodecademy: eLearning site for developmentPhonegap: converts web-based apps to native
  86. 86. Thanks!Follow me via Twitter: @designdaisukiOr e-mail me at ashlimarie@gmail.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×