Handout 1.1 - Introduction to Web Design, Lecture notes of Web Design and Development

Download Handout 1.1 - Introduction to Web Design and more Lecture notes Web Design and Development in PDF only on Docsity! By Kimani Njoroge Page 1 Web Design Introduction A website is a collection of related web pages containing images, videos or other digital assets. A website is hosted on at least one web server, accessible via a network such as the Internet or a private local area network through an Internet address also called Uniform Resource Locator (URL). All publicly accessible websites collectively constitute the World Wide Web. The pages of a website can usually be accessed from a simple Uniform Resource Locator (URL) called the homepage. The URLs of the pages organize them into a hierarchy, although hyper linking between them conveys the reader's perceived site structure and guides the reader's navigation of the site. A Web Page A web page is a document, typically written in plain text interspersed with formatting instructions of Hypertext Markup Language (HTML, XHTML). A web page may incorporate elements from other websites with suitable markup anchors. Web pages are accessed and transported with the Hypertext Transfer Protocol (HTTP), which may optionally employ encryption (HTTP Secure, HTTPS) to provide security and privacy for the user of the web page content. The user's application, often a web browser, renders the page content according to its HTML markup instructions onto a display terminal. Websites are written in, or dynamically converted to, HTML (Hyper Text Markup Language) and are accessed using a software interface classified as a user agent. Web pages can be viewed or otherwise accessed from a range of computer-based and Internet-enabled devices of various sizes, including desktop computers, laptops, PDAs and cell phones. A Web Server A website is hosted on a computer system known as a web server, also called an HTTP server. It retrieves and delivers the web pages in response to requests from the website users. Apache is the most commonly used web server software (according to Netcraft statistics) and Microsoft's Internet Information Server (IIS) is also commonly used. Q.1. Discuss the history of the World Wide Web Types of a Website Organized by function, a website may be • a personal website • a commercial website • a government website • a non-profit organization website • a Social website By Kimani Njoroge Page 2 A Static Website A static website is one that has web pages stored on the server in the format that is sent to a client web browser. It is primarily coded in Hypertext Markup Language (HTML). Simple forms or marketing examples of websites, such as classic website, a five-page website or a brochure website are often static websites, because they present pre-defined, static information to the user. This may include information about a organisation and its products and services via text, photos, animations, audio/video and interactive menus and navigation. This type of website usually displays the same information to all visitors. Similar to handing out a printed brochure to customers or clients, a static website will generally provide consistent, standard information for an extended period of time. Although the website owner may make updates periodically, it is a manual process to edit the text, photos and other content and may require basic website design skills and software. Visitors are not able to control what information they receive via a static website They are edited using four broad categories of software: • Text editors, such as Notepad or TextEdit, where content are manipulated directly within the editor program • WYSIWYG offline editors, such as Microsoft FrontPage and Adobe Dreamweaver (previously Macromedia Dreamweaver), with which the site is edited using a GUI interface and the final HTML markup is generated automatically by the editor software • WYSIWYG online editors which create media rich online presentations like web pages, widgets, intro, blogs, and other documents. • Template-based editors, such as Rapidweaver and iWeb, which allow users to quickly create and upload web pages to a web server without detailed HTML knowledge, as they pick a suitable template from a palette and add pictures and text to it in a desktop publishing fashion without direct manipulation of HTML code. Dynamic website A dynamic website is one that changes or customizes itself frequently and automatically, based on certain criteria. Dynamic websites can have two types of dynamic activity: - Code - Dynamic code is invisible or behind the scenes - Content - dynamic content is visible or fully displayed. Dynamic code The first type is a web page with dynamic code. The code is constructed dynamically on the fly using active programming language instead of plain, static HTML. A website with dynamic code refers to its construction or how it is built, and more specifically refers to the code used to create a single web page. A dynamic web page is generated on the fly by piecing together certain blocks of code, procedures or routines. A dynamically-generated web page would recall By Kimani Njoroge Page 5 Make it "to go". Provide downloadable podcasts, presentations and forms for users who can't stay long, but want to take some of your information with them. Don't neglect your HTML content for the sake of glitz. Search Engines don't have ears, and can't read Flash, JavaScript or even PDFs. c) Functionality Every component of your site should work quickly and correctly. Broken or poorly constructed components will leave your visitors frustrated and disillusioned with your organization. Across the spectrum, everything should work as expected, including hyperlinks, contact forms, site search, event registration, and so on. Error-free copy: Remember the exposure your website will get. Double-check your facts and figures, as you don't know who may be quoting you tomorrow. Nor do you want to be recognized or remembered for typos, incorrect grammar and punctuation, or misspellings. Spelling mistakes and bad grammar are as unforgivable on a website as they are in other organization materials. d) Usability A critical, but often overlooked component of a successful website is its degree of usability. Your site must be easy to read, navigate, and understandable. Some key usability elements include: • Simplicity: The best way to keep visitors glued to your site is through valuable content, good organization and attractive design. Keep your site simple and well organized. • Fast-loading pages: A page should load in 20 seconds or less via dial-up; at more than that, you'll lose more than half of your potential visitors. • Minimal scroll: This is particularly important on the first page. Create links from the main page to read more about a particular topic. Even the Search Engines will reward you for this behaviour. • Consistent layout: Site layout is extremely important for usability. Use a consistent layout and repeat certain elements throughout the site. • Prominent, logical navigation: Place your menu items at the top of your site, or above the fold on either side. Limit your menu items to 10 or fewer. Remember, your visitors are in a hurry -- don't make them hunt for information. • Descriptive link text: Usability testing shows that long link text makes it much easier for visitors to find their way around a site. Long, descriptive link text is favoured by Search Engines, too. Back links are important to give users a sense of direction and to keep them from feeling lost. Use a site map, and breadcrumbs, if necessary. • Cross-platform/browser compatibility: Different browsers often have different rules for displaying content. At a minimum, you should test your site in the latest versions of Internet Explorer (currently, versions 6 and 7), as well as Firefox and Safari. • Screen Resolution: Screen resolution for the typical computer monitor continues to increase. Today, the average web surfer uses a resolution of 1024 x 768 pixels. However, you need to make sure that what looks good at this setting will also work nicely for other resolutions. e) Search Engine Optimized (SEO) There are hundreds of rules and guidelines for effective search engine optimization, and this isn't the place to cover them all. For starters, follow these simple rules: By Kimani Njoroge Page 6 • Include plenty of written content in HTML format. Don't use Flash, JavaScript or image-only objects for your navigational items. • Use important keywords frequently and appropriately. • Minimize the use of tables and use Cascading Style Sheets for layout and positioning; keep your HTML code clutter-free. • Leverage your links -- make them descriptive and use your keywords in the link text References Website. (26 May 2011). Retrieved from http://en.wikipedia.org/wiki/Website Does Your Website Have What It Takes?. (2007). Retrieved from http://www.spritzweb.com/good- website-characteristics.html