Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Digital Experts: Web Design

Web Design, Mobile, and Analytics

Amanda Monarch

on 21 June 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Digital Experts: Web Design


Digital Experts
Web Design
Responsive Web Design
“responsive, adaptive content, mobile first, device agnostic, resolution independent”

page that adapts to fit the size and format of any device

ensures viewers can see your content the way you intend
User-centered Design
Design for the user’s point of view and their experience of using the site
Focus on Simplicity
less is more

simplify by combining or eliminating unnecessary pages to give a user only what they need

simplification is necessary to make content accessible and readable on the greatest possible number of devices with the best user experience

minimalist design is often achieved by using big, bold type and oversized imagery to convey only what is important/establish hierarchy
Solid Blocking
brick-like design grid which feature blocks of solid color mixed with blocks of photos or text

users like the simplicity and the contrast between colors, images, and text

strong visuals will encourage users to explore more

flat, solid colors > drop shadows and gradients

use more of scalable vector graphics (SVG)
Oversized Imagery
app style interfaces made popular by the Mac OS X icon designs

more space, less clutter, and decoration

easy for users to navigate
Photo Background
pioneered by fashion brands and photographers

used in all industries with a great amount of success

makes a strong visual statement

great for branding and presentational purposes
no longer limited to typefaces available on users computers

web font foundries such as Google web fonts (free) and Typekit (paid) allows you to use a library of hosted fonts by implementing some code to your site

more use of designs with type and icon fonts
Single Page Websites
+ Content Chunking
users are accustomed to vertical scrolling

splitting content on separate pages requires more effort
from user

technique presenting a large amount of content in smaller visual chunks

easier for users to read and mentally digest
Web Design Trends
Content-first Approach
content drives responsive design

content should be efficient, searchable,
and accessible

users want immediate answers to their needs
Is Photoshop Dead?
New Tools for Web Design
Photoshop is pixel based and is a fixed canvas

Requires a ton of layers to create objects that can be built in the browser with a few line of codes

Photoshop is static, whereas in the browser you have animation, transitions, and interactive states

What you see isn’t always what you get
Problems with Photoshop
What are the alternatives?
Design in the browser with tools like FROONT

Determine styles with tools like Typecast

Create mockups and style guides with tools like Style Tiles

Use WYSIWYG like Dreamweaver
Basics of Responsive Design
What is Responsive Design?
"One Web": a single URL with one set of website code, but changes layout or appearance based on device.
Three Components
of Responsive Design
Media queries and media query listeners — the site “listens” for what device it is being viewed on and responds accordingly.

A flexible grid-based layout that uses relative sizing — percentages rather than pixels.

Flexible presentation — hiding/revealing or scaling portions of images.
What are the Key Benefits
to Responsive Design?
A higher quality user experience, specific to one's circumstances.

Saving time and money over developing multiple versions of the same website.
What are the Drawbacks
to Responsive Design?
Providing only one user journey across
multiple venues

A complex, single CSS may be more difficult
to maintain than two simpler sites.

Relative novelty makes finding mature
resources difficult.
Quality Examples
of Responsive Design


Where is AMC
in this process?
Mobile First Planning
Think "Mobile First"
If something is not important enough to appear on a mobile website, why is it important enough for your standard website?
Website strategy and mobile strategy are rapidly becoming one, with users making the choice of platform not by content, but personal circumstances.
With Mobile First,
Load the absolute bare essentials on smaller platforms.

Expand visual content for larger platforms.

When load time goes down, visits go up.
Why is content marketing
a good fit for mobile?
Mobile devices are ideal for consuming content.

Mobile devices are personal.

Mobile encourages sharing.

Mobile is all about accessing information.
When should I worry
about mobile?
When more than 8% of your visits
are via mobile devices.
User-driven Decisions
It's important to measure...

(through member survey)

(through analytics and A+B testing)

...to get an accurate sense of how your website
or mobile strategy is working.
Actual behavior online
Self-perceived behavior online
You are not the end user.
Successful web strategy is about finding out what members truly need — what is best for them, not you.
Studies show:
If you give people too many choices,
they will make no choice at all.
Less is more.
Users tend to assess credibility instantly.

