how to make a great website
DESCRIPTION
How to make a great website ?TRANSCRIPT
How to make a great
WEBSITESPEAKER:
ENG. TAHER GHAZAL
BSc Software Engineering (AAU)MSc Information Technology Management (BUiD)Microsoft Certified Systems Engineer (MCSE) UOWD
First: Making the Blueprint
•Before even thinking of going to the computer, think of the following:
•Goal of the website: What do I want people to do once they get there?
• Target Audience: Who am I designing my site for?
•Content: What will I include in my website?
• Interactivity: How dynamic do I want my website to be?
•Remember: Templates
En
g.
Tah
er
Gh
aza
l
2
Second: Thinking about Design
• Website design (Architecture).
• from a well presented brochure style website to promote your company, to a fully functional online shop to sell your products across the web.
• Logo design.
• create a brand identity, font based logo or a image based logo.
• SEO (Search engine optimization)
• balanced combination of “on page” and "off page" optimization techniques
• Marketing.
• such as Social Media Marketing, Email Marketing, Search Engine Marketing, Video Marketing and Display Marketing.
En
g.
Tah
er
Gh
aza
l
3
A mistake many people make is to begin
their process with the visual elements
first, as they design their home page.
It is best to look at your site holistically
and work out the information flow ahead
of time.
En
g.
Tah
er
Gh
aza
l
4
Third: 5 Steps to
Building a Successful Site Architecture• Step 1 - Identify Keywords
• Relevancy.
How relevant are the keywords to your business while searching.
• Specific or long-tail keywords.
For instance, “laser printer” they haven't decided on one yet.
On the other hand, “HP Laserjet PRO P1102” they know what they want.
• Competition.
• the measure of how difficult it will be to rank for a particular keyword. (SEO for Firefox)
• Search volume.
• Keywords that have a high search volume represent a popular search term that many
people are likely to use.
1. 2-3 word keywords
2. Negative words
3. Keyword tool
• (Google Keyword Tool Box) – (Google Adwords Keyword Tool)
En
g.
Tah
er
Gh
aza
l
5
Third: 5 Steps to
Building a Successful Site Architecture• Step 2 - Map the Keyword Space
• keyword groupings or categories� relevant pages of content
� solid structure.
• Map the keywords relevant landing pages
� fluid connection to content � gap analysis
� missed sub/pages
En
g.
Tah
er
Gh
aza
l
6
Third: 5 Steps to
Building a Successful Site Architecture• Step 3 - Develop Your Site Architecture
•Why Flat is essential ?
• How to build flatness.
• Click depth.
• 75 Links to be 250 – 300 links
• Site Map Creating a Website Sitemap by Jeannie Melinz on SlideShare - Edraw Max
• Cross Linking
En
g.
Tah
er
Gh
aza
l
7
Third: 5 Steps to
Building a Successful Site Architecture• Step 4 - Wireframe Prototyping
• It is not a sitemap. It takes each page on the sitemap and
blocks out the placement of content and navigation as
seen next.
• ProtoShare allows you to develop a sitemap, wireframe,
clickable prototype and post notes in the cloud and allow your
team to work on these elements in an online collaborative
environment.
En
g.
Tah
er
Gh
aza
l
8
En
g.
Tah
er
Gh
aza
l
9
Third: 5 Steps to
Building a Successful Site Architecture
• Step 5 - Content Development
• Finally, actual content for each page that uses the keywords that
you have mapped for each page.
Note: it bridges the searcher expectation to relevant content on your
site, this is all a part of SEO best practices.
• Then, add a visual skin to the site that is in harmony with your logo
and other branding elements.
En
g.
Tah
er
Gh
aza
l
10
WIX REVIEW - TOP 3 PROS AND CONS
• Professional looking
templates.
• Intuitive Drag & Drop
interface.
• Support and help available
everywhere.
• Visible advertisements on
the free platform.
• Can’t change templates.
• Not designed to manage
complex e-commerce needs
En
g.
Tah
er
Gh
aza
l
11
JIMDO REVIEW - TOP 3 PROS AND CONS
• Strong e-commerce tools for
online stores.
• Large community forum
• Free platform.
• build a very functional website
• Limited number of
professionally designed
templates.
• Jimdo advertisement on the
free platform is quite visible
• Not a true drag-and-drop
user interface.
En
g.
Tah
er
Gh
aza
l
12
DreamWeaver
REVIEW - TOP 10 PROS AND CONS1. Code Highlighting
2. Code Suggestion
3. Code and Design View
4. Code Validation and Accessibility Checks
5. Properties Bar & Insert Images
6. Site Wide Find and Replace
7. File Manager
8. Dreamweaver Templates
9. Tabs and Connected Files
10. New Exciting Things with CS5
• No more browser headaches with
BrowserLab
• Content Management System Support
1. Confusing Interface.
2. Steep Learning Curve.
1. For example you can add your own type of Database using the Testing Server environment but if you are a learner then this will be way over your head.
3. The WYSIWIG lies.
1. Use real browsers.
4. Bulky Dynamic Code.
1. use lean specific code hand written.
5. Badly Written Code Snippets.
1. A big code will be added just to validate one field.
6. Undefined CSS Styling (pre CS4)
7. Not in Full Control of your Code
8. 10% of Full Functionality Actually Useful
1. Others are rarely used
9. Makes for Lazy Web Designers
1. DW is a tool to enhance your coding not make it.
10. Very Expensive
En
g.
Tah
er
Gh
aza
l
13
SharePoint REVIEW Beyond the Beyond
• Be more productive with next-
generation Microsoft Web
technologies.
• Customize SharePoint sites exactly
the way you want.
• Easily make or undo changes
across entire SharePoint sites.
• Maintain control over site
customization.
• Create workflows to automate
business processes.
• Create interactive Web pages
without writing code.
• Integrate business data.
• Develop sites compatible with a
wide range of browsers and Web
standards.
• Build advanced ASP.NET pages.
• Manage and help protect your site.
En
g.
Tah
er
Gh
aza
l
14
En
g.
Tah
er
Gh
aza
l
15
En
g.
Tah
er
Gh
aza
l
16
References:
• http://en.wikipedia.org/
• http://www.thinkingwebdesign.com/
• http://www.moz.com/
• http://www.protoshare.com/
• http://www.lbweb150.com/
• http://www.clickz.com/
• Book: Keyword Intelligence: Keyword Research for Search Social and Beyond By Ron Jones
• http://www.princeton.edu/communications/services/docs/IAguide2.pdf
• http://www.websitebuilderexpert.com/
• http://www.webdesigndev.com/
• http://sharepoint-2010-world.blogspot.ae/2011/02/what-is-sharepoint-2010.html
• http://www.fpweb.net/
• http://www.questpond.com/
En
g.
Tah
er
Gh
aza
l
17