12 column responsive grid 5 break points

When designing “responsively” using a tool like Axure RP – we need to create the break points for each adaptive view. Here are some examples of how you can make 12 columns fit mathematically into 5 different screen sizes, from mobile to large display. The fluidity between the break point must be “imagined” :)

320 px
Gutter: 10
Margin: 15
Column: 15

480 px
Gutter: 10
Margin: 11
Column: 29

768 px
Gutter: 20
Margin: 22
Column: 42

980 px
Gutter: 20
Margin: 20
Column: 60

1200 px
Gutter: 30
Margin: 15
Coumn: 70

43 important user experience questions to pose your web product

  1. What are the number of available tasks/functions?
  2. Are functions prioritised using a clear visual hierarchy?
  3. Clear interactive elements, buttons and links? Consistent colour and shapes?
  4. What happens when I click this? Intuitive or confusing next screens?
  5. How do I find things? Browse, search, suggest, recommend, relate, synonyms, help?
  6. How does it communicate? Wording, terminology, scent, icons, imagery, symbols, metaphors, mental models behind the interface? Any skeuomorphism?
  7. How is the flow? Next step is evident or confusing, must be learned, trained, acquired?
  8. What is the point with this or that? Is all functionality explained, clear, self-evident or blurry, complex and confounding?
  9. Where do I start? Numerous ways to the goal? Clear paths? Help as you go?
  10. Shortcut keys for advanced users, or a lot of mousing?
  11. Did I push the wrong button? Error messages good or cryptic? Is there a felt “danger” I if click this or that? Can I destroy or delete something by accident?
  12. Do I see signs leading in the wrong or undesired directions, or do I always get relevant navigation during my journey to my goal?
  13. Complexity rating of each screen?
  14. Are the right form-navigation elements chosen, drop down, check boxes, radio-buttons, sliders?
  15. Are brand guidelines followed?
  16. Contrast text vs background, text sizes, weights, types, underline or link confusion?
  17. Grid, mathematical geometry, units and measurements?
  18. Consistency of flows, placement of buttons, OK/Cancel/Reset, next/previous?
  19. Save functions manually or automatic?
  20. System remembers inputs, helps complete forms, cookies?
  21. Page modes/ widget modes stored to save time configuring things?
  22. Wizards store your step position, or forget, time-out and generally work against your intentions?
  23. Wizard steps are clear? Can they be clicked as a navigation? What if you click them, do you lose data on the page you left?
  24. Colours, lines, directions, signs are consistently used?
  25. User/customer centric information model, or topic/system centric categorization of content?
  26. Browser/device support?
  27. Performance, waiting for data extraction, loaders, information while waiting?
  28. New user level of difficulty, eye-tracking, patterns of looking, F-shape? Left navigation?
  29. Readability, scanability, focus-areas, bullets, illustrations or difficult prose to explain complex concepts?
  30. Section/gallery pages vs article pages? Clear distinction or blurred concepts for layout?
  31. TOC pages are easy to make sense of?
  32. Social features? Do I feel alone in the system, or is there a community of people who can help me and make suggestions, share experiences, rating and evaluations can be made?
  33. FAQ – what are the most common questions and problems?
  34. UX – what do I feel using the system? Happy, bored, concentrated on the task at hand or fighting the quirks of the system?
  35. Texts, titles, summaries, main body – quality of content?
  36. Are the running javascripts for help or annoyance? Lots of page refreshs or ajax?
  37. Static or dynamic content, how often is there a change of page content to make the content more alive?
  38. Old and stale or new and fresh, is there a date and time stamp?
  39. Redundancy of text, functions and functional/non-functional elements? What is the purpose of this and that thing?
  40. Statistics? Live stats? Popular features? Popular recommendations? “Likes” – floating good content to the surface?
  41. Data aggregation? Dashboards? Overview? Personal views?
  42. Tip of the day?
  43. Menu texts concise or blurry in their range of meanings?