Send the link below via email or IMCopy
Present to your audienceStart 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.
Digital Experts: Web Design
Transcript of 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
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
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)
app style interfaces made popular by the Mac OS X icon designs
more space, less clutter, and decoration
easy for users to navigate
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
technique presenting a large amount of content in smaller visual chunks
easier for users to read and mentally digest
Web Design Trends
content drives responsive design
content should be efficient, searchable,
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.
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
A complex, single CSS may be more difficult
to maintain than two simpler sites.
Relative novelty makes finding mature
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
When more than 8% of your visits
are via mobile devices.
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.
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,
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.
HTML is used to structure content.
CSS is used for formatting structured content.
HTML vs. CSS
How Can You
Style an Element?
In line style
Analytics = Data
Analytic research and web tools can help track and interpret a website’s user data.
• Tells the story of a website
• Inform web design decisions
• Help to build credibility with clients
• Provide answers to 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.
• 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
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.
Benefits of Analytic Tools
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.
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.
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
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.
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.