Your SlideShare is downloading. ×

Web Development for UX Designers

46,032

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 …

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
1 Comment
21 Likes
Statistics
Notes
No Downloads
Views
Total Views
46,032
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
135
Comments
1
Likes
21
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×