A Minimalist's Guide to the Mobile Web

2,067 views

Published on

Presentation given by Jenifer Hanen on Mon April 16, 2012 at Breaking Development Orlando [http://bdconf.com/2012/orlando].

"Designing and developing for mobile devices can be overwhelming in the sheer amount of factors to consider. Questions of where get started or how to retool for fast and lovely mobile sites can send one screaming for the supposed safety of Webkit before running and hiding under an iOS rock. But such fear and trembling is unnecessary and we can go forth in confidence with the minimalist's guide on data sipping as a legitimate lifestyle, serving responsive images, how to strip that code, and do I really need all this Javascript?"

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

A Minimalist's Guide to the Mobile Web

  1. 1. A Minimalists Guide to the Mobile Web by Jenifer Hanen @msjen
  2. 2. Both an approach to design and development and a place to start or keep a conversation going.Who wants to volunteer?
  3. 3. Hello, I’m Ms. Jen Creator : mobile.web : design.dev : photos.text blackphoebe.com/msjen @msjen
  4. 4. Who Are You?
  5. 5. A Couple of Disclaimers
  6. 6. I am a Photo Addict
  7. 7. I am a Freelancer 2000-2011 Small Business and Non-Profit Clients 2012 Taking the leap into a Mobile App Startup
  8. 8. I am not afraid to talk of failures
  9. 9. I am Appnostic
  10. 10. Let’s Define Minimalism
  11. 11. Minimalistmin·i·mal·ist [min-uh-muh-list]noun1. a person who favors a moderate approach to theachievement of a set of goals or who holds minimalexpectations for the success of a program.2. a practitioner of minimalism in music or art.adjective3. of, pertaining to, or characteristic of minimalism.4. being or offering no more than what is required oressential: a minimalist program for tax reform.[http://dictionary.reference.com/browse/minimalist]
  12. 12. Minimalismmin·i·mal·ism [min-uh-muh-liz-uhm]noun1. another name for minimal art2. a type of music based on simple elements andavoiding elaboration or embellishment3. design or style in which the simplest and fewestelements are used to create the maximum effect[http://dictionary.reference.com/browse/minimalism]
  13. 13. Minimalissimo"Minimal Art reacted against the symbolism,spontaneity, and emotional intensity of AbstractImpressionism. Rather than expression, Minimal Artartists sought after objectivity. By removing‘distractions’ like composition, theme, representationand so on, they wanted to allow the viewer toexperience the work as a whole, and in its ownrespect." - minimalissimo.com[http://minimalissimo.com/2009/09/donald-judd/]
  14. 14. Ms. Jen’s Definition Minimalism is not the art of cutting corners or abstracting to the point of non-usability, but the merging for form and function such that the human who uses the site or app isboth delighted and is able to complete the task they came for.
  15. 15. Maximalism v Minimalism
  16. 16. A Women’s Clothing Boutique, Main St, Seal Beach, Calif
  17. 17. A Women’s Clothing Boutique, Main St, Seal Beach, Calif
  18. 18. Hunter & Gather Culture Ambience Can I find what I want? Do I know what I want? Can I get my task done?
  19. 19. Are we talking class?While the debate about design and class on graphpaper.comis ancient in internet terms, 2006!, the question of minimalismas a function of class is still valid.The‘busy/overwhelming’ shop is cheap. The clothes arestretchy polyester and the prices match.The ‘clean/inviting’ shop has silks and linens and the prices areeyepopping.[Read: http://www.graphpaper.com/2006/09-04_class-and-web-design-part-1-the-class-struggle]
  20. 20. Alternately:Am I Alienating Customers?This is a question I have to ask myself.Is my minimalism going to cause my clients to losecustomers?Will I lose clients if I stick to my minimalism stance?
  21. 21. MaximalismWhere is the line between so busy and overloaded withcontent that the person reading or using the site isoverwhelmed?Where is the line for the designer or developer who wouldlike to keep multiple options open, be it for the customer orfor future design & code additions? *bc&dodge
  22. 22. Pressure by Stakeholders The attack of the ever more * *vw
  23. 23. Pressure by Customers The attack of AOL *vw
  24. 24. Let’s be honest with ourselves...
  25. 25. But I have the COOLESTextra special handrolledLua-JS-HTML7.43-Rails-GEM EVAR!!!!Not only does the world need to know howAMAZING it is but it needs to run on featurephones, too...
  26. 26. How does the person reading or using the site or appbenefit from our excesses? Your Joy vs. User’s Joy *vr
  27. 27. Your Love vs. User’s ChoicesExcesses can also come in the form of ourassumptions and prejudices... *ab
  28. 28. Let’s talk about a few mobile realities...Maximalism v Minimalism
  29. 29. Not everyone has 20/20 vision
  30. 30. Not everyone is literateNot Yet.
  31. 31. Not everyone equal dexerity or use of touch
  32. 32. Let’s not forget voice and sound...
  33. 33. Did I just make a case for Maximalism?
  34. 34. Minimalism Can Set You Free
  35. 35. Minimalism Can Set You FreeOne of the reasons, I tend towards minimalismover time is so that I can afford to makeallowances for complexity as needed.If I go lean on code and design elements in oneor more areas, I can afford to go fatter in areaswhere it will benefit the user.
  36. 36. UX | IA MinimalismDon’t skimp on the user research and testing,but do you really need to use every gestureand touch interaction possible?
  37. 37. UX | IA MinimalismBryan, Stephanie, and the Teppo 200
  38. 38. Visual MinimalismImagesContentNavigationDesign ElementsLayout & Columns
  39. 39. Visual MinimalismVisually delight the viewer | reader and leadthem into the content
  40. 40. Code MinimalismOnly use what is needed right now
  41. 41. Code MinimalismFear not the Server, it is your friendlet it do the heavy lifting and thinking
  42. 42. Code MinimalismZen code may include some poetryand abstraction
  43. 43. Refactoring Manifestohttp://refactoringmanifesto.org/
  44. 44. UX|IA + Visual + CodeMinimalismsets the whole team free to apply complexitywhere it is most needed and best used tocreate happy mobilists
  45. 45. The Practical & PragmaticDevice Detection :: Mobile First or Responsive
  46. 46. The Practical & PragmaticDevice Detection :: Mobile First or ResponsiveResponsive Images :: Cut out the fat
  47. 47. The Practical & PragmaticDevice Detection :: Mobile First or ResponsiveResponsive Images :: Cut out the fatLean code :: Javascript as poetry as desired
  48. 48. The Practical & PragmaticDevice Detection :: Mobile First or ResponsiveResponsive Images :: Cut out the fatLean code :: Javascript as poetry as desiredDon’t be afraid to revisit and revise
  49. 49. The Practical & PragmaticDevice Detection :: Mobile First or ResponsiveResponsive Images :: Cut out the fatLean code :: Javascript as poetry as desiredDon’t be afraid to revisit and reviseQ&A :: Test, Test, Test
  50. 50. The Practical & PragmaticDevice Detection :: Mobile First or ResponsiveResponsive Images :: Cut out the fatLean code :: Javascript as poetry as desiredDon’t be afraid to revisit and reviseQ&A :: Test, Test, TestUser Testing :: Watch People Use Your Site
  51. 51. Thank You!Questions? Have a mobile site you want to show?

×