17
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

How to make a great website

Embed Size (px)

DESCRIPTION

How to make a great website ?

Citation preview

Page 1: How to make a great website

How to make a great

WEBSITESPEAKER:

ENG. TAHER GHAZAL

BSc Software Engineering (AAU)MSc Information Technology Management (BUiD)Microsoft Certified Systems Engineer (MCSE) UOWD

Page 2: How to make a great website

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

Page 3: How to make a great website

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

Page 4: How to make a great website

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

Page 5: How to make a great website

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

Page 6: How to make a great website

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

Page 7: How to make a great website

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

Page 8: How to make a great website

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

Page 9: How to make a great website

En

g.

Tah

er

Gh

aza

l

9

Page 10: How to make a great website

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

Page 11: How to make a great website

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

Page 12: How to make a great website

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

Page 13: How to make a great website

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

Page 14: How to make a great website

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

Page 15: How to make a great website

En

g.

Tah

er

Gh

aza

l

15

Page 16: How to make a great website

En

g.

Tah

er

Gh

aza

l

16

Page 17: How to make a great website

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