Embed Size (px)
DESCRIPTION
Done right, your website can be the best marketing tool you have. Want a top-quality site without spending a fortune? Join us for a discussion that cuts through all the SEO hype and other misconceptions...we'll cover everything you need to know for a website you can be proud of.
Citation preview
HOW-TO: CREATE A “TOP-SHELF” WEBSITE
The Easy Way to Separate Yourself Online
+Chris Mohritz | [email protected]
OUR JOURNEY
● Website goal● Page goals● Design theme● Customize the theme● Optimize● Improvements
Interrupt me at anytime for questions / comments
WHY THIS IS IMPORTANT
● No “website in 10 mins” hype● It works● This stuff will put you WAY ahead of the
curve!● Principles can be applied to
standalone html websites, wordpress blogs, or other popular CMS platforms
PREFACE
● Not going to talk about cheapo point-click tools
● Doesn't have to be overnight, do something each day and it'll rock! (CANI)
● Don’t over-complicate it, really● Keep a separation between Form & Function● Think about overall experience, not just how
it looks (form)● What it does (function) is more important
than how it looks (form)
PLAN WEBSITE GOALStep 1
PRIORITIZE DESIGN & CONTENT
1. What your audience needs2. What your audience wants3. What you want
mobile.smashingmagazine.com/2012/04/19/why-we-shouldnt-make-separate-mobile-websites/
ONE THING VISITORS SHOULD DO?
● The Function● Take a “freebie” action? (reservation, etc.)● Opt into your mailing list?● Make a purchase?● Contact you directly?● Follow you on social media?● Subscribe to your blog?● Read a specific article or ebook?
IMPRESSION THEY SHOULD GET?
● The Form● Defines the overall look & feel● What emotion should they experience
when visiting your website?● “These guys are high-end”● “This looks pretty easy to do”● “They make it look easy”● “They understand my problem”● etc.
WHY SHOULD THEY FIND YOU?
● Reverse engineer a searchers experience● What problem are you solving for them?● What question goes to your answer?● Do keyword research based on question● Pick 10 (highest traffic, buy intent, etc.)● ubersuggest.org● marketsamurai.com● wordstream.com/keywords● spyfu.com (check your competitors)● alexa.com (check your competitors)
PLAN PAGE GOALSStep 2
ONE PAGE, ONE PURPOSE
● Each page should have one specific purpose, no more, no less
● Search indexed or not? (money page, site links, existing backlinks, etc.)
● Target keyword? (can determine creation of page)
● SSL or not? (submitting personal info, etc.)● Implement a “no bounce” strategy
EXISTING BACKLINKS?
● Redirect inbound links, especially google sitelinks
● “301” (permanent) redirects pass link juice
FIND A DESIGN THEMEStep 3
BUY AN EXISTING TEMPLATE
● Get as close as possible to desired look & feel (convey an emotion, colors, etc.)
● Shoot for CSS-based design (fewer images)● Responsive not optional ● Recommend theme is based on
getbootstrap.com (simple & standardized)
PLENTY OF MARKETPLACES
● themeforest.net● wrapbootstrap.com● templatemonster.com● elegantthemes.com (wordpress only)
BE AWARE OF
● Theme designers are not SEO'ers● Theme designers are not marketers● You’ll probably won’t find many options
that put a call-to-action above-the-fold, etc.● You’ll probably won’t find many options
that structure <h_> tags properly, etc.● They are only providing the Form, you’ll
need to integrate the Function
CUSTOMIZE THE THEME TO ACHIEVE GOALS
Step 4
THE CUSTOMER EXPERIENCE
● Be explicit, don’t make them think● Keep it as simple as possible (especially
mobile)● Most websites try to do too much
CODE IS EASY
● Learn basic HTML/CSS/JS● Also recommend basic PHP● Learn 10 commands/tags (Google the rest)● testking.
com/techking/infographics/ultimate-html5-cheatsheat
● Use a color-enhanced text editor● fiverr.com for image/graphic work (or use
pixlr.com)
MANY MANY SCREEN SIZES
● Check it on multiple devices & browsers● browserstack.com
OPTIMIZEStep 5
AVOID SHINY OBJECTS
● SEO has UFO syndrome● Forget all the SEO hype ● Real SEO hasn’t changed for years● Google has just gotten (much) better at
weeding out the loopholes/scammers● “The Practice Formerly Known As SEO" ~
they had it wrong to begin with● Most SEO propaganda is confused with “SE
manipulation” (avoid it)● Expect “Google dance” when make changes
PUTTING SEO INTO PERSPECTIVE
● Google is a “Reverse Matrix”● An electronic world trying to mimic reality● Functions similar to how we interact● Trust, credibility, popularity, truth, lies, etc.● Think of a backlink as “word of mouth”
THEIR GOAL IS YOUR GOAL
● Search engines want a better experience for their customers (your website visitors)
● So give the engines what they want ● Just need to help them understand what
your site/page is about
SPEAK THE CORRECT LANGUAGE
● Search engines only understand one language: html (and related)
● Learn their language, at a minimum “conversational html”
● Validate your site’s html (each page)● validator.w3.org
TELL THEM WHAT YOU’RE ABOUT
● SEO basics● moz.com/learn/seo/on-page-factors● searchengineland.com/guide/seo● traffictravis.com● yoast.com (wordpress plugin)● webgnomes.org/blog/10-seo-analysis-tools● Everything is page-specific, protocol-
specific, host-specific, etc.
MAKE IT SNAPPY
● Better visitor experience● Speed is a ranking factor (happier visitors =
higher rankings)● Optimize Images (kraken.io)● Minify (closure-compiler.appspot.com)● Use a CDN (watch CORS)● Use a quality host (cheap ones are slow) ● gtmetrix.com● developers.google.
com/speed/pagespeed/insights
LOCAL BUSINESSES
● Optimize directory listings● Similar SEO principles apply● Citations (address mentions) ~ backlinks● Include geo meta data in website● localseoguide.com
DON’T LOOK LIKE SPAM
● Predictive modeling of spammers● Google Authorship (identity platform)● Avoid “SEO schemes”
googleblog.blogspot.com/2012/06/using-large-scale-brain-simulations-for.html
THE STUFF YOU DON’T SEE
● Meta tags (moz.com/blog/the-web-developers-seo-cheat-sheet-
2013-edition)● Rich Snippets (google.com/webmasters/tools/richsnippets)● Pinterest rich pins (developers.pinterest.
com/rich_pins/validator)● Other social media integration (Twitter
Cards, Open Graph, etc.)● rel="me", "author", “publisher”● "nofollow" (didn't hear it from me)● etc.
IMPROVEMENT CYCLEStep 6
FOLLOW THE DATA
● Click tracking (google.com/analytics)● Search performance (google.
com/webmasters)● Heat map (crazyegg.com)● Split testing (optimizely.com)
TO SUM IT UP...
● Plan before you start● Function is more important than form● Buy an existing template to start● Customize it one day at a time● Tons of free tools to tweak with● No need to guess, tools will tell you what
to change (SEO, html errors, etc.)● Shoot for the top grade and you’ll rock it!
DIG DEEPER
● From the horse’s mouth (support.google.
com/webmasters/answer/35769?hl=en)● Mastering keyword research (noblesamurai.
com/dojo/marketsamurai)● More tips (inc.com/ilya-pozin/build-a-killer-website-19-dos-and-
donts.html)● Psychology of color: (testking.
com/techking/infographics/the-psychology-of-color-must-see-for-web-
designers-infographic)
LEARN CODING BASICS
● Automate business processes (learn basic code & save money, time, headache)
● Learn 10 html tags & 10 php commands● Search YouTube● codecademy.com/tracks/web (html)● codecademy.com/tracks/php (php)● If you have to, force it ...gets easier
