Web Development for UX Designers


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
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web Development for UX Designers

  1. WEB DEVELOPMENT for UX DESIGNERSAshlimarie DongFormer HCDE Student
  2. <life>
  3. Web Developer Since 2005
  4. Programming forDesign’s Sake
  5. Then College Happened
  6. I DiscoveredUser Experience!And it was amazing.
  7. Why shouldUX Designers care?
  8. Why should UX Designers care? Complex Storyboarding =?
  9. Why should UX Designers care? Understanding Browser Constraints
  10. Why should UX Designers care?Creating Something Usable Not reusable Axure rendered HTML
  11. Why should UX Designers care? Empathizing with Developers
  12. PMUX DEV
  13. UX DEVDiagram credit: http://asinthecity.com/
  14. Core Topics CoveredHardware ConstraintsWeb ConstraintsMobile Web IntroductionTerminologyHTML5 & CSS3 RedliningInternationalizationJavaScript and jQuery
  15. HardwareConstraints
  16. Waiting sucks
  17. Resource Hogs
  18. Internet connection
  19. Platform vs
  20. RAM and Virtual Memory
  21. There are solutions!
  22. Solutions to Hardware Constraints Caching Data
  23. Solutions to Hardware Constraints Prefetching <link rel="prefetch" href="http://www.example.com/">
  24. Solutions to Hardware Constraints Touch Screen Devices
  25. Solutions to Hardware Constraints: Touch Screen Devices Swiping
  26. Solutions to Hardware Constraints: Touch Screen Devices No hover state
  27. Solutions to Hardware Constraints: Touch Screen Devices Ario’s Law Look out, Fitts’ Law!
  28. Web Constraints
  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. Web Constraints Cross-browser Compatibility One version to rule them all.
  31. Web Constraints Graceful Degradation
  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. IE9 IE7
  34. Guilty!
  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. Mobile Focus.
  37. Web vs Native Appshttp://www.worklight.com/resources/webinars-and-tools/native-web-hybrid-mobile-app-development
  38. CommonTerminology
  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. Function Callsfunction doEquation() { alert(3+ 20);}<script type=“text/javascript”>doEquation();</script>
  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. API vs SDKApplicationProgrammingInterface(API)
  43. API vs SDKSoftwareDevelopmentKit (SDK)
  44. HTML History
  45. W3C andWHATWG
  46. http://evolutionofweb.appspot.com/
  47. HTML5 is Rich
  48. Content has more meaning
  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. 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. 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. 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. CSS3
  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. Typography@font-face { font-family: <a-remote-font-name>; src: <source>; font-weight: <weight>; font-style: <style>;}
  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. Frameworks For BetterPerformance & Integration
  58. User Experience Designers must deconstruct designs and interactions in order toeffectively communicate concepts to Developers.
  59. Redlining
  60. http://www.currybet.net/cbet_blog/2010/05/will-we-need-to-specify-html5.php
  61. Develop efficiently.
  62. Develop efficiently.<div><h1>Formatting</h1></div>
  63. Develop efficiently.<!--Commenting-->
  64. Develop efficiently.Most importantly:Know the standards.
  65. Develop efficiently.Tables are SO2004.* * Tables should be used for tabular data, not site layouts.
  66. WebInternationalization
  67. Single Byte vs Double Byte
  68. <html lang="en">http://www.w3schools.com/tags/ref_language_codes.asp
  69. Do itYourself.
  70. Lab 1Redlining, HTML5, CSS3
  71. JavaScript
  72. Client-side Languagehttp://contentdeliverance.com/2011/client-server-architecture/
  73. http://red27.net/2010/12/15/what-makes-web-applications-work/
  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. jQuerya JavaScript Library. (There are many out there)
  76. Cross-browserCross-language Consistent Quick
  77. Animations!$(#clickMe).click(function() {$(#goAnimate).animate({opacity: 0.25,left: +=50,height: toggle }, 5000});
  78. Slideshows http://slidesjs.com/ http://galleria.io/http://manos.malihu.gr/tuts/sideways_jquery_fullscreen_image_gallery_nativescrollbars_clickm ode.html
  79. Asynchronous JavaScript and HTML (AJAX)$.ajax({ url: "test.html", context: document.body}).done(function() { $(this).addClass("done");});
  80. Plug-ins
  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. Lab 2Animations and Plug-ins
  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. Now you can…Effectively share design conceptsMark up your designsSpeak the Geek Speak (get along with developers)Do it yourself!
  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. Thanks!Follow me via Twitter: @designdaisukiOr e-mail me at ashlimarie@gmail.com