CS 202 Updated Handouts Of VU

 Simple Web Publishing Tools provide the ability to generate web pages on a workstation
but not the ability to automatically publish those pages to the Internet. An FTP
application is require to copy web pages to online host.

 But a good Web Publishing Tool, also integrate FTP feature and directly publish pages
on your host and keep track of pages updated, to update only those pages to the online
server.

 Support Data Driven Website
 Support XML integration

Some Popular Tools

Let’s review some popular Web Publishing Tools.

 Adobe PageMill

Adobe PageMill is a WYSIWYG Web Publishing Tool that allows you to view your HTML
code as you construct your web page.

 NetObjects Fusion

NetObjects Fusion allows users to visually map out the website structure. It allows global
changes to be made, automatically updates links, and constructs and organizes individual
pages without using HTML or Dynamic HTML coding.

Fusion also allows you to publish your site easily to the web.

 Macromedia Dreamweaver

Macromedia Dreamweaver is both a Web Publishing Tool and HTML editor with WYSWYG
support.

Provides drag-and-drop capabilities and supports Cascading Style Sheet (CSS) standards,
Netscape Layers, and JavaScript.

The Dreamweaver 8 Web Publishing Application supports XML web services. Connections
to data sources can be achieved by pointing a web page to an XML file or to the URL of an
XML feed and then dragging and dropping the appropriate fields onto the page. It provides a
platform and technology-independent development environment that supports PHP, J2EE,
and Microsoft .NET.

184- Web Page Quality Issues

Web Quality

Let’s discuss some points we should consider to keep our website implementation up to Quality.

Fonts

Use appropriate font style, weight and family.

• Do not overuse Bold text.
• Prefer Sans-serif fonts over Serif fonts.
• Prefer using web safe fonts over custom fonts.
• Use font style based on your website niche.

• Handle fonts and its size with CSS.

Colors and Backgrounds

Colors plays vital role in quality of your site.

• Only use dark colors, if you audience is of young age group.
• White background is preferred for corporate websites.
• Dark color text on white is more readable and also looks better.

Browser Compatibility

It is the biggest issue you must be aware of and handle.

• There are many versions of browser.
• Especially always remember to review your site on IE, as mostly IE present the page

differently than other standard browsers.
• Prefer using HTML5
• Consider Using Frameworks like Bootstrap.

Speed

The best time of opening a website is 1 sec but it’s ok to take up to 5 sec.

• You cannot control net speed but you can control the total size of your web page.
• Use CDN (Content Delivery Networks) where possible.
• Optimize Images.
• Avoid using custom fonts
• Test your site Speed using online tools.

SEO Friendly

Search Engine Optimization, in short SEO, plays vital role in online success of your website.

• Keep content easily accessible to users and robots.
• Use Sitemap to define your site structure
• Use Robot.txt file
• Interlink pages
• Define alt and roles with elements, where ever possible.

W3C Validation

Always validate your website with https://validator.w3.org/ and remove all reported issues.

185- Web Usability Issues

What is Web Usability?

Web Usability is the ease of using a website. It includes presentation of information on website, and
making sure it’s easily accessible to both desktop and mobile users.

Availability and Accessibility

Server Uptime: Make sure your site is always accessible over web, when a user tries to access it.
Use Localize Server based on your target market.

Avoid Broken Links

Avoid Broken Links on your website. All links on your website should be working.

Tools you may use:
• https://validator.w3.org/checklink
• http://www.deadlinkchecker.com
• http://www.brokenlinkcheck.com

Responsive Web page

Make sure your website is tested for different sizes along with mobile interactions. You can Use
Chrome -> Dev Tools -> device mode for testing Responsiveness of your web page.

Clarity of Content

Keep it simple, focus on what is important. Do not expect user to find things. Use proper
headings and implement using proper header and paragraph tags. Present key content prominently
and guide users as require to follow and explore your website.

Use Standards and Norms

Use popular standard and norms, like:
• Top menus.
• Standard footer links.
• Implement keys on forms, especially tabs.

Consistency

Keep it consistent. Do not keep on changing style or placement of components on different pages
of your site, keep them consistent. It should be similar with style and color scheme.

User Interactions

Always handle user interactions with care. Indicate success or failure of user interaction with
your site clearly.

Understand your audience

Understand your target audience and what they already know and why they are visiting your
website, then base your website structure on that.

Good usability is not attained overnight. It requires thorough user research and an iterative approach of
constant testing and refining.

186- HCI Considerations

HCI

Human Computer Interaction is the study, planning, and design of what happens when you and a
computer work together.

As its name implies, HCI consists of three parts:

• The user
• The computer (or webpage)
• The ways they work together.

HCI Considerations for Frontend Developer

