Web Development for UX Designers
Upcoming SlideShare
Loading in...5

Web Development for UX Designers



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.



Total Views
Views on SlideShare
Embed Views



26 Embeds 2,521

http://dev-three.koka-produktion.de 1617
http://blog.dreamcss.com 572
http://umesh.shareist.com 74
http://www.palgreen.co.jp 59
http://ifattituoi.wordpress.com 38
http://test.itfglobal.org 30
http://sites.dev.shareist.net 22
http://www.markovation.com 19
http://www.shareist.com 18
http://webpub.jacieyang.com 17
https://www.linkedin.com 8
http://loongtoom.blogspot.com 7
http://localhost 5
http://2012edn6102s.wikispaces.com 5
http://www.bravenewtalent.com 5
http://www.linkedin.com 4
http://core.traackr.com 4 3
http://us-w1.rockmelt.com 3
http://www.dev.shareist.net 3
http://cbshare.wordpress.com 2
http://translate.googleusercontent.com 2
http://blog.exercisetherpg.com 1
http://proba 1
http://vedruna2esoaignacio.blogspot.com.es 1
http://nodeslide.herokuapp.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Web Development for UX Designers Web Development for UX Designers Presentation Transcript

  • 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 Axure rendered HTML
  • Why should UX Designers care? Empathizing with Developers
  • UX DEVDiagram credit: http://asinthecity.com/
  • Core Topics CoveredHardware ConstraintsWeb ConstraintsMobile Web IntroductionTerminologyHTML5 & CSS3 RedliningInternationalizationJavaScript and jQuery
  • 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, Fitts’ Law!
  • Web Constraints
  • ResolutionsUsing this font size,this sentence canfit a screen with aresolution like this. But doesn’t mean it will fit a screen size like …
  • 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 software in whichadvanced effects don’t work.” Fluid Thinking, by Peter-Paul Koch
  • IE9 IE7
  • Guilty!
  • 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
  • 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 <head> <body> Element Element Element <title> <h1> <p>Text Node Text Node Text Node“My Site!” “Hello, World” “My name is..”
  • 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..className #idName
  • 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/#" 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>
  • 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>
  • 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>
  • 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; }
  • CSS3
  • 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
  • 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 CSS…@media only screen and (max-width: 480px), onlyscreen and (max-device-width: 480px) { /* CSS overrides for mobile here */}
  • Frameworks For BetterPerformance & Integration
  • User Experience Designers must deconstruct designs and interactions in order toeffectively communicate concepts to Developers.
  • 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> <body> Element Element Element <title> <h1> <p>Text Node Text Node Text Node“My Site!” “Hello, World” “My name is..”
  • 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_fullscreen_image_gallery_nativescrollbars_clickm ode.html
  • Asynchronous JavaScript and HTML (AJAX)$.ajax({ url: "test.html", context: document.body}).done(function() { $(this).addClass("done");});
  • Plug-ins
  • Easy-to-use Interface$(function(){ $("#slides").slides({ preload: true, preloadImage: /img/loading.gif, play: 5000, pause: 2500, hoverPause: true });});http://slidesjs.com/#docs
  • Lab 2Animations and Plug-ins
  • “[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
  • Now you can…Effectively share design conceptsMark up your designsSpeak the Geek Speak (get along with developers)Do it yourself!
  • 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
  • Thanks!Follow me via Twitter: @designdaisukiOr e-mail me at ashlimarie@gmail.com