Typography and Responsive Grids in the World of Mobile Development

Typography and
Responsive Grids
in the World of Mobile Development

Webinale Hands-on · Munich 12/2013

Hi!
and welcome!


Hallo!
und herzlich willkommen!


Questions?
Yo u c a n c o n t a c t m e l i k e t h i s :
tiago@tpwd.pt
@tiagopedras


Part 1/4

State of the art
The usage paradigm shift


Part 1/4 - State of the art

Mobile VS Desktop


Global mobile VS desktop internet usage projection
2000

Internet users (MM)

1500

1000

500

0
2007

2008

2009

2010

Desktop

Morgan Stanley Research, 2010

2011

2012

2013

2014

2015

Mobile

Courtesy of

Sales ﬁgures for PCs, Notebooks and Tablets
1 800 000

1 350 000

900 000

450 000

0

Q1-2012

Q2-2012

Desktops

Q3-2012

Q4-2012

Notebooks

Q1-2013

Q2-2013

Tablets

http://www.heise.de/newsticker/meldung/Consumermarkt-Erstmals-mehr-Tablets-als-Notebooks-verkauft-1938179.html

Courtesy of

Adobe.com, July 2013

Courtesy of

We should start considering 
tablet users a lot more.
–Me (just now)

Part 1/4 - State of the art

Problems arising


“When a problem happens, nearly half of
tablet users says they will only try to reload the
page once or twice.”
http://www.gomez.com/engaging-the-tablet-user/

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%)

“Today, smartphone browsers often get
redirected to mobile websites which tend to
be signiﬁcantly lighter than their desktop
counterparts.”
–Guy Podjarny, guypo.com

“Responsive websites, however, don’t follow
this pattern.”
–Guy Podjarny, guypo.com

Weight test
347

responsive
websites

320×480

to

1600×1200


86%

of the
websites
weighed the
same

Part 2/4

User Experience
Was it good for you?


Tr u s t
Credibility
Harmony

Look

Feel

Joy of use
Interaction
Reaction

User
Experience

Usability

Predictability
Functionality
Intuitivity

Courtesy of

Tr u s t
Credibility
Harmony

Look

Feel

Joy of use
Interaction
Reactio

User
Experience

Usability

Predictability
Functionality
Intuitivity

Courtesy of

Part 2/4 - User Experience

Good experiences


So what is a good
experience?


Cares about context


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

Consistent


Size independent


Orientation independent


Adapts to the platform’s
patterns



Bad experiences


“When a logo works, it makes you think certain
things. Makes you think about the company,
their inﬂuence, their reach.
It’s all about branding…”
–Joshua Porter, 2007

“… 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


Usage context


“People read newspapers, listen to the radio, 
and watch TV, but they go to the Web  
to GET THINGS DONE.”
–G.M. O’Connell, creator of the ﬁrst web banner

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


Portrait

Landscape

Arbeitsplatz

Öffentlicher Raum

Hands-on
Modus

Privat

Nach vorne lehnen

Umfeld

Nutzungsmodus

Situation

Unterwegs

Stationär

Mobil
Zurücklehnen

Courtesy of

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

Courtesy of

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


“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%.”
http://gs.statcounter.com/press/screen-resolution-alert-for-web-developers

Screen sizes, shown in a non-ﬂexible 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
Weight (Kb)

Percentage

HTML

4%

CSS

!

36
30

3%

451

51%

Javascript

170

19%

Fonts

197

22%

Total

884

100%

HTML! 36!
CSS! 30!
Images!451!
Javascript!
Fonts! 200!

4%!
3%!
51%!
170!
23%

Images

!

19%!

Other issues


Other technical issues
Legacy browsers (of course…)
Connection speed

!

Pixel density

!

Viewport and zoom
Retina images

Other usability issues

We have big ﬁngers!
Elements position distance to edge

!
!

Typography size
User’s distance to screen

Part 3/4

Grids and Media
Introduction and DIY guide


Part 1/2 - Grids and Media

Grid and framework
options


Grids
They come in two ﬂavours

Grids
Fluid grids. Easier to adapt to any screen size.

Grids
Fixed 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


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 predetermined adaptations

Advantages and disadvantages
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


“The technologies existed already: ﬂuid grids,
ﬂexible images, and media queries.”
–Jeremy Keith, in the foreword of
“Responsive Web Design” by Ethan Marcotte

Building a custom grid

Fluid grid (using percentages) of 12
columns. Responsive but not mobile ﬁrst 
(better/easier starting point)
Flexible images
Break points (media queries)

If you think of Mobile First as progressive
enhancement, these grids examples will feel
more like graceful degradation
– Joni Korpi, author of the Less Framework

Building a custom grid
It’s good practice to include one of these
complimentary base styles:
Reset
Normalize
Boilerplate
…

“My recipe”
Convert a regular grid (e. g. 12 columns)
to percentages
Chose a clearﬁx method
Change the total width to max-width
Make every image adjustable in size
Create ﬁrst 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.js 
https://github.com/scottjehl/Respond

Responsive Images: Picture Fill  
https://github.com/scottjehl/pictureﬁll

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

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

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

Part 2/2

Web Typography
Common caveats and needs


Part 2/2 - Typography

How we used to set
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
Deﬁne the width of the website accordingly
to the number of words per line


Problems of responsive
typography


Problems of responsive 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! :(

Problems of responsive typography
Hintings are a must-have on Windows
Is the font loading time fast enough?
Performance issues (weight of ﬁles 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?

“I’m realising that the predictability & control
we’ve had over web type is becoming a thing
of the past.”
– Trent Walton


Basic type setting


Test > Iterate > Test > Iterate > Tes


e > 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)

Font services
From a service provider or CDN
Typekit
Google Fonts
Fonts.com
Cloud Typography by H&FJ
Or as Web fonts ﬁles
Font Squirrel
MyFonts

Costs
From a service provider or CDN
Typekit (starting at €)
Google Fonts (free)
Fonts.com (starting at €)
Cloud Typography by H&FJ (€)
Or as Web fonts ﬁles
Font Squirrel (mostly free)
MyFonts (pay per font, starting at 40€)

Icons and specials

Entypo 
http://entypo.com/

Chartwell 
https://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/optimizelegibility/

FlowType 
http://simplefocus.com/ﬂowtype/

FitText 
http://ﬁttextjs.com/

TypeCast 
http://typecast.com/

Final references
In case you want to know more


Links
Performance implications 
http://www.guypo.com/mobile/performanceimplications-of-responsive-design-book-contribution

A Closer look at Font Rendering 
http://www.smashingmagazine.com/2012/04/24/acloser-look-at-font-rendering/

Responsive Typography 
http://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 k e t h i s :
tiago@tpwd.pt
@tiagopedras


Typography and Responsive Grids in the World of Mobile Development

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (8)

Andere mochten auch

Andere mochten auch (17)

Ähnlich wie Typography and Responsive Grids in the World of Mobile Development

Ähnlich wie Typography and Responsive Grids in the World of Mobile Development (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Typography and Responsive Grids in the World of Mobile Development