1. Presented by
Holly Walden Ross

2. •
•
•
•
•
•
•
•
Static HTML sites vs. Web 2.0 interactive sites
Responsive Web Design
Cons of creating a site completely in Adobe Flash
Domain Names
Webhosting
Creating your site
Promoting your site
Resources

3. 

Static HTML pages contain content that is
not updated frequently (or ever)
More “current” type of website design contains “web
2.0” features that are dynamic, interactive content that
feeds into the site from multiple users and/or social
media integration (Facebook, Twitter, RSS, blogs, etc.)

4. 


Wikipedia: “a web design approach aimed at crafting sites
to aprovide an optimal viewing experience—easy reading
and navigation with a minimum of resizing, panning, and
scrolling—across a wide range of devices (from mobile
phones to desktop computer monitors).”
A cost-effective alternative to mobile applications.
In late 2012, Google recommended responsive design in
its Webmaster’s Guide: “Google recommends webmasters
follow the industry best practice of using responsive web
design, namely serving the same HTML for all devices and
using only CSS media queries to decide the rendering on
each device.”

5. MOBILE

DESKTOP

http://css-tricks.com

6. 



Websites created completely with Adobe Flash can be
aesthetically-pleasing, but realize the limitations – mainly
that Flash cannot be viewed on Apple devices such as
iPhones and iPads. If you choose to create a site with a
heavy percentage of Flash content, then plan to provide an
alternative site for Mobile and Apple users to view your
content or else risk losing them from your audience.
HTML 5 is taking the place of Flash because its interactive
nature is viewable on mobile devices.
I HIGHLY recommend using HTML 5 instead of Flash.
http://showitfast.com is a drag & drop building tool ($),
aimed at photographers, that uses both Flash & HTML 5

7. ‣
A Domain Name is www.YourNameHere.extension, for example:
‣
‣
Optional, as most hosting provides “yourname.hostingcompany.com” URL
Tips from eHow.com about registering a name:
‣
Register domains with a Domain Name Registrar
‣ www.METHODIST.edu - Also called a “URL” (Universal Resource Locator)
‣ Have a list of possible names ready when you visit the site.
‣ The more unusual the name, the more likely it will be available. Most
common or well-known corporate names are taken.
‣ If the domain name is already taken and you desperately want it, you
may contact the owner and offer to buy it. www.BetterWhoIs.com lets
you see owner details of any domain name unless they use Privacy
Protection.
‣ Most (in)famous registrar is GoDaddy.com and often cheapest
‣ Coupon codes usually available on www.RetailMeNot.com
‣ $7-10/year is a reasonable price; Should never pay $35!
‣ Use a secure password and remember it… if you forget to renew your domain name, a
squatter may buy it and try to sell it back to you for $$$$.
‣ Be aware of “add-ons” and up-sales during the checkout process!
‣ Some web hosting providers provide domain names “Free for Life” or include w/ hosting

8. • Hosting is the computer in “Internet-land” on which you store
the files for your site
•
Free plans:
– Usually have advertising built in to your page that you
cannot control
– Sometimes limited access or tools for building your site
without add-ons that cost $
•
Paid hosting providers:
– Stick with reputable companies; beware of review sites that
just want to get the affiliate traffic. To get the best pricing,
sign up for a multi-year package.
– Great 24/7 tech support is a must for newbies!

9. •
•
•
•
•
•
http://www.HostGator.com/ – an industry leader
http://ASmallOrange.com – based out of Durham, NC
http://www.bluehost.com/ – another popular choice
Many will provide “Unlimited” Space & Bandwidth, etc.
Look for companies that offer “cPanel”, “Fantastico” or
1-Click Script Installs for Wordpress and other apps.
http://www.simplescripts.com will also install over 70
top applications on your site as well.
Cheaper $ is not always better. Read customer reviews.

10. •
•
•
HTML coding: Notepad, Code View in Adobe Dreamweaver
WYSIWYG: Adobe Dreamweaver, Microsoft FrontPage (antiquated)
Free online website builders: MANY! Some good examples:
www.weebly.com
www.wix.com
www.squarespace.com
www.blogger.com – popular blogging site, free, owned by
Google
•
sites.google.com - Google sites – good for sharing data, info
www.about.me – simple one page landing site for social media
(beware of advertising, gotchas, and limitations on others)
Content Management Systems
– Wordpress
– Joomla!
— Drupal
— Many others too

11. http://vimeo.com/45734056

12. http://kb.weebly.com/site-creator.html

13. According to Wikipedia.com:
 A content management system (CMS) is the collection of procedures used to
