(Source: Spotify)
April 19, 2013 12:11pm
April 3, 2013 3:18pm
Online Resources for AngularJs
Angular Seed – Good starting point for an angular project
Egghead.io – Tons of videos about AngularJs
AngularJs – the source
Angular UI – components for UI items in Angular
ngModules – popular modules for AngularJs
April 3, 2013 8:03am
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.
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
RSS feed: http://markcoleman.tumblr.com/rss
1 of 31
Next page
