How to make a great website ?

1. How to make a great
WEBSITE
SPEAKER:
ENG. TAHER GHAZAL
BSc Software Engineering (AAU)
MSc Information Technology Management (BUiD)
Microsoft Certified Systems Engineer (MCSE) UOWD

2. 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
Eng.TaherGhazal
2

3. 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.
Eng.TaherGhazal
3

4. 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.
Eng.TaherGhazal
4

5. 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)
Eng.TaherGhazal
5

6. 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
Eng.TaherGhazal
6

7. 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
Eng.TaherGhazal
7

8. 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.
Eng.TaherGhazal
8

9. Eng.TaherGhazal
9

10. 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.
Eng.TaherGhazal
10

11. 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
Eng.TaherGhazal
11

12. 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.
Eng.TaherGhazal
12

13. DreamWeaver
REVIEW - TOP 10 PROS AND CONS
1. 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
Eng.TaherGhazal
13

14. 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.
Eng.TaherGhazal
14

15. Eng.TaherGhazal
15

16. Eng.TaherGhazal
16

17. 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/
Eng.TaherGhazal
17