Transcript Website Design For Your Layout or Club

Website Design For Your
Layout or Club
Dave Grenier
Rails Across the Bay 2009
PCR Convention - Fremont
April 17, 2009
Introduction





Picture two scoops of vanilla ice cream
Q. What is this clinic about?
A. How to create a website for your
model railroad or club
Q. What is it not about?
A. Alphabet soup – no HTML, CSS, PHP
Rails Across the Bay 2009
Fremont, CA
2
Why A Website?






Show something
Brag about something
Teach something
Sell something
Why not?
OK, let’s build a website!
Rails Across the Bay 2009
Fremont, CA
3
Getting Started






You need a web host
What’s a web host?
Stores your files on their computers
Connection to Internet
Two types
Free and Paid
Rails Across the Bay 2009
Fremont, CA
4
Free Web Hosting







Yahoo! GeoCities
Trainorders.com (Premium members only)
T35 Hosting (t35.com)
Angelfire
Bravenet.com
Your ISP
Google “free web hosting”
Rails Across the Bay 2009
Fremont, CA
5
Free Web Hosting - Pros




Free
Website templates
Easy to use
No HTML or CSS
Rails Across the Bay 2009
Fremont, CA
6
Free Web Hosting - Cons






Advertisements
No domain name
Long website address
Difficult to upload files
Limited storage & bandwidth
Limited technical support
Rails Across the Bay 2009
Fremont, CA
7
Paid Web Hosting






BlueHost.com
GoDaddy.com
1and1.com
Earthlink.net
1,000’s of others
Google “paid website hosting”
Rails Across the Bay 2009
Fremont, CA
8
Paid Web Hosting - Pros







Free domain name - usually
Most have 24/7 support
Better uptime service
More disk space and bandwidth
No advertisements
Better search engine results
Programming languages (PHP, ASP, SQL)
Rails Across the Bay 2009
Fremont, CA
9
Paid Web Hosting - Cons

It’s not free!
Rails Across the Bay 2009
Fremont, CA
10
OK, Now What?






You need a domain name
Your website’s address
(eg. www.mylayout.com)
Check availability of domain name
Register domain name with host
Sign up for a hosting account
Now on to the fun part!
Rails Across the Bay 2009
Fremont, CA
11
Website Creation Tools





Four Main Categories
Templates
Web Editors
Graphics Applications
File transfer utilities (FTP)
Rails Across the Bay 2009
Fremont, CA
12
Templates







Available on many web hosting sites
Preformatted pages
Font styles
Page backgrounds
Color combinations
Easy to use, no HTML!
Focus on content
Rails Across the Bay 2009
Fremont, CA
13
Web Editors







MS Notepad
Notepad++
MS Word
WeBuilder
MS Expression Web
Adobe Dreamweaver
Apple iWeb
Rails Across the Bay 2009
Fremont, CA
14
Graphics Applications






MS Photo Editor
GIMP
Corel Paint Shop Pro
Adobe Photoshop Elements
CorelDRAW
Adobe Photoshop CS4
Rails Across the Bay 2009
Fremont, CA
15
FTP Utilities




Copies files to your web host
CoffeeCup Direct FTP
Ipswitch WS_FTP
CuteFTP
Rails Across the Bay 2009
Fremont, CA
16
Web
Design
Tips
Rails Across the Bay 2009
Fremont, CA
17
Don’t Drive ‘em Away






Don’t use “Click to enter my website”
Don’t use uncontrollable sounds
Don’t use busy, crowded pages
Don’t use many different fonts
Don’t use large photos
Don’t use long paragraphs
Rails Across the Bay 2009
Fremont, CA
18
NO Long Paragraphs
When writing body text for a web page or anything to be read online, make
sure you use fairly short sentences and paragraphs otherwise you are making
it really hard for the rest of us to read and understand what you are saying
because the eye and brain need a brief rest now and then as they read so that
it’s easier to scan, take in, and process what you have just read otherwise you
are making it very hard on us poor readers by making us read long run on
paragraphs of text that never seem to end, they just go on and on so don’t
you wish this paragraph would end; yeah, I do too, but I thought I would show
you how hard it is to read long run on paragraphs of text, and it’s actually kind
of surprising how many people don’t seem to pay any attention to this and
they just force the rest of us to read all this run on text, which is a good way
to make sure your website will never be revisited or recommended by anyone
because the site is so hard to read with all the long and eye-tiring paragraphs
like this long paragraph you see here; so are you tired yet or do I need to
keep going?
Rails Across the Bay 2009
Fremont, CA
19
Break It Up!
Shorter paragraphs
Two or three sentences
Short sentences
Easier to read
More inviting to visitors

Rails Across the Bay 2009
Fremont, CA
20
Short Paragraphs
When writing body text for a web page or anything to be read
online, make sure you use fairly short sentences and paragraphs.
Otherwise, you are making it really hard for the rest of use to read
and understand what you are saying! The eye and brain need a
brief rest now and then as they read so that it’s easier to scan,
take in, and process what you have just read.
You make it very hard on us poor readers by forcing us to read
long run on paragraphs of text that never seem to end, they just
go on and on!
Aren’t you glad this page uses shorter paragraphs and sentences?
See what a difference short paragraphs and short sentences make
to readability?
Rails Across the Bay 2009
Fremont, CA
21
Design Tips - Fonts

Sans-serif fonts preferred for screens
Don’t use serif fonts, OK for printed media

Use different sizes for




Emphasis
Big enough to see
Size adjustable
Not everyone has young eyes!
Rails Across the Bay 2009
Fremont, CA
22
Design Tips - Fonts
Rails Across the Bay 2009
Fremont, CA
23
Design Tips - Photos





Avoid large images
72 dpi max
Adobe Photoshop Elements
Use thumbnails linked to larger photos
Make thumbnails large enough to see!
Rails Across the Bay 2009
Fremont, CA
24
Design Tips - Color

Avoid
UGLY color combinations
n

n
Avoid
dark text on dark backgrounds

n light text on light backgrounds
Avoid

UUse dark text on light backgrounds
Rails Across the Bay 2009
Fremont, CA
25
Design Tips - Menus






Provide webpage navigation
Use on every page
Same place on every page
Left nav bar easiest to use
Link all pages
Drop-downs use CSS or JavaScript
Rails Across the Bay 2009
Fremont, CA
26
Putting It All Together - Finally!






Plan website on paper 1st
Draw it out
Headings
Text blocks
Photos
Navigation (menu)
Rails Across the Bay 2009
Fremont, CA
27
Home Layout Website







Introduce your layout (Home page)
Track plan
Layout photos
Construction photos
Prototype history & photos
Cool techniques
Publications
Rails Across the Bay 2009
Fremont, CA
28
Home Layout Website (cont)







Operating scheme
Electrical control system
Follow a train around the layout
Equipment roster
Photos, photos, photos
About you
Invitation to visit
Rails Across the Bay 2009
Fremont, CA
29
Club Website






Introduce your club (Home page)
About the club
Address, with map
Hours of operation
Telephone number
Layout photos and trackplan
Rails Across the Bay 2009
Fremont, CA
30
Club Website (cont)






Prototype history & photos
Membership information
Invitation to join or visit
Meeting schedule
Calendar of events
Activities
Rails Across the Bay 2009
Fremont, CA
31
Club Website (cont)







Newsletter
Officers
By-laws
Club history
Community service
Non-profit status (if applicable)
Links
Rails Across the Bay 2009
Fremont, CA
32
Putting it all together
Ideas
Fonts | Photos |
Colors | Menu
Templates | Editor |
Graphics | FTP
Web Host | Domain Name
Rails Across the Bay 2009
Fremont, CA
33
You’re Almost Done!








Time to publish
Upload to host
FTP
How does it look on the Internet?
Use different browsers – IE, Safari, FireFox
Verify ALL links work
Revise as needed
Does it look OK now?
Rails Across the Bay 2009
Fremont, CA
34
CONGRATULATIONS!








You have a website!
Who knows about it?
Nobody? Tell a friend, or a bunch!
Submit it to Google and Yahoo!
www.google.com/submit_content.html
search.yahoo.com/info/submit.html
Keep content fresh and updated
Use “Date last changed”
Rails Across the Bay 2009
Fremont, CA
35
Whetted Your Appetite?







Now what?
Learn more website development
HTML, XHTML, CSS
PHP, ASP
JavaScript
MySQL database
Adult education classes
Rails Across the Bay 2009
Fremont, CA
36
Where to Get More
Information - Tutorials







www.w3schools.com/
www.webstyleguide.com/
www.thesitewizard.com/
www.alvit.de/handbook/
www.learningwebdesign.com/
www.hooverwebdesign.com/
www.resources.bravenet.com/
Rails Across the Bay 2009
Fremont, CA
37
Where to Get More
Information - Tools









notepad-plus.sourceforge.net/uk/site.htm
www.blumentals.net/webuilder/
www.microsoft.com/Expression/
www.adobe.com/products/dreamweaver/
www.gimp.org/
www.coffeecup.com/
www.ipswitch.com/products/ws_ftp_home/
www.cuteftp.com/
www.cutepdf.com/
Rails Across the Bay 2009
Fremont, CA
38
Where to Get More
Information – Misc.







www.sitepoint.com/recentarticles/
www.sitepoint.com/article/overcoming-frontpage-hurdle
www.google.com/submit_content.html
search.yahoo.com/info/submit.html
www.webmonkey.com/
www.webdesignerwall.com/
www.hypergurl.com/colormatch.php
Rails Across the Bay 2009
Fremont, CA
39
Questions?
Next year:
Silver Rails 2010
April 28 to May 2
Sparks, Nevada
www.pcrnmra.org/conv2010
Rails Across the Bay 2009
Fremont, CA
40