Typography and Responsive Grids in the World of Mobile Development

transcript

Webina le Hands -on · Mun ich 12/2013

Typography and Responsive Grids

in the World of Mobile Development

Hi!and welcome!

Hallo!und herzlich willkommen!

Questions?

Yo u c a n c o n t a c t m e l i ke t h i s : t i a g o @ t p w d . p t @ t i a g o p e d ra s

Part 1/4

State of the artThe usage paradigm shift

Mobile VS DesktopPart 1/4 - State of the art

Cour tesy o fMorgan Stanley Research, 2010

Global mobile VS desktop internet usage projectionIn

2007 2008 2009 2010 2011 2012 2013 2014 2015

Desktop Mobile

Cour tesy o fhttp://www.heise.de/newsticker/meldung/Consumermarkt-Erstmals-mehr-Tablets-als-Notebooks-verkauft-1938179.html

Sales figures for PCs, Notebooks and Tablets

450 000

900 000

1 350 000

1 800 000

Q1-2012 Q2-2012 Q3-2012 Q4-2012 Q1-2013 Q2-2013

Desktops Notebooks Tablets

Cour tesy o fAdobe.com, July 2013

–Me (just now)

We should start consideringtablet users a lot more.

Problems arisingPart 1/4 - State of the art

http://www.gomez.com/engaging-the-tablet-user/

“When a problem happens, nearly half of tablet users says they will only try to reload the

page once or twice.”

Common issues for tablets

Slow load times are the most frequently cited (66% on enquires)

Site crashes or problems with some site functions (44%)

Formatting or display issues (42%)

–Guy Podjarny, guypo.com

“Today, smartphone browsers often get redirected to mobile websites which tend to

be significantly lighter than their desktop counterparts.”

–Guy Podjarny, guypo.com

“Responsive websites, however, don’t follow this pattern.”

347responsive websites

320×480

to1600×1200

86%of the

websites weighed the

Weight test

Part 2/4

User ExperienceWas it good for you?

Cour tesy o f

Usability

User Experience

Joy o f use In te rac t ion Reac t ion

Pred ic tab i l i t y Func t iona l i t y

I n tu i t i v i t y

Trus t C red ib i l i t y

Ha r mony

Cour tesy o f

Usability

User Experience

Joy o f use In te rac t ion Reac t io

P red ic tab i l i t y Func t iona l i t y

Ha r mony

Cour tesy o f

Usability

User Experience

Ha r mony

Good experiencesPart 2/4 - User Experience

So what is a good experience?

Cares about context

Cour tesy o f

