Upload
jenifer-hanen
View
1.689
Download
0
Embed Size (px)
DESCRIPTION
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?"
Citation preview
A Minimalist's Guide to the Mobile Web
by Jenifer Hanen@msjen
Both an approach to design and development and a place to start or keep a conversation going.
Who wants to volunteer?
Hello, I’m Ms. JenCreator : mobile.web : design.dev : photos.text
blackphoebe.com/msjen @msjen
Who Are You?
A Couple of Disclaimers
I am a Photo Addict
I am a Freelancer2000-2011 Small Business and Non-Profit Clients
2012 Taking the leap into a Mobile App Startup
I am not afraid to talk of failures
I am Appnostic
Let’s Define Minimalism
Minimalistmin·i·mal·ist [min-uh-muh-list]
noun1. a person who favors a moderate approach to the achievement of a set of goals or who holds minimal expectations 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 or essential: a minimalist program for tax reform.
[http://dictionary.reference.com/browse/minimalist]
Minimalismmin·i·mal·ism [min-uh-muh-liz-uhm]
noun1. another name for minimal art2. a type of music based on simple elements and avoiding elaboration or embellishment3. design or style in which the simplest and fewest elements are used to create the maximum effect
[http://dictionary.reference.com/browse/minimalism]
Minimalissimo"Minimal Art reacted against the symbolism, spontaneity, and emotional intensity of Abstract Impressionism. Rather than expression, Minimal Art artists sought after objectivity. By removing ‘distractions’ like composition, theme, representation and so on, they wanted to allow the viewer to experience the work as a whole, and in its own respect." - minimalissimo.com
[http://minimalissimo.com/2009/09/donald-judd/]
Ms. Jen’s DefinitionMinimalism 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 is
both delighted and is able to complete the task they came for.
Maximalism v Minimalism
A Women’s Clothing Boutique, Main St, Seal Beach, Calif
A Women’s Clothing Boutique, Main St, Seal Beach, Calif
Hunter & Gather CultureAmbience
Can I find what I want?Do I know what I want?Can I get my task done?
Are we talking class?While the debate about design and class on graphpaper.com is ancient in internet terms, 2006!, the question of minimalism as a function of class is still valid.
The‘busy/overwhelming’ shop is cheap. The clothes are stretchy polyester and the prices match.
The ‘clean/inviting’ shop has silks and linens and the prices are eyepopping.
[Read: http://www.graphpaper.com/2006/09-04_class-and-web-design-part-1-the-class-struggle]
Alternately:Am I Alienating Customers?This is a question I have to ask myself.
Is my minimalism going to cause my clients to lose customers?
Will I lose clients if I stick to my minimalism stance?
MaximalismWhere is the line between so busy and overloaded with content that the person reading or using the site is overwhelmed?
Where is the line for the designer or developer who would like to keep multiple options open, be it for the customer or for future design & code additions?
*bc&dodge
Pressure by StakeholdersThe attack of the ever more *
*vw
Pressure by CustomersThe attack of AOL
*vw
Let’s be honest with ourselves...
But I have the COOLEST extra special handrolled Lua-JS-HTML7.43-Rails-GEM EVAR!!!!Not only does the world need to know how AMAZING it is but it needs to run on feature phones, too...
Your Joy vs.
User’s Joy
How does the person reading or using the site or app benefit from our excesses?
*vr
Your Love vs.
User’s Choices
Excesses can also come in the form of our assumptions and prejudices...
*ab
Maximalism v Minimalism
Let’s talk about a few mobile realities...
Not everyone has 20/20 vision
Not
Not everyone is literate
Yet.
Not everyone equal dexerity or use of touch
Let’s not forget voice and sound...
Did I just make a case for Maximalism?
Minimalism Can Set You Free
One of the reasons, I tend towards minimalism over time is so that I can afford to make allowances for complexity as needed.
If I go lean on code and design elements in one or more areas, I can afford to go fatter in areas where it will benefit the user.
Minimalism Can Set You Free
Don’t skimp on the user research and testing,but do you really need to use every gesture and touch interaction possible?
UX | IA Minimalism
Bryan, Stephanie, and the Teppo 200
UX | IA Minimalism
ImagesContentNavigationDesign ElementsLayout & Columns
Visual Minimalism
Visually delight the viewer | reader and lead them into the content
Visual Minimalism
Only use what is needed right now
Code Minimalism
Fear not the Server, it is your friendlet it do the heavy lifting and thinking
Code Minimalism
Zen code may include some poetryand abstraction
Code Minimalism
http://refactoringmanifesto.org/
Refactoring Manifesto
sets the whole team free to apply complexity where it is most needed and best used to create happy mobilists
UX|IA + Visual + Code Minimalism
Device Detection :: Mobile First or Responsive
The Practical & Pragmatic
Device Detection :: Mobile First or Responsive
Responsive Images :: Cut out the fat
The Practical & Pragmatic
Device Detection :: Mobile First or Responsive
Responsive Images :: Cut out the fat
Lean code :: Javascript as poetry as desired
The Practical & Pragmatic
Device Detection :: Mobile First or Responsive
Responsive Images :: Cut out the fat
Lean code :: Javascript as poetry as desired
Don’t be afraid to revisit and revise
The Practical & Pragmatic
Device Detection :: Mobile First or Responsive
Responsive Images :: Cut out the fat
Lean code :: Javascript as poetry as desired
Don’t be afraid to revisit and revise
Q&A :: Test, Test, Test
The Practical & Pragmatic
Device Detection :: Mobile First or Responsive
Responsive Images :: Cut out the fat
Lean code :: Javascript as poetry as desired
Don’t be afraid to revisit and revise
Q&A :: Test, Test, Test
User Testing :: Watch People Use Your Site
The Practical & Pragmatic
Thank You!Questions? Have a mobile site you want to show?