View
46.313
Download
2
Category
Tags:
Preview:
DESCRIPTION
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.
Citation preview
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
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
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; }
CSS3
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.
<!--Commenting-->
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 ashlimarie@gmail.com
Recommended