Website by TPWD (http://2bepro.com)

Consistent

Cour tesy o f

Size independent

Cour tesy o f

Orientation independent

Cour tesy o f

Adapts to the platform’s patterns

Cour tesy o f

Bad experiencesPart 2/4 - User Experience

–Joshua Porter, 2007

“When a logo works, it makes you think certain things. Makes you think about the company,

their influence, their reach. It’s all about branding…”

“… When a web site works, on the other hand, you’re using it to do something, interacting with it.

You are inputting information, asking questions, getting answers.”

–Joshua Porter, 2007

Cour tesy o f

Usage contextPart 2/4 - User Experience

–G.M. O’Connell, creator of the first web banner

“People read newspapers, listen to the radio, and watch TV, but they go to the Web

to GET THINGS DONE.”

Un-pre-dic-ta-bi-li-ty

Cour tesy o f

Öffentlicher Raum

Arbeitsplatz

Privat

NutzungsmodusUmfeld

Situation

Hands-onModus

Unterwegs

Portrait Landscape

Nach vorne lehnen

Zurücklehnen

Stationär

Cour tesy o fhttp://techcrunch.com/2012/10/22/google-research-shows-tablets-are-for-games-and-email-mostly-used-on-couch-in-bed/

Where are people using mobile devices?

84% at home

80% during miscellaneous downtime throughout the day

76% waiting in lines of waiting for appointments

69% while shopping

64% at work

62% while watching TV (alt. study claims 84%)

47% during commute in to work

Stats by Luke Wroblewski, http://www.lukew.com/ff/entry.asp?1263

Screen size

http://gs.statcounter.com/press/screen-resolution-alert-for-web-developers

“1024x768 has fallen from 41.8% in March 2009 to 18.6% in March 2012.

Over the same period 1366x768 has grown from 0.68% to 19.28%.”

Screen sizes, shown in a non-flexible medium. (Photo and work: Aram Bartholl)

Orientation

Don’t force your design to every possible size/orientation. Sometimes it’s better that you adjust to a particular context

People tend to use tablets more on landscape mode

You should get some insights on each situation

Amount of content needs to be considered and reviewed

Performance

Size and speed

HTML! 36! 4%!CSS! 30! 3%!Images!451! 51%!Javascript! 170! 19%!Fonts! 200! 23%

Weight (Kb) Percentage

HTML 36 4%

CSS 30 3%

Images 451 51%

Javascript 170 19%

Fonts 197 22%

Total 884 100%

Other issues

Other technical issues

Legacy browsers (of course…)

Connection speed

Pixel density

Viewport and zoom

Retina images

Other usability issues

We have big fingers!

Elements position distance to edge

Typography size

User’s distance to screen

Part 3/4

Grids and MediaIntroduction and DIY guide

Cour tesy o f

Usability

User Experience

Ha r mony

Grid and framework options

Part 1/2 - Grids and Media

GridsThey come in two flavours

GridsFluid grids. Easier to adapt to any screen size.

GridsFixed grids. More rigid but easier to control.

Starting points: frameworks

Bootstrap

Foundation

Less Framework

Skeleton

Frameworks include more than just a grid. They have typography settings, input styles,

entire modules… and also a lot of JS.

Advantages and disadvantages

Allows you to quickly build up a structure with little effort

Helps to keep most of the elements aligned, making a cohesive composition

Easy way to move from a wireframe directly to the browser

Facilitates mobile layouts in certain pre-determined adaptations

They won’t work for every website (specially if you have fewer content)

Might limit your information architecture and may look too rigid

Might injure visual rhythm and create a monotonous effect

Should never, EVER, get in your way while designing or coding the layout

Examples

Live coding:building a custom grid

–Jeremy Keith, in the foreword of “Responsive Web Design” by Ethan Marcotte

“The technologies existed already: fluid grids, flexible images, and media queries.”

Building a custom grid

Fluid grid (using percentages) of 12 columns. Responsive but not mobile first(better/easier starting point)

Flexible images

Break points (media queries)

– Joni Korpi, author of the Less Framework

If you think of Mobile First as progressive enhancement, these grids examples will feel

more like graceful degradation

Building a custom grid

It’s good practice to include one of these complimentary base styles:

Normalize

Boilerplate

“My recipe”

Convert a regular grid (e. g. 12 columns) to percentages

Chose a clearfix method

Change the total width to max-width

Make every image adjustable in size

Create first media query for smartphone

Then add extra breaking points

(live coding)

Extra tips

For extra easiness and performance add the following:

Box sizing(search for “Paul Irish box sizing”)

Responsive images(using Scott Jehl’s polyfills the <picture> tag)

Concatenating asset files(scripts, stylesheets and images)

Minifying asset files(CodeKit app is great for scripts and stylesheets)

Polyfills and helpers

Media Queries: Respond.jshttps://github.com/scottjehl/Respond

Responsive Images: Picture Fill https://github.com/scottjehl/picturefill

HTML5 tags and others: Modernizr http://modernizr.com/

CSS3 selectors: Selectivizr http://selectivizr.com/

Load JS with to MediaQueries: MatchMediahttps://github.com/paulirish/matchMedia.js/

Part 2/2

Web TypographyCommon caveats and needs

How we used to set typography

Part 2/2 - Typography

How we used to set typography

In the beginning there were no Web Fonts, only Web Safe Fonts. Choosing a font was easier

Now choosing/using a font is not merely a stylistic issue. It’s worth knowing the role of the technological side in all of this

We would place some/all the content

We would set a font size base for the body

Define the width of the website accordingly to the number of words per line

Problems of responsive typography

Part 2/2 - Typography

Fluid grids create lot’s of type layout and content control problems

Is it big enough to be read on a mobile device?

Each browser and OS maker uses a different text rendering engine so we need to test… a lot!

Anti-aliasing in legacy browsers! :(

Hintings are a must-have on Windows

Is the font loading time fast enough?

Performance issues (weight of files and unnecessary versions of the same font)

FOUT (Flash Of Unstyled Text)

Context: what is an average distance for a user to hold a device? Can he read your text?

– Trent Walton

“I’m realising that the predictability & control we’ve had over web type is becoming a thing

of the past.”

Basic type settingPart 2/2 - Typography

Test > Iterate > Test > Iterate > Test > Iterate > Test > Iterate >

“My recipe”Choose one or two fonts that are both readable and fit the branding

Set a basic size for the body text of your default version

If using a fixed grid with adaptative layouts, test and adjust size in all of them

If using a fluid grid, try to define an average size between breakpoints

45-75 characters per line is generally accepted as safe for comfortable reading

Create the remaining styles for titles, labels and highlight paragraphs (use EMs or REMs)

(live coding)

Font servicesFrom a service provider or CDN

Typekit

Google Fonts

Fonts.com

Cloud Typography by H&FJ

Or as Web fonts files

Font Squirrel

MyFonts

CostsFrom a service provider or CDN

Typekit (starting at €)

Google Fonts (free)

Fonts.com (starting at €)

Cloud Typography by H&FJ (€)

Or as Web fonts files

Font Squirrel (mostly free)

MyFonts (pay per font, starting at 40€)

Icons and specials

Entypohttp://entypo.com/

Chartwellhttps://www.fontfont.com/how-to-use-ff-chartwell

http://www.kickstarter.com/projects/207474036/iconic-advanced-icons-for-the-modern-web

Tools and helpers

Try text-rendering: optimizeLegibility;http://www.usabilitypost.com/2012/11/06/optimize-legibility/

FlowTypehttp://simplefocus.com/flowtype/

FitTexthttp://fittextjs.com/

TypeCasthttp://typecast.com/

Final referencesIn case you want to know more

Performance implicationshttp://www.guypo.com/mobile/performance-implications-of-responsive-design-book-contribution

A Closer look at Font Renderinghttp://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/

Responsive Typographyhttp://ia.net/blog/responsive-typography-the-basics/

Thank you!

Yo u c a n c o n t a c t m e l i ke t h i s : t i a g o @ t p w d . p t @ t i a g o p e d ra s