April 19, 2013 12:11pm

(Source: Spotify)

April 3, 2013 3:18pm
Online Resources for AngularJs

Angular Seed – Good starting point for an angular project
https://github.com/angular/angular-seed
Egghead.io – Tons of videos about AngularJs
http://egghead.io
AngularJs – the source
http://angularjs.org
Angular UI – components for UI items in Angular
http://angular-ui.github.com
ngModules – popular modules for AngularJs
http://ngmodules.org

April 3, 2013 8:03am
Add class to element when scrolling in AngularJs

Revised scroll directive that supports IE8 

Calculate Offset

Scroll directive

 

 

March 29, 2013 11:01am
Why all your text is black when printing when you use bootstrap

In bootstrap.css

March 19, 2013 3:20pm
Beware of DateTimeOffset precision and Javascript

We decided to use DateTimeOffset or DateTime2 as the datatype for our date fields in Sql using Entity Framework Code First.  Sounds simple enough should not cause any problems right?
WRONG!
The default of DateTimeOffset and DateTime2 has a precision of 7 digits for milliseconds, but ECMAScript only supports 3 (webkit does 5) digits for milliseconds.
See this example with AngularJs
The time is completely wrong.
Changing the time stamp
2013-03-18T15:29:22.2001801-04:00 <— Does not Work
2013-03-18T15:29:22.20018-04:00 <— Works
Code First
Try the Column Attribute
Looked promising you can specify a datatype, so I tried datetime2(2) and datetimeoffset(2) no dice as for some reason it did not recognize the data type with the (2), taking off the () would change the schema to a datetime2, but the default precision for datetime2 also is 7.
Global Conventions
We could create a global convention to change the precision of the datatype to handle the problem.  Nope, conventions existed in EF5 but were pulled before it went live.  EF6 has conventions but that is currently in alpha.  
Fluent API
This could work but we would need to always remember to adjust the precision of our fields via the fluent api for any new field we wish to have precision.  This would work but just seems like a giant pain and potentially prone for further bugs down the road.
Bye bye DateTimeOffset/DateTime2 and welcome back in DateTime
So in the end we just went with DateTime which will just work and requires no additional configuration.
we could alter this after the fact with a script but just wanted it to work without having to shoe horn something after the database is created

March 14, 2013 12:07pm
SxSW Day 5 - Interfaces Accessibility & Superheroes & Breaking the Mold With Meaningful Desgin

SXSW Day 5

Interfaces, Accessibility & Superheroes

One out of seven of the world’s populate has some form of disability

In the US 15 and over 21.3% have a disability, People over 65 49.8%

Regulations and Guidelines

1990 ADA

1998 Section 508

1999 WCAG 1.0

2008 - WCAG 2.0

2010 - All video needs captions

Superhero Checklist

Overcome adversity

fight for good

adhere to principles guidelines and laws

use existing infrastructure in new ways

use innovative technology

look great in a cape

Four principles of P.O.U.R.

Perceivable - Providing alternative text on images, captions or transcripts for video and audio, good color contrast, avoid marques or movement

Operable - providing access to navigations and controls through alternative means e.g. tab  Don’t make buttons too tiny

Understandable - Content is clearly and logically presented.  Wording should be simple and concise.

Robust - semantic markups, validated code, responsive design

Basic Elements of Accessible Design

Can my audience understand it

how can the platform help my users understand?

does the platform suggest particular usability patterns

How difficult is it to learn? (learned behavior vs established patterns)

Legibility

  • Hierarchy - Order Size and Action.  Example would be a traffic light 
  • Iconography - Simplicity is key.  make sure to always name things that make sense and also always to use alt text on the image.  If you use sprite sheets make sure to always include title or alt text on the element.  Empty elements with a sprite sheet causes problems for screen readers
  • Color and Contrast - Hue chromaticity saturation value contrast.  Color blindness affects approximately 8% of males and .5% of females.  Never use yellow with white type or yellow type with while background.  Munsell color system
  • Typography - Font, size, weight, uniformity, contrast.  Spacing between lines is very important.  Left aligned text is ideal, center align is hard to find the next line, and right align should be avoided by all costs. Geometry of font is important geometric typography is usually easier to read.  If you squint and can not decern the letters it should be avoided.
  • Sound - use in conjunction with visual cues, differentiated between alerts, integrating sound as responsive feedback.
  • Touch and Haptics - Haptic feedback to indicate state of error or completion.  Touch to invoke action.

Exercise with turning on voice over

Our phone gap application does not work at all when it is turned on.  Mobile website did a bit better but need to title the input text boxes.

Common built-in features

  • increase text size
  • text to speech
  • pinch and zoom

Assistive Technologies and services

  • screen readers
  • screen magnifiers
  • alternative keyboards
  • braille output

Advanced interactions

shake your device for help since it might be a sign of frustration from a user.

Ways to improve the application you tested voice over

  • Add alt and title text to clickable elements.
  • Increase font-size or at least make it adjustable
  • Figure out what needs to be done to make the application accessible.

Thinking outside the box


Breaking the Mold with Meaningful Design

