Web Development for UX Designers
26 likes38,943 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.
![“[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](https://image.slidesharecdn.com/gettingtechnicalunderstandingwebdevelopment-120601212254-phpapp02/85/Web-Development-for-UX-Designers-89-320.jpg)
![[jqconatx] Adaptive Images for Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-imagesv14-130911193737-phpapp01-thumbnail.jpg?width=560&fit=bounds)
![Web Standards: Fueling Innovation [Web Design World Boston '08]](https://cdn.slidesharecdn.com/ss_thumbnails/web-standards-fueling-innovation-1228796603037960-8-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
What's hot (20)
Viewers also liked (19)
Ad
Similar to Web Development for UX Designers (20)
Ad
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
- 73. <html lang="en"> http://www.w3schools.com/tags/ref_language_codes.asp
- 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 [email protected]