Web Development for UX Designers
•
26 likes•38,935 views
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.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (19)
Similar to Web Development for UX Designers
Similar to Web Development for UX Designers (20)
Recently uploaded
Recently uploaded (20)
Web Development for UX Designers
- 1. WEB DEVELOPMENT for UX DESIGNERS Ashlimarie Dong Former HCDE Student
- 2. <life>
- 3. Web Developer Since 2005
- 6. I Discovered User Experience! And it was amazing.
- 7. Why should UX 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. PM UX DEV
- 13. UX DEV Diagram credit: http://asinthecity.com/
- 14. Core Topics Covered Hardware Constraints Web Constraints Mobile Web Introduction Terminology HTML5 & CSS3 Redlining Internationalization JavaScript and jQuery
- 17. Waiting sucks
- 18. Resource Hogs
- 21. Platform vs
- 22. RAM and Virtual Memory
- 24. Solutions to Hardware Constraints Caching Data
- 25. Solutions to Hardware Constraints Prefetching <link rel="prefetch" href="http://www.example.com/">
- 26. Solutions to Hardware Constraints Touch Screen Devices
- 27. Solutions to Hardware Constraints: Touch Screen Devices Swiping
- 28. Solutions to Hardware Constraints: Touch Screen Devices No hover state
- 29. Solutions to Hardware Constraints: Touch Screen Devices Ario’s Law Look out, Fitts’ Law!
- 30. Web Constraints
- 31. Resolutions Using this font size, this sentence can fit a screen with a resolution like this. But doesn’t mean it will fit a screen size like …
- 32. Web Constraints Cross-browser Compatibility One version to rule them all.
- 33. Web Constraints Graceful Degradation
- 34. Web Constraints “Graceful degradation means that your Web site continues to operate even when viewed with less-than-optimal software in which advanced effects don’t work.” Fluid Thinking, by Peter-Paul Koch
- 35. IE9 IE7
- 36. Guilty!
- 37. 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
- 38. Mobile Focus.
- 39. Web vs Native Apps http://www.worklight.com/resources/webinars-and-tools/native-web-hybrid-mobile-app-development
- 42. 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..”
- 43. Function Calls function doEquation() { alert(3+ 20); } <script type=“text/javascript”> doEquation(); </script>
- 44. Classes and IDs Hi, I’m a class! Hi, I’m an ID! I’m seen multiple I’m unique in times in a a webpage! webpage. .className #idName
- 46. API vs SDK Software Development Kit (SDK)
- 48. HTML History
- 49. W3C and WHATWG
- 51. HTML5 is Rich
- 52. Content has more meaning
- 53. 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 <span property="v:title">engineer</span> at <span property="v:affiliation">ACME Corp</span>. </div>
- 54. 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 <span class="org">ACME Reviews</span> <span class="locality">Desertville</span>, <span class="region">AZ</span> </div>
- 55. Microdata <div itemscope itemtype="http://data-vocabulary.org/Person"> My name is <span itemprop="name">Bob Smith</span> but people call me <span itemprop="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>
- 56. Geolocations var 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; }
- 57. CSS3
- 58. Pseudoclasses Pattern Meaning Matches element E when E E:first-child is the first child of its parent. Matches element E if E is the source anchor of a E:link hyperlink of which the E:visited target is not yet visited (:link) or already visited (:visited). E:active Matches E during certain E:hover user actions. E:focus E:nth-of-type(n) an E element, the n-th sibling of its type
- 59. Typography @font-face { font-family: <a-remote-font-name>; src: <source>; font-weight: <weight>; font-style: <style>; }
- 60. Detect device type In 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), only screen and (max-device-width: 480px) { /* CSS overrides for mobile here */ }
- 61. Frameworks For Better Performance & Integration
- 62. User Experience Designers must deconstruct designs and interactions in order to effectively communicate concepts to Developers.
- 63. Redlining
- 69. Develop efficiently. Most importantly: Know the standards.
- 70. Develop efficiently. Tables are SO 2004.* * Tables should be used for tabular data, not site layouts.
- 72. Single Byte vs Double Byte
- 75. Do it Yourself.
- 76. Lab 1 Redlining, HTML5, CSS3
- 77. JavaScript
- 80. 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..”
- 81. jQuery a JavaScript Library. (There are many out there)
- 82. Cross-browser Cross-language Consistent Quick
- 83. Animations! $('#clickMe').click(function() { $('#goAnimate').animate({ opacity: 0.25, left: '+=50', height: 'toggle' }, 5000 });
- 84. Slideshows http://slidesjs.com/ http://galleria.io/ http://manos.malihu.gr/tuts/sideways_jquery_ fullscreen_image_gallery_nativescrollbars_clickm ode.html
- 85. Asynchronous JavaScript and HTML (AJAX) $.ajax({ url: "test.html", context: document.body }).done(function() { $(this).addClass("done"); });
- 86. Plug-ins
- 87. Easy-to-use Interface $(function(){ $("#slides").slides({ preload: true, preloadImage: '/img/loading.gif', play: 5000, pause: 2500, hoverPause: true }); }); http://slidesjs.com/#docs
- 88. Lab 2 Animations and Plug-ins
- 89. “[Programmers] struggle with this idea of making computers behave more like humans, because they see humans as weak and imperfect computing devices” - Alan Cooper, author of The Inmates are Running the Asylum
- 90. Now you can… Effectively share design concepts Mark up your designs Speak the Geek Speak (get along with developers) Do it yourself!
- 91. Resources W3C Schools: great tutorials for beginners jQuery Mobile: awesome resource for web app development CSS-Tricks: resource for cool CSS tricks Lynda.com: nice & informative tutorials Codecademy: eLearning site for development Phonegap: converts web-based apps to native
- 92. Thanks! Follow me via Twitter: @designdaisuki Or e-mail me at ashlimarie@gmail.com