Web Development for UX Designers

WEB DEVELOPMENT
for
UX DESIGNERS
Ashlimarie Dong
Former HCDE Student

Programming for
Design’s Sake

I Discovered
User Experience!
And it was amazing.

Why should
UX Designers
care?

Why should UX Designers care?

Complex Storyboarding

=?


Understanding
Browser Constraints


Creating Something Usable

Not reusable
Axure rendered HTML


Empathizing with Developers

UX DEV

Diagram credit: http://asinthecity.com/

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

Solutions to Hardware Constraints

Caching Data


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


Touch Screen Devices

Solutions to Hardware Constraints: Touch Screen Devices

Swiping


No hover state


Ario’s Law
Look out, Fitts’ Law!

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 …

Web Constraints

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

But…
That doesn’t mean you have to build for the
oldest of the old.

http://www.microsoft.com/typography/web/fonts/comicsns

Web vs Native Apps

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

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 Calls
function doEquation() {
alert(3+ 20);
}

<script type=“text/javascript”>
doEquation();
</script>

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

API vs SDK
Application
Programming
Interface
(API)

API vs SDK
Software
Development
Kit (SDK)

http://evolutionofweb.appspot.com/

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

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.

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

Develop efficiently.

<div>
<h1>Formatting</h1>
</div>


Most importantly:
Know the standards.


Tables are SO
2004.*

* Tables should be used for tabular data, not site layouts.

<html lang="en">

http://www.w3schools.com/tags/ref_language_codes.asp

Client-side Language

http://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..”

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

Easy-to-use Interface
$(function(){
$("#slides").slides({
preload: true,
preloadImage: '/img/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true
});
});
http://slidesjs.com/#docs

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

Web Development for UX Designers

More Related Content

What's hot

Viewers also liked

Similar to Web Development for UX Designers

Recently uploaded

Web Development for UX Designers