Define a problem that the consumer has to deal with and work through each and every step that solves that problem completely.

Good design is when you have the bar minimum to solve the problem.  Don’t add features just for the sake of it to make it more robust.

When hiring people ask people what they want to learn.  How would you take a thing and make it better.

Only ship when something is ready never rush.  

You need to iterate constantly.

Good design needs constraints

March 12, 2013 10:40am

SXSW Day 4

Intentionally Dealing with Responsive Design

 

A designer/developer is a unicorn a mystical person that does everything.

As an organization grows the specialization in each field grows.

They optimized the css per page not actually globally.  This allows to optimize for the smallest possible css required for the page.

Performance of a responsive design is very important when designing responsively.  700k on a desktop is no big deal but having to serve the same content for a mobile device is not acceptable.

Only axes for media queries are screen width.

  • Screen dimensions
  • orientation
  • pixel density

Performance hit

CSS Regions and Content Flow 

  • Not backward compatible

Srcset spec

  • Not backward compatible
  • Only for images

Aware.js and Breakpoint.js

  • Multi class structure leads to harder to maintain code at scale
  • fewer responsive axes

Conditionizer

  • Good at managing low and high resolution images

What to use?

Intention.js

  • allows you to create custom responsive contexts
  • do things in those contexts

Context.js

  • an implementation of Intention.js with a whole lot of useful
  • can easily be extended to add your own.

http://intentionjs.com/pages/about.html

http://www.slideshare.net/everyplace/intentionally-dealing-with-responsive-design

How AI Is Enhancing the User Experience

When AI goes wide things are very broad and might frustrate users because of expectations.

If you go deep you pick a subject and train the machine to understand the subject.  Expectations for the user are that it should only deal with that subject and tends to provide a greater experience.

AI works well if you have collections of data on intent.  Google Now is working well because of all the search history.  If you do not have the data of intent it it AI tries to crawl random history of the user and tends to be noise and produce a lot of notifications.

Future

AI will become greater with more virtual with very specific needs.  Along with wearable devices that collect more data for intent to better understand the user.

March 11, 2013 10:21am
SXSW Day 3, (Mobile Web Apps Suck - Workshop)

SXSW Day 3

https://github.com/fisherwebdev/seeds

Versioning your app is not agile or lean

With using apple you only have 100 test tickets, this limits your alpha group.

If you use web you have unlimited alpha

Future Friendly

  • The age of ubiquitous computing
  • progressive enhancement is not graceful degradation
  • mobile first
  • responsive design
  • Write once -> run anywhere (debug everywhere)

How many will you support today?

  • 50% - 18 devices
  • 60% - 37 devices
  • 80% - 156 devices
  • 90% - 331 devices

Web Apps that don’t suck

The Financial Times http://www.ft.com/home/uk

Used html5 technologies and hacks to achieve optimal user experience

user prompted to save to home screen and allow additional local storage

Presentation on how to they did it.

http://vimeo/26604635

http://labs.ft.com

In Code

  • Improve the initial page load with gzip, fewer requests and advanced caching
  • optimize for touch interaction
  • Hardware acceleration and throttled event handler calls with requestAnimationFrame
  • Hit the DOM as little as possible.  Batch DOM reads and writes. Avoid Reflow
  • Optimize how you then make external requests with ajax, web sockets, and WebRTC

In Design

Try to avoid taking control of scrolling

Don’t assume connectivity or the latest WebKit is going to be there.  Archaic and Unreliable First.

Skeumorphism is fattening, avoid drop shadows, gradients, rounded corners.  If you use animation on you are going to have a world of pain.

Know the limitations of your platform.  Design to the platform you are building for.

DO you really want to spend 4 weeks trying to figure out how to get that feature you saw in a native app working in HTML5.  Is there an alternative?  Is it actually needed?

Optimistic rendering

Render the success even though it might not actually happen.  This gives the user the perceived idea of very fast interaction.  

Responsive Web Design

Not just for small screens

Generally use percentages for width and ems for height

Pixels to be avoided

Thing about haptics (vibration api)

This would allow for the user to know that a button was pressed by giving a bit of vibration that something was pressed.

Only supported by firefox at the moment

 

http://bill.hotstudiodev.com/mowebapps/Mobile-Web-Apps-Suck-Part-1.pdf

http://bill.hotstudiodev.com/mowebapps/Mobile-Web-Apps-Suck-Part-2.pdf

March 11, 2013 10:19am
Random SXSW Day 2 Notes (Prototype or Die!)

SXSW Day 2

Prototype or Die (Workshop)

Five questions of 

Do they get it?  Do they understand what is going on in the application

Can they find it? Does the user know that something is on the screen.

Can they do it?  can they preform the function

Do they like it? is it enjoyable experience

Is it useful?  Does the user find that the application is useful

Use wizard of oz type just so people can see and go through the action, the action doesn’t need to actually happen.  Instead of taking a picture to capture text use oz to make it appear to happen