Building a webpage has no meaning if users are not going to use it. Real people will only use
your website if it’s easy to understand and useable.

Make sure to define all user interaction clearly.
Prominent headings for content on each page; use h1, h2 … tags. Always show clear respond
(success or failure) to all user interactions in your page.

Use norms and standards. Mention Alt and Role attributes where applicable. Always test your site
for Responsive behavior.

187- Search Engine Optimization (SEO)

What is Search engine optimization?

Search engine optimization (SEO) is the process of improving the ranking / visibility of a website in
search engines. SEO is all about two things:

• What is on your site (On Site Optimization)
• How your site is linked / referred from other sites (Offsite Optimization)

Indexing in Search Engines

Web search engines (like Google) automatically add new web sites to their search index as they
crawl the web. A new website needs to wait to get indexed.

Most search engines also invite you to submit your site.
• Google: http://www.google.com/addurl.html
• Yahoo: http://search.yahoo.com/info/submit.html
• Bing: http://www.bing.com/webmaster/SubmitSitePage.aspx

Note: Submitting your site does not guarantee indexing in most cases, but can speed up indexing
process.

Black-hat and White-hat SEO

In simple words anything that is un-natural for your site promotion is considered as Black-hat
SEO technique and vice versa.

SEO Key

Be natural and make sure your site is understandable by users and for robots too.

188- Onsite SEO

The content on your site and the HTML of your web pages are the most accessible and controllable search
engine optimization (SEO) elements. You can win 75% of the SEO war if you can align your onsite
optimization with your target.

On-Page Optimization Checklist

Lets discuss major on-page factors you can control to optimize your website.

 Content is high-quality, relevant, fresh and at least 500 words in length. Content should be
accessible to bots too. Avoid duplicate content.

 Target search phrase is included in page headline and at least one sub-headline [use proper header
h tag]. And repeated three to 10 times within body copy, don’t over-do it. Keep reader in mind;
make sure it is reader-friendly. Page includes relevant images and/or graphics that help illustrate
the target search phrase. Captions for images and/or graphics include the target search phrase.

 Use the target phrase in image alt text embedded in the image tag as alt=”your keyword”
 Content and resources on the page are so good that visitors will want to share your link with

others and post your link elsewhere.
 No misspellings or poor grammar.
 Inclusion of social media links and / or user discussion or reviews is a plus point. Pages with

active visitor interaction are scored higher than static pages.
 If you are optimizing for specific country, state, city or regional names, be sure they are in your

copy and perhaps in page footer.
 Include the target keyword/search phrase in the page URL if possible.
 Title tags: Every page should have an HTML title (enclosed in <title> </title> tags).
 The title copy should be unique, include the target keyword or target phrase, and must be 70

characters or less (any longer, and Google will truncate it anyway).
 Meta description tag: Search engines don’t weigh Meta description in ranking a page, but it is

still very important, it is the marketing copy for your page.
 The Meta description is enclosed in <meta name = “description” content=””> in head tag.
 The Meta description tag should be no longer than 160 characters, and should include your target

phrase.
 Links from content: Use links to other pages on your site, or other resources. Links should be

relevant to your page topic.
 Avoid using too many links. But having few internal links (to other pages on your site) is

positive.
 Internal links also help search engine bots navigate and categorize your site.
 Setup Google Analytics.
 Setup your site on Google Webmaster Tools and Bing Webmaster Tools.
 Create sitemap.xml file
 Create Robots.txt file
 Keep JavaScript and CSS separate.
 Improve site speed.
 Validate your website using W3C Validator. url: https://validator.w3.org

189- Offsite SEO

Important part of Search Engine Optimization, Offsite SEO is about building credibility of your website
over web. Try increasing inbound links to your site and social media influence.

Offsite Checklist

 Measure your inbound links and their value, either using Google Webmaster Tools or using
different tools available. Scan your highest-authority inbound links for opportunity to get other
similar links.

 Scan your competitors’ highest-authority inbound links.
 Question yourself: Can you get those links too, or do they provide ideas for getting similar links?
 Inbound links from non-profit (.org) and education (.edu) sites are especially powerful.
 Build your inbound links gradually in natural order. Google algorithms will notice, and may

penalize a quick accumulation of links.

Where to get inbound links?

 Business partners, clients, vendor’s websites.
 Online press releases through paid press release services.
 Legitimate directories and local/regional web listings (yellow pages).
 Your own site blog and other relevant blogs.
 Thought leadership articles and whitepapers.
 Participating in relevant forums discussion and dropping your link.
 Social Bookmarking.
 Social Media popularity.
 Get reviews from other sites.
 Photo sharing.
 Video promotions.
 Participate in Answering sites.
 Document sharing.
 Infographic sharing.
 Mention your website link in email signature