This webinar will demonstrate how professional and B2B brands are deftly handling the challenges of mobility and screen size, while also solving branding challenges bigger than any device. Joe Walsh, Principal and Creative Director at Greenfield/Belser will share a visual show and tell with lessons learned and best practices shared. You will see and learn: · The difference between responsive and adaptive designed mobile websites · The pros and cons of device friendly options, including costs · Four new responsive website case studies and the integrated branding approaches driving them · Best brand and marketing practices across all devices.

1. RESPONSIBLE WEB DESIGN
design that responds
smartly to brand
challenges and devices
of all shapes
and sizes
11/11/2014

2. if you like this program, you may also like

3. agenda
• the importance of brands and sites
• responding to brand challenges
• the business case for mobile friendly
• mobile friendly: adaptive v. responsive
• device friendly design tips

4. agenda
• the importance of brands and sites
• responding to brand challenges
• the business case for mobile friendly
• mobile friendly: adaptive v. responsive
• device friendly design tips

5. fact finding has always guided us…

6. how important is your site…?

7. facts on the go:
your buyers are online, in droves

8. how often do you use the Internet
for purposes other than email?
email excluded, 94% go online daily

9. do you go online to search for outside
professionals to work for your company?
3/4 search online
for professionals

10. how do you find firms?

11. how important are these Internet sources for
learning about professionals?
85% consider Web
sites important

12. how likely is it that your decision to put a new
professional services firm on your short list would be
influenced by your perception of the quality or lack
of quality of the firm’s Web site?
3/4 (76%) say they are likely to be influenced by your Web site’s quality

13. have you ever put a professional services
provider on your short list based on
information you found on their Web site?
1/2 put professionals on their short list based on Web site info.

14. yes, web is important, but on the flip side …

15. professional services marketers
don’t give their sites and other brand
building efforts high marks, really?

17. CMOs believe
their brand is
moderately to
extremely
important
Managing
Partners believe
their brand is
moderately to
extremely
important
only 26%
find their brands
very helpful
95% 92%

19. 1 5

20. agenda
• the importance of brands and sites
• responding to brand challenges
• the business case for mobile (duh!)
• mobile friendly: adaptive v. responsive
• device friendly design tips

21. “without strategy, design is veneer”

22. repositioning an entire brand to
shake misperceptions and align
with marketing goals

38. earning attention and carving out
differentiation in the big apple

55. final point on branding and web
design, first impressions matter …

60. agenda
• the importance of brands and sites
• responding to brand challenges
• the business case for mobile (duh!)
• mobile friendly: adaptive v. responsive
• device friendly design tips

61. by 2014, more people will access
the internet from mobile devices
than from desk or laptop computers
— Morgan Stanley

64. in a small world, “context is king”

65. mobile or tablet
sitting on couch or train
walking around/in line
travelling/waiting
seeking specific info
consuming content
easily distracted
usage differences
desk or laptop
sitting at a desk
office environment
often “working”
some random surfing
often creating content
focused on the computer

66. other obvious differences
less real estate
less bandwidth
touch input
hard to type

67. your site on mobile

68. your mobile site on mobile

70. agenda
• the importance of brands and sites
• responding to brand challenges
• the business case for mobile (duh!)
• mobile friendly: adaptive v. responsive
• device friendly design tips

71. the best way to adapt to smaller screens?

72. both allow sites to be viewed on mobile
devices and various screen sizes to make
for a more user friendly experience …
they achieve it differently

76. device agnostic vs device specific display

77. adaptive responsive

78. basic non-technical differences
responsive
requires redo
single “template”
inflexible
less maintenance
more $$ upfront
can be slower
same experience
adaptive
renovation/addition
multiple “templates”
more flexible
more maintenance
more $$ long run
generally faster
custom experience

79. agenda
• the importance of brands and sites
• responding to brand challenges
• the business case for mobile (duh!)
• mobile friendly: adaptive v. responsive
• device friendly design tips

80. deliver brand consistency

81. include brand promise

82. don’t forgo pictures

83. still tell stories

84. make contact an
“easy button”
remember that mobile
often means going
somewhere; make it
easy for your visitor to
get there

85. vertical scrolling, yes,
but …
a drop down menu
button allows ease of
navigation and key
message or function
delivery

86. vertical scrolling, yes,
but …
a simple menu
revealed; ideally,
accessible from every
page

87. vertical scrolling, yes,
but …
by the way, rule of
thumb is no more
than three “touches”
to get where you want
to go

88. offer search functionality
but not at the expense
of valuable space for
relevant content

89. offer search functionality
make your search
boxes wide enough so
that users are not
limited by space

90. link full site if adaptive
the full site link offers
visitors the ability to
see your desk top site
on mobile if they
choose

91. include logo on
every page
the comfortable
default for going home

92. include logo on
every page
the comfortable
default for getting
home

93. leave finger space
lets not reinvent the
wheel, follow Apple
typically 1 cm by 1cm
padding

94. size fonts appropriately

95. size fonts appropriately
remember reading is
a chore on the web
and even more so on
mobile

96. give the personal touch
your people can own
the smaller screen,
too

97. adapt to screen orientations

98. avoid logins
and registrations
they will deter users
from visiting your
mobile site
if registration is the
point, like an event,
make it simple

99. streamline form fields
the fewer fields the
better (also note
keyboard overtakes
half the screen)

100. now the hard part, rationalizing content

101. cut the fat
don’t
include all
information
from full
site; this will
require
choices

102. sell in small places
key messages can live
comfortably with key
functionality

103. cut the fat
lead with content
carrying words or
images and descriptive
titles to avoid disinterest
or wasted clicks

104. be even smarter about
images and video
don’t shy away from
video and images;
can be a captivating
alternative to reading
must be relevant to
the content; can’t
decorate

105. be even smarter about
images and video
leverage 3rd party
video players (for
consistency, tracking,
SEO, speed, playlists,
etc.); e.g., YouTube

106. other design/content considerations

107. how does navigation change?

108. where does content move to?

109. drawing the line on photos?

110. how is subnavigation effected?

112. questions?
• the importance of brands and sites
• responding to brand challenges
• the business case for mobile
• mobile friendly: adaptive v. responsive
• device friendly design tips

113. RESPONSIBLE WEB DESIGN
design that responds
smartly to brand
challenges and devices
of all shapes
and sizes
April 18, 2012

114. mobile site or app?

115. an app vs. a mobile friendly site
(a luxury apartment landlord offers both for different purposes)
Task centric:
pay my rent,
arrange a
service call
Info centric:
search for
new digs or
upgrade