Web Development for User Experience Designers

WEB DEVELOPMENT for UX DESIGNERS Ashlimarie Dong Former HCDE Student

<life>

Web Developer Since 2005

Programming for Design’s Sake

Then College Happened

I Discovered User Experience! And it was amazing.

Why should UX Designers care?

Complex Storyboarding Why should UX Designers care? = ?

Understanding Browser Constraints Why should UX Designers care?

Creating Something Usable Why should UX Designers care? Axure rendered
HTML Not reusable

Empathizing with Developers Why should UX Designers care?

PM UX DEV

Diagram credit: http://asinthecity.com/ UX DEV

Core Topics Covered Hardware Constraints Web Constraints Mobile Web Introduction
Terminology HTML5 & CSS3 Redlining Internationalization JavaScript and jQuery

Hardware Constraints

Waiting sucks

Resource Hogs

Internet connection

Platform vs

RAM and Virtual Memory

There are solutions!

Caching Data Solutions to Hardware Constraints

Prefetching <link rel="prefetch" href="http://www.example.com/"> Solutions to Hardware Constraints

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 Solutions to Hardware Constraints: Touch Screen Devices Look
out, Fitts’ Law!

Web Constraints

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 … Resolutions

Cross-browser Compatibility One version to rule them all. Web Constraints

Graceful Degradation 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 Web Constraints

IE9 IE7

Guilty!

But… That doesn’t mean you have to build for the
oldest of the old. http://www.microsoft.com/typography/web/fonts/comicsns Web Constraints

Mobile Focus.

Web vs Native Apps http://www.worklight.com/resources/webinars-and-tools/native-web-hybrid-mobile-app-development

Common Terminology

Document Object Model (DOM) Element <head> Document Root <html> Element
<body> Element <title> Element <h1> Element <p> Text Node “My name is..” Text Node “Hello, World” Text Node “My Site!”

Function Calls function doEquation() { alert(3+ 20); } <script type=“text/javascript”>
doEquation(); </script>

Classes and IDs Hi, I’m a class! I’m seen multiple
times in a webpage. Hi, I’m an ID! I’m unique in a webpage! .className #idName

Application Programming Interface (API) API vs SDK

Software Development Kit (SDK) API vs SDK

HTML History

W3C and WHATWG

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 <span property="v:title">engineer</span> at <span property="v:affiliation">ACME Corp</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 <span class="org">ACME Reviews</span> <span class="locality">Desertville</span>, <span class="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 <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>

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; }

Pseudoclasses Pattern Meaning E:first-child Matches element E when E is
the first child of its parent. E:link E:visited Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). E:active E:hover E:focus Matches E during certain user actions. E: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 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 */ }

Frameworks For Better Performance & Integration

User Experience Designers must deconstruct designs and interactions in order
to effectively communicate concepts to Developers.

Redlining

http://www.currybet.net/cbet_blog/2010/05/will-we-need-to-specify-html5.php

Develop efficiently.

<div> <h1>Formatting</h1> </div> Develop efficiently.

Develop efficiently.

Most importantly: Know the standards. Develop efficiently.

Tables are SO 2004.* * Tables should be used for
tabular data, not site layouts. Develop efficiently.

Web Internationalization

Single Byte vs Double Byte

<html lang="en"> http://www.w3schools.com/tags/ref_language_codes.asp

Do it Yourself.

Lab 1 Redlining, HTML5, CSS3

JavaScript

Client-side Language http://contentdeliverance.com/2011/client-server-architecture/

http://red27.net/2010/12/15/what-makes-web-applications-work/

Manipulating the DOM Element <head> Document Root <html> Element <body>
Element <title> Element <h1> Element <p> Text Node “My name is..” Text Node “Hello, World” Text Node “My Site!”

jQuery a JavaScript Library. (There are many out there)

Cross-browser Cross-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 2 Animations and Plug-ins

“[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

Now you can… Effectively share design concepts Mark up your
designs Speak the Geek Speak (get along with developers) Do it yourself!

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

Thanks! Follow me via Twitter: @designdaisuki Or e-mail me at
[email protected]

Web Development for User Experience Designers

Web Development for User Experience Designers

Other Decks in Design

Featured

Transcript