A Minimalist's Guide to the Mobile Web

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?