Clarity in design and visual hierarchy is critical.

Just because something may look simple, doesn't mean it is simple.
What does this person need…
right this very second…
exactly where they are…
with what they have at hand?
For every website user,
ask yourself:
Coding, HTML, and CSS
What is HTML?
Hypertext markup language (HTML)

Main markup language for webpages

Tags are usually in pairs
<em> and </em>
<h1> and </h1>

Denotes structural semantics
What is CSS?
Cascading style sheet (CSS)

Style language that defines HTML layout.

and more!
HTML is used to structure content.
CSS is used for formatting structured content.
How Can You
Style an Element?
In line style

Internal style

External style
CSS Example







Analytics = Data
Analytic research and web tools can help track and interpret a website’s user data.
Analytics can
• Tells the story of a website

• Inform web design decisions

• Help to build credibility with clients

• Provide answers to questions
Ask the
Right Questions
Tailor your analytics
to a specific goal, user need, or problem you want to solve.
Highlighting a specific metric
is key to making the most out of analytics data.
Example Questions
• Who is using my site?
• Where are they coming from?
• What content are they consuming?
• How are they engaging with that content?
How can analytics be used on a regular basis?
Track marketing efforts
Set goals and follow conversion rates
Analyze effectiveness of site design and layout
Measure page views against bounce rates
Track keywords that lead to your site
Use in-page analytics to record visitor sessions and see how they move around your site
Mobile device reporting
Two Important Notes
to Remember
Analytics are a very viable way to help meet a variety of association goals.

Low cost: Approx. $800-$1,800 to set up, monitor, and report results.
Analytics Examples
Benefits of Analytic Tools
Heatmap reports
Google Analytics
Example #1
Google Analytics limited to activity within website
Popular link went un-noticed
Google Analytics is unable to capture and report on activity on links on a website page if the link leaves the website. While working on the PalliativeDoctors.org site and looking at the report on high number of pageviews, it was not apparent that the Find a Palliative Doctor was the most popular link on the page. It also wasn’t apparent by looking at the In Page Analytics report for the main page of the site.
Example #2
Search Feature can provide valuable insight
Search exit percentage – good indicator
Time spent after search– good indicator
The search feature on the AAHPM website is very popular with over 1000 searches performed in a month, in March there were 2000 searches. The average search exit was 16% and the relatively high “time spent after a search” indicates that most visitors are not exiting the site directly after a search. Search terms can be valuable to an account providing ideas for new content or to point out content that isn’t easily seen on a site.
The above image is a small spreadsheet showing the top 10 search terms and the search exit percentage for AAHPM.
Example #3
Heatmap image shows activity
Rotator image on AAHPM –not much activity
Rotator image on HOPA–quite a bit of activity
The heatmap showed that there wasn’t much activity on the AAHPM main page rotator image. Just the opposite – the heatmap showed quite a bit of activity on the HOPA smaller image rotator
Example #4
HOPA page with many PDF links
Are PDFs being accessed?
Overlay report shows actual clicks
Scrollmap shows small amount of page being viewed
HOPA has an advocacy page on their site with many PDF files that are linkable – to see if the PDFs are getting any interest – an overlay report showed very little activity after having run for appx 2 weeks and the scrollmap shows that only a very small section of the page was viewed in the browser.
AAHPM Heatmap
HOPA Heatmap
The above two images show the activity on the the Find a Palliative Doctor link through the heatmap and the overlay report.
Best of the List Links
Here are some of the best links to check out for more information on monitoring analytics



• Heatmap report highlights link activity
• Overlay report displays number of clicks on link
The Heatmap report however showed that the link was very popular, further investigating and looking at the Overlay report showed the actual number of clicks that the link received during a month’s time.
The above image from Google Analytic - in page analytics report , shows no activity on the Find a Palliative Doctor link.
In contrast NANN large page of content
Scrollmap shows large portion of page is being viewed

As a contrast – the scrollmap shows a large amount of a NANN page is being read as seen in this example of a popluar page on the NANN site.
Full transcript