manage work flow in a collaborative environment. These procedures can be
manual or computer-based. The procedures are designed to do the following:
◦ Allow for a large number of people to contribute to and share stored data
◦ Control access to data, based on user roles (defining which information users or user
groups can view, edit, publish, etc.)
◦ Aid in easy storage and retrieval of data
◦ Reduce repetitive duplicate input
◦ Improve the ease of report writing
◦ Improve communication between users

A web content management (WCM) system is a CMS designed to simplify the
publication of web content to web sites and mobile devices — in particular,
allowing content creators to submit content without requiring technical
knowledge of HTML or the uploading
of files.

14. Wordpress is easily one of the standards in CMS website
design right now. Millions of sites have been built using
Wordpress with tens of millions of viewers daily.
 Wordpress.com -> hosts your site for free, but with
restrictions and add-ons available for $.
 Wordpress.org -> Self-hosted Wordpress can be
installed on a hosting package you buy from a hosting
provider (like A Small Orange) and is unlimited with
what you can add on through plugins and themes. A
great guide for “How to launch a self-hosted
Wordpress blog in 20 minutes” is here:
http://michaelhyatt.com/ez-wordpress-setup.html

15. Great websites usually have GREAT Photography/Photos.
• Using your own photos:
– Free: www.Flickr.com or Google’s www.Picasaweb.com / Google+
• Pros: Free, Picasaweb integrates with Google Picasa software (picasa.google.com); Flickr now
offers all users 1 TERABYTE of storage space = 537, 731 6.5 megapixel photos!
• Cons: Less control over layout, Flickr is very “public”; Picasa requires Google account;
additional storage space past basic limit on Google will cost you $$; Google space shared w/
Gmail and Google Drive files.
– Paid: (my favorite) www.Smugmug.com
• Free 14-day trial, NO ads, anyone can leave a comment, gorgeous professional layouts.
Customizable with themes/CSS. Pro account lets you sell photos for a profit. $5 off annual
price with coupon code: uovmhuZK0NZ2k
•
Using your own videos:
– Upload your video to one of these sites and then embed on your page
• www.YouTube.com – quickest way to spread your video virally to world
• www.Vimeo.com – very popular with video professionals

16. You can also get stock photos from sites such as:
 www.sxc.hu – leading free stock photography site. A
great place to start – lots of options.
 www.istockphoto.com (paid) – one-time cost of a few
dollars per image; only need the 72 dpi version for
web. Search for “stock images” to find other resources
such as shutterstock.com.
 www.cgtextures.com – thousands of free texture and
background photos

17. •
Make some $$
– www.google.com/adsense
– Use affiliate banners and code for online services you already frequent
in order to get referral money or credits
•
•
Feedburner.com creates an RSS feed with analysis
Search Engine Optimization
– For Wordpress – Use the “All-in-One SEO Plugin Pack” - training videos for using
this SEO plugin which is THE most downloaded plugin for WP (15.8 Million
downloads) – Free & Pro versions available
http://ithemes.com/wordpress-seo-free-video-training-with-michael-torbert
– More tips on SEO:
http://www.ehow.com/how_7785778_learn-seo-online.html

18. 


http://goldentwig.weebly.com (sample site created in 20 min)
http://about.me/hollywaldenross
http://goldentwig.blogspot.com
Wordpress examples:
 www.asherwin.com
 www.NCMathCompetition.org
Dreamweaver site:
 www.twiceasnice4tots.com

19. Self-Serve Resources:
http://www.meetup.com/Raleigh-WordPress-Meetup-Group
http://www.meetup.com/Fayetteville-Tech-Geeks/
http://WordCampRaleigh.com – November 23-24, 2013 at NCSU
http://www.lynda.com – MANY training videos, some are free
http://www.smashingmagazine.com – fabulous resource for designers/creatives
http://www.sitepoint.com – Targets web professionals, specifically developers & designers
When in doubt about something, be specific and just Google it! There are thousands of free
tutorials and websites with tips on Wordpress, Plugins, Themes, Graphic Design, HTML, and
everything else you could question. Sign up for email lists, Facebook pages and blogs to feed your
learning and knowledge.
Professional Resource:
Holly Ross, Golden Twig Creations
Computer Training, Web & Graphic Design, hourly rates vary
This presentation available at:
http://www.slideshare.net/goldentwig/methodist-university-website-training-presentation

20. •
Use one of the methods below to create your own site:
1.
Simple Drag & Drop static site:
www.Weebly.com
2. Blog
www.blogger.com
3. More sophisticated, CMS site: www.Wordpress.com

21. Notes: