Transcript mensa-easywebdesign

The easy way to a nice
looking website design
By a total non-designer (Me!)
Website Refresher
Three types of Website
1.Hand rolled HTML. Lightweight static pages.
2.Scripted Website. (PHP, ASP.NET etc.)
3.Content Management System (CMS) e.g.
WordPress, Joomla, Drupal (Mensa Website)
and many many more.
Handrolled Websites
• Can be very pretty but take a lot of work and
look a bit 90s. http://raymondwalley.com
Scripted Websites
• A scripted website is where the script (.php,
.ASP) is a computer program that runs on the
server and outputs HTML etc to the browser.
• Any website which is not built on a CMS but
which has logins etc is also a Scripted Website.
Content Management Systems (CMS)
• Data is held in a database. This can include
instructions about the appearance as well as
functional data.
• A CMS is a scripted website. Apart from some
written in ASP.NET, the majority of CMS are
written in PHP.
• Most CMS are Open Source. i.e. Free.
Just Some of the PHP CMS!
Making a Scripted Site Look Pretty
There are thousands of free templates out
there. Search for
Free CSS templates
Free html5 templates
Free web templates
So You’ve Found a Nice CSS Theme
• Let’s assume website hosting is set up.
1.
2.
3.
4.
Need to download theme files.
Edit files.
Upload.
Voila!
• Example:
http://bespokeprogrammers.com
Original Template
• http://www.solucija.com/template/internet-sharing
My Website!
Another Example
• Client’s Past Life Regression site needed
refreshing.
• Used this template: “small business” on
http://all-free-download.com
Original Template
Ended Up as
Pros and Cons for Scripted Websites
Pros
Cons
• Look’s pretty.
• Easy to Change.
• 1000s of templates.
• Usually need a web
developer or to learn
PHP.
• Can be time
Consuming.
Using a CMS
• Generally not too difficult to master.
• Once learnt you can change appearance very
quickly.
• The popular ones have thousands of themes
to alter appearance as well as plugins or
extensions to add new functionality.
Most Popular CMS
• WordPress - most popular CMS for blogs
• Drupal (New British Mensa website)
• Joomla
• We’ll focus on WordPress, I’ll show to use it.
WordPress
• Not just for blogs but also for full websites.
• Takes a minute to install (with some hosts, not
manually).
Two Versions
1. WordPress.com – hosted service. Free or
Premium.
2. WordPress.org – free software, you host.
Example 1 – WordPress Blog Site
Example 2 – My Blog XamApp.com
Not a Free Theme ($39) but beautiful!
How to Setup WordPress
In this demo, I’ll
1.
2.
3.
4.
Install WordPress (1-2 minutes)
Upload a few plugins (2-3 minutes)
Look for and install a theme (3-4 minutes)
Sit back and bask in the glory! (A lifetime!)
install WordPress (1-2 minutes)
• Start with a “Naked Website”. No Content
Logged into CPanel
• Install from open source installer
WordPress Install Takes 1-2 Minutes
After Installing
WordPress Dashboard
Need to Keep WordPress Upgraded
• New versions often with security fixes come
out every few weeks. This is for WordPress.org
• Wordpress.com is managed so they do it, but
much less flexibility unless you pay for service.
Customising WordPress
• Themes – completely change the look
• Plugins – Add extra functionality
• Widgets – On screen controls
• WordPress comes with two default themes2012 and 2013. Here’s what the site looks like
with the 2012 theme.
2012 Theme
• Plain with no images. We can do better!
WordPress Dashboard lets you search
Lots to Look For
Or Google for Themes
Search for
•Free WordPress Themes
•Free Charity WordPress Themes
Lots of variations in search!
A Free Charity Theme - Danko
Found this one
Two Options
• Search from the WordPress Dashboard. It’s a
one-click install. But limited choices.
• Search Externally – Ie Google. Lots more
available externally but quality varies
enormously and you may need a techy to
upload unless you are happy with FTP. (File
Transfer Protocol).
Themes
• Each comes as a single zip file.
• Need to downloaded, unzipped into your PC.
• All files copied over to server themes directory
• Use FTP client to copy files. Eg Core FTP is a
free FTP client from http://CoreFtp.com
FTP – How To (Slightly Techy!) 1/3
• (For Windows) Goto http://coreftp.com
• Download and install free Core FTP
FTP 2/3 - Setup the site details
Fill in these four
highlighted fields.
1. Site Name
2. URL
3. Username
4. Password
Then click the
Connect button.
FTP 3/3 - Drag the Theme folder
• Left is your PC, right is webserver folders.
• Use buttons to navigate folders then
Drag folder from left to right, wait for files to
copy.
New Theme now known to WordPress
Now activate the theme
• But still need to Configure it.
Configuring
• Adding a Logo
• Adding Pages (it depends if it’s a static page
site or a series of posts site).
• Menus (if the theme supports them)
• Tweaking the Theme.
• Adding Plugins for functionality
• Configuring Widgets
After Some Tweaking
What are Plugins For?
I’ve installed these plugins. All free.
•
•
•
•
•
•
•
Cache the site for speed.
Increase WordPress Security.
Build a sitemap and upload to Google/Bing.
Display on smartphones (Next Page).
Automated Backup.
Simplifying Updates.
And lots lots more available.
Website as seen by Smartphones
This is thanks to the
WpTouch Plugin
Questions?