Building Prototypes

  • Fake it with images
  • Avoid compiling, don’t use any special optimizations.
  • No semantic html, use very simple elements use <div/> instead of <ul/>
  • It doesn’t need to be just one prototype.
  • Don’t adapt, you control the environment prototype for that particular device
  • Browser extensions, use extensions to inject css and html into an existing site so you don’t have to build up a base
  • Hacks are encouraged.
  • Never optimize

Research

You do not need a user study per say just ask people sit down and show them the ideas

If you have about 5 people you can identify about 80% of the usability issues.

Define the research questions, these should come easily from the product questions that you created from the start.

Recruit participants of our actual users since the person making it is not the user.

Ask questions to find people, use twitter/facebook to find the people.  Have questions that are not yes/no.  Multiple choice examples so the person replying doesn’t know what you are looking for and you get actual users.

Define study tasks

Don’t ask them what items mean, give them actions that they need to perform.

  • Make them meaningful
  • use the users language
  • describe the end goal, don’t give the user steps give them a goal with the prototype given.  Don’t tell them how to perform the action just tell them buy a product don’t reference cart, products, check out etc.

Asking interview questions

Avoid leading and biasing questions.  Keep things open ended.   Ask questions that would help describe how the feature would fit into a workflow.

Observation is key, don’t just listen. Ask the user to perform the action not just describe what they did for the action.

Don’t use words that are in the UI, don’t ask them about the share button.  Ask them a question about a real life scenario that they need to perform that action.

Give the participant time to answer.  If you don’t the follow up question would bias the participant to answering the question with the follow up question you provided.  Give the person time to answer and the answer will be open ended.

Ask the participant to think aloud 

The Future is Now - Futuristic UIs with HTML5

https://github.com/mattnull/thefutureisnow-workshop

https://github.com/mattnull/thefutureisnow-demos

https://github.com/mattnull/thefutureisnow-server

March 9, 2013 3:07am
Random Notes from SXSW 2013 Day 1

SxSw 2013 - Day 1

Lean Forward, Lean Back: Tablet News Experiences

Storytelling in the age of the tablet

Lean forward platforms are phone and tablet, short quick headlines easy to see and read

Lean back, long form and lots of detail, paper or computer

If you put any emphasis on something treat the phone as almost the most important

Tablet is also almost as important

keep navigation down to a minimum

Keep the bucks of information to a minimum so people do not get overwhelmed.

Design for the tablet, design for the eye, touch, and finger.


The tablet experience should almost be like a pop up book.  When taping on things things should happen so the touch does something.

The tablet isn’t just meant for a photo and to turn the page.

After 6pm is the time when you will find the usage of the tablet increases (lean back time) computer and phone usage decreases. 

Don’t take what is there and convert to a tablet application.  You need to white board and sketch out the application.

EyeTrack: tablet research

You need to have one element that is 5 times bigger compared to the rest.  The eye goes to the photos first.  60% of the design is from the pattern from the eye track research and about 40% creativity.

70% of people like landscape

Make things bigger to draw emphasis to certain materials, that way the user doesn’t need to try to hunt for the information.

Pictures say a lot and let people make a decision quicker.

67% used native controls like the back button to get to other information.

Older readers where more methodical 

Younger readers scan more when reading information.

61% of readers touched the screen frequently

80-90 second is the bail out point when someone jumps ship and stops reading

What is next?

Does the tap and reveal of information helps people retain the information.

Awe-Inspiring Web Typography You Can Do Now

Typography does not actually improve comprehension of the content.

Good typography can put the user in a good mood

45-75 characters is widely regarded as a satisfactory length of line for a single column page.

66 characters is about 32em in length.

Use media queries to keep line length in an ideal range.

Use hyphens auto for smaller screens helps increase readability, on larger screens it does not hep so turning hyphens off is the ideal practice.

Use column count to split up short paragraphs, longer paragraphs can cause issue if the person needs to scroll back up to the top.

16px is an ideal size to start out with in a page.

The bigger the text the smaller the line height.

Always good to do a margin and padding reset.  This forces you to do this and think about the items and how they relate.

Treat numbers as letters to make sure they don’t stand out.  If you put dates in the text it makes them appear like they are shouting.

Most fonts come with this number formatting backed in as part of CSS3, you can use old style numbers which makes the numbers not stand out.  Might have to change your type face to one that supports this features.

If you use acronyms, use c2sc capitals to small caps, which is an open font feature.  The capitals are a bit smaller and fatter to make them appear like they lower case letters.

Choosing Fonts

Even if people are not consciously aware of the type they’re 

Does the font have the character set your text requires.

Does it have enough useful weights and styles

Does it have the features you need

Loading Web Fonts

Default text appears as each web font loads

don’t send web font to small screens

fall back

media attribute on an link element to apply conditional css loading

Show text in the fallback font until all the font loads, can use the google web font loader.  This allows you to use the css classes to swap out the font once it loads.

be aware of the device for fall back fonts ios/windows phone 7/android have different fonts installed by default.

Fonts

  • Shaker
  • Karminda sans, pairs nicely with karmina serif
  • april display, works will with april text
  • april text
  • table gothic compressed , works well with apirl text

Url

http://webtypography.net/talks/sxsw13

Liked posts on Tumblr: More liked posts »