Shopping on line can be easy, simple and save you lots of money. It can also take a lot of your time, frustrate you, and result in unwanted purchases. Now the same can be said for regular high street shopping, but with the vast opportunity presented by the Internet it will pay you to spend a few minutes reading this and understanding how to better optimize your Web Design shopping experience:
1. Compare - without doubt the biggest advantage that the Web Design offers shoppers today is the ability to compare thousands of Web Design at a time. This is a great thing, but not necessarily all the time! Too much can be daunting at times so take advantage of the great comparison sites and where possible let them do the hard work for you.
2. Research - if it has been said it will be on the internet. Ignorance is no longer a justifiable reason for buying the wrong thing. Take the time to research in detail everything that you could possible want to know about
3. Testimonials - don't know anybody that has bought a Web Design? Wrong! If the Web Design is good the internet will let you know. Use the Internet as a friend and get testimonials before you buy.
4. Questions - Got a question about Web Design then search the Forums, FAQ's, Blogs etc. Don't be afraid to ask .....
5. Reputation - Never heard of the company selling Web Design? Don't worry, no reason why you should know every company in the world, but you know someone that does! Use the internet to find out what people are saying about Web Design and build up a picture of their reputation for sales, returns, customer service, delivery etc.
6. Returns - still worried that even after all of the above your Web Design wont be what you want? Check out the returns policy. There is so much competition now that someone, somewhere is bound to offer the terms that you are comfortable with.
7. Feedback - happy with your Web Design then let people know, after all you are depending on others people input in your buying decision, so why not give a little back.
8. Security - check for the yellow padlock on the Web Design site before you buy, and the s after http:/ /i.e. https:// = a secure site
9. Contact - got a question about Web Design, or want to leave a comment then check out the sites contact page. Reputable companies have them and respond.
10. Payment - ready to pay for your Web Design, then use your credit card or PayPal! Be aware of companies that don't accept them, there may be genuine reasons but given the huge amount of choice you have when buying online there is no reason at all not to buy via credit card or PayPal.
Web design is a process of conceptualization, planning, modeling, and execution of
electronic media content (media and publishing) delivery via Internet in the form of Markup language suitable for interpretation by
Web browser and display as
Graphical user interface (GUI).
The intent of web design is to create a
web site -- a collection of electronic files that reside on a
web server/servers and present content and interactive features/interfaces to the end user in form of Web page once requested. Such elements as text, bit-mapped Image file formats (
Graphics Interchange Formats, JPEGs, PNGs),
Form (web) can be placed on the page using HTML/
XHTML/XML tags. Displaying more complex media (
vector graphics, animations, videos, sounds) requires Plugin such as Adobe Flash, QuickTime, Java (Sun), etc. Plug-ins are also embedded into web page by using HTML/XHTML tags.
Improvements in browsers' compliance with
World Wide Web Consortium standards prompted a widespread acceptance and usage of XHTML/XML in conjunction with
Cascading Style Sheets (CSS) to position and manipulate web page elements and objects. Latest standards and proposals aim at leading to browsers' ability to deliver a wide variety of media and accessibility options to the client possibly without employing plug-ins.
Typically web pages are classified as
static or
dynamic.
Static web page don’t change content and layout with every
Hypertext Transfer Protocol unless a human (web master/
programmer) manually updates the page.
Dynamic web page adapt their content and/or appearance depending on end-user’s input/interaction or changes in the computing environment (user, time,
database modifications, etc.) Content can be changed on the client side (end-user's computer) by using client-side scripting languages (
JavaScript, JScript, Actionscript, etc.) to alter Document Object Model elements (
DHTML). Dynamic content is often compiled on the server utilizing server-side scripting languages (Perl,
PHP, ASP,
JSP, ColdFusion, etc.). Both approaches are usually used in complex applications.
With growing specialization in the information technology field there is a strong tendency to draw a clear line between web design and web development.
History
Tim Berners-Lee, the
inventor of the World Wide Web, published a website in August 1991.http://news.bbc.co.uk/1/hi/technology/4132752.stm Berners-Lee was the first to combine
Internet communication (which had been carrying E-mail and the
Usenet for decades) with hypertext (which had also been around for decades, but limited to browsing information stored on a single computer, such as interactive
CD-ROM design).
Websites are written in a
markup language called
HTML, and early versions of HTML were very basic, only giving websites basic structure (headings and paragraphs), and the ability to link using
hypertext. This was new and different to existing forms of communication - users could easily navigate to other pages by following
hyperlinks from page to page.
As the Web and web design progressed, the markup language changed to become more complex and flexible, giving the ability to add objects like images and tables to a page. Features like tables, which were originally intended to be used to display tabular information, were soon subverted for use as invisible layout devices. With the advent of Cascading Style Sheets (CSS), table-based layout is increasingly regarded as outdated. Database integration technologies such as
server-side scripting and design standards like CSS further changed and enhanced the way the Web is made.
Web site design
A
Web site is a collection of information about a particular topic or subject. Designing a website is defined as the arrangement and creation of Web pages that in turn make up a website. A Web page consists of information for which the Web site is developed. A website might be compared to a book, where each page of the book is a web page.
There are many aspects (
design concerns) in this process, and due to the rapid development of the Internet, new aspects may emerge. For typical commercial Web sites, the basic aspects of design are:
- The content: The substance, and information on the site should be relevant to the site and should target the area of the public that the website is concerned with.
- The usability: The site should be user-friendly, with the interface and navigation simple and reliable.
- The appearance: The graphics and text should include a single style that flows throughout, to show consistency. The style should be professional, appealing and relevant.
- The visibility: The site must also be easy to find via most, if not all, major search engines and advertisement media.
A Web site typically consists of text and images. The first page of a website is known as the
Home page or Index. Some websites use what is commonly called a Splash Page. Splash pages might include a welcome message, language/region selection, or disclaimer. Each web page within a Web site is an HTML file which has its own URL. After each Web page is created, they are typically linked together using a navigation menu composed of
hyperlinks. Faster browsing speeds have led to shorter attention spans and more demanding online visitors and this has resulted in less use of Splash Pages, particularly where commercial websites are concerned.
Once a Web site is completed, it must be published or uploaded in order to be viewable to the public over the
internet. This may be done using an FTP client. Once published, the
Web master may use a variety of techniques to increase the traffic, or hits, that the website receives. This may include submitting the Web site to a search engine such as
Google or Yahoo, exchanging links with other Web sites, creating affiliations with similar Web sites, etc.
Multidisciplinary requirements
Web site design crosses
Interdisciplinarity of information systems, information technology and communication design. The website is an
information system whose components are sometimes classified as
front-end and back-end. The observable
web content (e.g page layout, user interface,
graphics,
writing,
audio) is known as the front-end. The back-end comprises the organization and efficiency of the source code, invisible scripted functions, and the server-side components that process the output from the front-end. Depending on the size of a Web development project, it may be carried out by a multi-skilled individual (sometimes called a web master), or a project manager may oversee collaborative design between group members with specialized skills.
Issues
As in most collaborative designs, there are conflicts between differing goals and methods of web site designs. These are a few of the ongoing ones.
Lack of collaboration in design
In the early stages of the web, there wasn't as much collaboration between web designs and larger advertising campaigns,
commerces,
social networking, intranets and extranets as there is now. Web pages were mainly static online
brochures disconnected from the larger projects.
Many web pages are still disconnected from larger projects. Special design considerations are necessary for use within these larger projects. These design considerations are often overlooked, especially in cases where there is a lack of
leadership, understanding or concern for the larger project to facilitate
collaboration. This often results in unhealthy
competition or compromise between departments, and less than optimal use of web pages.
Liquid versus fixed layouts
On the web the designer has no control over several factors, including the size of the browser window, the web browser used, the input devices used (mouse,
touch screen,
voice command,
text, cell phone number pad, etc.) and the size and characteristics of available fonts.
Some designers choose to control the appearance of the elements on the screen by using specific width designations. This control may be achieved through the use of a
HTML table-based design, or through the use of CSS. Whenever the text, images, and layout of a design do not change as the browser changes, this is referred to as a
fixed width design. Proponents of fixed width design prefer the control over the look and feel of the site and the precision placement of objects on the page. Other designers choose a liquid design. A liquid design is one, like
Wikipedia, where the design moves to flow content into the whole screen, or a portion of the screen, no matter what the size of the browser window. Proponents of
liquid design prefer to use all the screen space available. Liquid design can be achieved through the use of CSS, by avoiding styling the page altogether, or by using HTML tables set to a percentage of the page. Both liquid and fixed design developers must make decisions about how the design should
degrade on higher and lower screen resolutions. Sometimes the
pragmatic choice is made to flow the design between a minimum and a maximum width. This allows the designer to avoid coding for the browser choices making up the long tail, while still using all available screen space.
Similar to liquid layout is the optional
fit to window feature with Adobe Flash content. This is a fixed layout that optimally scales the content of the page without changing the arrangement or text wrapping when the browser is resized.
Flash
Adobe Flash (formerly
Macromedia Flash) is a proprietary, robust graphics animation/application development program used to create and deliver dynamic content, media (such as sound and video), and interactive applications over the web via the browser.
Flash is not a standard produced by a vendor-neutral standards organization like most of the core protocols and formats on the Internet. Flash is much more restrictive than the
Open format HTML format, though, requiring a
Proprietary software plugin to be seen, and it does not integrate with most
web browser UI features like the "Back" button unless a hyperlink is programmed to link a new html page from the Flash file, in which case the animation of the previous page would reset. However, those restrictions may be irrelevant depending on the goals of the web site design.
According to a study http://www.macromedia.com/software/player_census/npd/ study, 98% of US Web users have the Flash Player installed http://www.macromedia.com/software/player_census/flashplayer/, with 45%-56%http://www.macromedia.com/software/player_census/flashplayer/version_penetration.html (depending on region) having the latest version. Numbers vary depending on the detection scheme and research demographicshttp://www.greatinteractions.com/stats.htm.
Many graphic artists use Flash because it gives them exact control over every part of the design, and anything can be animated and generally "jazzed up". Some application designers enjoy Flash because it lets them create applications that don't have to be refreshed or go to a new web page every time an action occurs. Flash can use embedded fonts instead of the standard fonts installed on most computers. There are many sites which forgo HTML entirely for Flash. Other sites may use Flash content combined with HTML as conservatively as gifs or jpegs would be used, but with smaller vector file sizes and the option of faster loading animations. Flash may also be used to protect content from unauthorized duplication or searching.
Flash detractors claim that Flash websites tend to be poorly designed, and often use confusing and non-standard user-interfaces. Up until recently, search engines have been unable to index Flash objects, which has prevented sites from having their contents easily found. This is because many search engine crawlers rely on text to index websites. It is possible to specify alternate content to be displayed for browsers that do not support Flash. Using alternate content also helps search engines to understand the page, and can result in much better visibility for the page. However, the vast majority of Flash websites are not disability accessible (for screen readers, for example) or Section 508 compliant. An additional issue is that sites which commonly use alternate content for search engines to their human visitors are usually judged to be spamming search engines and are automatically banned.
The most recent incarnation of Flash's scripting language (called "ActionScript", which is an ECMA language similar to JavaScript) incorporates long-awaited usability features, such as respecting the browser's font size and allowing blind users to use
screen readers. Actionscript 2.0 is an Object-oriented programming language, allowing the use of CSS, XML, and the design of class-based web applications.
CSS versus tables
Back when Netscape Navigator 4 dominated the browser market, the popular solution available for designers to lay out a Web page was by using tables. Often even simple designs for a page would require dozens of tables nested in each other. Many web templates in Adobe Dreamweaver and other
WYSIWYG editors still use this technique today. Navigator 4 didn't support
Cascading Style Sheets to a useful degree, so it simply wasn't used.
After the
browser wars subsided, and the dominant browsers such as
Internet Explorer became more W3C compliant, designers started turning toward CSS as an alternate means of laying out their pages. CSS proponents say that tables should be used only for tabular data, not for layout. Using CSS instead of tables also returns HTML to a semantic markup, which helps bots and search engines understand what's going on in a web page. All modern Web browsers support CSS with different degrees of
Comparison of layout engines (CSS).
However, one of the main points against CSS is that by relying on it exclusively, control is essentially relinquished as each browser has its own quirks which result in a slightly different page display. This is especially a problem as not every browser supports the same subset of CSS rules. For designers who are used to table-based layouts, developing Web sites in CSS often becomes a matter of trying to replicate what can be done with tables, leading some to find CSS design rather cumbersome due to lack of familiarity. For example, at one time it was rather difficult to produce certain design elements, such as vertical positioning, and full-length footers in a design using absolute positions. With the abundance of CSS resources available online today, though, designing with reasonable adherence to standards involves little more than applying CSS 2.1 or CSS 3 to properly structured markup.
These days most modern browsers have solved most of these quirks in CSS rendering and this has made many different CSS layouts possible. However, some people continue to use old browsers, and designers need to keep this in mind, and allow for graceful degrading of pages in older browsers. Most notable among these old browsers are Internet Explorer 5 and 5.5, which, according to some web designers, are becoming the new Netscape Navigator 4 — a block that holds the World Wide Web back from converting to CSS design. However, the W3 Consortium has made CSS in combination with XHTML the standard for web design.
How it Looks vs. How it Works
Some
web developers have a graphic arts background and may pay more attention to how a page looks than considering other issues such as how visitors are going to find the page via a search engine. Some might rely more on
advertising than search engines to attract visitors to the site. On the other side of the issue, search engine optimization
consultants (SEOs) obsess about how well a web site works technically and textually: how much traffic it generates via search engines, and how many sales it makes, assuming looks don't contribute to the sales. As a result, the designers and SEOs often end up in disputes where the designer wants more 'pretty' graphics, and the SEO wants lots of 'ugly' keyword (internet search)-rich text, bullet lists, and
text links. One could argue that this is a false dichotomy due to the possibility that a web design may integrate the two disciplines for a collaborative and synergy solution. Because some graphics serve communication purposes in addition to
aesthetics, how well a site works may depend on the graphic designer's visual communication ideas as well as the SEO considerations.
Another problem when using lots of graphics on a page is that download times can be greatly lengthened, often irritating the user. This has become less of a problem as the internet has evolved with
high-speed internet and the use of
vector graphics. This is an engineering challenge to increase bandwidth in addition to an artistic challenge to minimize graphics and graphic file sizes. This is an on-going challenge as increased bandwidth invites increased amounts of content.
Accessible Web design
Accessible Web design is the art of creating webpages that are accessible to everyone, using any device. It is especially important so that people with
disabilities - whether due to accident, disease or old age - can access the information in Web pages and be able to navigate through the website.
To be accessible, web pages and sites must conform to certain accessibility principles. These can be grouped into the following main areas:
- use semantic markup that provides a meaningful structure to the document (i.e. web page)
- Semantic markup also refers to semantically organizing the web page structure and publishing web services description accordingly so that they can be recognized by other web services on different web pages. Standards for semantic web are set by IEEE
- use a valid markup language that conforms to a published Document Type Definition or XML schema
- provide text equivalents for any non-text components (e.g. images, multimedia)
- use hyperlinks that make sense when read out of context. (e.g. avoid "Click Here.")
- don't use Framing (World Wide Web)
- use Cascading Style Sheets Tableless web design for layout.
- author the page so that when the source code is read line-by-line by user agents (such as a screen readers) it remains intelligible. (Using tables for design will often result in information that is not.)
However, W3C permits an exception where tables for layout either make sense when linearized or an alternate version (perhaps linearized) is made available.
Website Planning
Before creating and uploading a website, it is important to take the time to plan exactly what is needed in the website. Thoroughly considering the audience or target market, as well as defining the purpose and deciding what content will be developed are extremely important.
Purpose
It is essential to define the purpose of the website as one of the first steps in the planning process. A purpose statement should show focus based on what the website will accomplish and what the users will get from it. A clearly defined purpose will help the rest of the planning process as the audience is identified and the content of the site is developed. Setting short and long term goals for the website will help make the purpose clear and plan for the future when expansion, modification, and improvement will take place. Also, goal-setting practices and measurable objectives should be identified to track the progress of the site and determine success.
Audience
Defining the audience is a key step in the website planning process. The audience is the group of people who are expected to visit your website – the market being targeted. These people will be viewing the website for a specific reason and it is important to know exactly what they are looking for when they visit the site. A clearly defined purpose or goal of the site as well as an understanding of what visitors want to do/feel when they come to your site will help to identify the target audience. Upon considering who is most likely to need/use the content, a list of characteristics common to the users such as:
- Audience Characteristics
- Information Preferences
- Computer Specifications
- Web Experience
Taking into account the characteristics of the audience will allow an effective website to be created that will deliver the desired content to the target audience.
Content
Content evaluation and organization requires that the purpose of the website be clearly defined. Collecting a list of the necessary content then organizing it according to the audience's needs is a key step in website planning. In the process of gathering the content being offered, any items that do not support the defined purpose or accomplish target audience objectives should be removed. It is a good idea to test the content and purpose on a focus group and compare the offerings to the audience needs. The next step is to organize the basic information structure by categorizing the content and organizing it according to user needs. Each category should be named with a concise and descriptive title that will become a link on the website. Planning for the site's content ensures that the wants/needs of the target audience and the purpose of the site will be fulfilled.
Compatibility and restrictions
Because of the Usage share of web browsers (depending on your target market), the compatibility of your website with the viewers is restricted. For instance, a website that is designed for the majority of websurfers will be limited to the use of
W3C Markup Validation Service XHTML 1.0 Strict or older, Cascading Style Sheets Level 1, and 1024x768
display resolution. This is because Internet Explorer is not fully W3C
Web standards with the modularity of XHTML 1.1 and the majority of CSS beyond 1. A target market of more alternative browser (e.g.
Firefox and Opera (Internet suite)) users allow for more W3C compliance and thus a greater range of options for a web designer.
Another restriction on webpage design is the use of different
Image file formats. The majority of users can support Graphics Interchange Format,
JPEG, and PNG (with restrictions). Again Internet Explorer is the major restriction here, not fully supporting PNG's advanced transparency features, resulting in the GIF format still being the most widely used graphic file format for transparent images.
Many website incompatibilities go unnoticed by the designer and unreported by the users. The only way to be certain a website will work on a particular platform is to test it on that platform.
Planning documentation
Documentation is used to visually plan the site while taking into account the purpose, audience and content, to design the site structure, content and interactions that are most suitable for the website. Documentation may be considered a prototype for the website – a model which allows the website layout to be reviewed, resulting in suggested changes, improvements and/or enhancements. This review process increases the likelihood of success of the website.
First, the content is categorized and the information structure is formulated. The information structure is used to develop a document or visual diagram called a
site map. This creates a visual of how the web pages will be interconnected, which helps in deciding what content will be placed on what pages. There are three main ways of diagramming the website structure:
- Linear Website Diagrams will allow the users to move in a predetermined sequence;
- Hierarchical structures (of Tree Design Website Diagrams) provide more than one path for users to take to their destination;
- Branch Design Website Diagrams allow for many interconnections between web pages such as hyperlinks within sentences.
In addition to planning the structure, the layout and interface of individual pages may be planned using a storyboard. In the process of storyboarding, a record is made of the description, purpose and title of each page in the site, and they are linked together according to the most effective and logical diagram type. Depending on the number of pages required for the website, documentation methods may include using pieces of paper and drawing lines to connect them, or creating the storyboard using computer software.
Some or all of the individual pages may be designed in greater detail as a website wireframe, a mock up model or comprehensive layout of what the page will actually look like. This is often done in a graphic program, or layout design program. The wireframe has no working functionality, only planning.
See also
References
External links
- W3C - World Wide Web Consortium
- Adobe Labs - Adobe AIR
Web design is a process of conceptualization, planning, modeling, and execution of electronic media
content (media and publishing) delivery via
Internet in the form of Markup language suitable for interpretation by
Web browser and display as
Graphical user interface (GUI).
The intent of web design is to create a web site -- a collection of electronic files that reside on a web server/servers and present content and interactive features/interfaces to the end user in form of Web page once requested. Such elements as text, bit-mapped Image file formats (
Graphics Interchange Formats, JPEGs, PNGs),
Form (web) can be placed on the page using HTML/
XHTML/XML tags. Displaying more complex media (vector graphics, animations, videos, sounds) requires Plugin such as Adobe Flash, QuickTime, Java (Sun), etc. Plug-ins are also embedded into web page by using HTML/XHTML tags.
Improvements in browsers' compliance with
World Wide Web Consortium standards prompted a widespread acceptance and usage of XHTML/XML in conjunction with
Cascading Style Sheets (CSS) to position and manipulate web page elements and objects. Latest standards and proposals aim at leading to browsers' ability to deliver a wide variety of media and accessibility options to the client possibly without employing plug-ins.
Typically web pages are classified as
static or
dynamic.
Static web page don’t change content and layout with every
Hypertext Transfer Protocol unless a human (web master/
programmer) manually updates the page.
Dynamic web page adapt their content and/or appearance depending on end-user’s input/interaction or changes in the computing environment (user, time, database modifications, etc.) Content can be changed on the client side (end-user's computer) by using client-side scripting languages (JavaScript,
JScript, Actionscript, etc.) to alter
Document Object Model elements (DHTML). Dynamic content is often compiled on the server utilizing server-side scripting languages (
Perl, PHP,
ASP, JSP, ColdFusion, etc.). Both approaches are usually used in complex applications.
With growing specialization in the information technology field there is a strong tendency to draw a clear line between web design and
web development.
History
Tim Berners-Lee, the
inventor of the
World Wide Web, published a website in August 1991.http://news.bbc.co.uk/1/hi/technology/4132752.stm Berners-Lee was the first to combine
Internet communication (which had been carrying E-mail and the Usenet for decades) with
hypertext (which had also been around for decades, but limited to browsing information stored on a single computer, such as interactive CD-ROM design).
Websites are written in a markup language called HTML, and early versions of HTML were very basic, only giving websites basic structure (headings and paragraphs), and the ability to link using
hypertext. This was new and different to existing forms of communication - users could easily navigate to other pages by following hyperlinks from page to page.
As the Web and web design progressed, the markup language changed to become more complex and flexible, giving the ability to add objects like images and tables to a page. Features like tables, which were originally intended to be used to display tabular information, were soon subverted for use as invisible layout devices. With the advent of
Cascading Style Sheets (CSS), table-based layout is increasingly regarded as outdated. Database integration technologies such as server-side scripting and design standards like CSS further changed and enhanced the way the Web is made.
Web site design
A
Web site is a collection of information about a particular topic or subject. Designing a website is defined as the arrangement and creation of Web pages that in turn make up a website. A Web page consists of information for which the Web site is developed. A website might be compared to a book, where each page of the book is a web page.
There are many aspects (design concerns) in this process, and due to the rapid development of the Internet, new aspects may emerge. For typical commercial Web sites, the basic aspects of design are:
- The content: The substance, and information on the site should be relevant to the site and should target the area of the public that the website is concerned with.
- The usability: The site should be user-friendly, with the interface and navigation simple and reliable.
- The appearance: The graphics and text should include a single style that flows throughout, to show consistency. The style should be professional, appealing and relevant.
- The visibility: The site must also be easy to find via most, if not all, major search engines and advertisement media.
A Web site typically consists of text and
images. The first page of a website is known as the Home page or Index. Some websites use what is commonly called a Splash Page. Splash pages might include a welcome message, language/region selection, or disclaimer. Each web page within a Web site is an
HTML file which has its own URL. After each Web page is created, they are typically linked together using a navigation menu composed of hyperlinks. Faster browsing speeds have led to shorter attention spans and more demanding online visitors and this has resulted in less use of Splash Pages, particularly where commercial websites are concerned.
Once a Web site is completed, it must be published or uploaded in order to be viewable to the public over the
internet. This may be done using an FTP client. Once published, the
Web master may use a variety of techniques to increase the traffic, or hits, that the website receives. This may include submitting the Web site to a search engine such as Google or
Yahoo, exchanging links with other Web sites, creating affiliations with similar Web sites, etc.
Multidisciplinary requirements
Web site design crosses
Interdisciplinarity of information systems, information technology and
communication design. The website is an information system whose components are sometimes classified as
front-end and back-end. The observable web content (e.g
page layout, user interface,
graphics, writing, audio) is known as the front-end. The back-end comprises the organization and efficiency of the source code, invisible scripted functions, and the server-side components that process the output from the front-end. Depending on the size of a Web development project, it may be carried out by a multi-skilled individual (sometimes called a web master), or a
project manager may oversee collaborative design between group members with specialized skills.
Issues
As in most collaborative designs, there are conflicts between differing goals and methods of web site designs. These are a few of the ongoing ones.
Lack of collaboration in design
In the early stages of the web, there wasn't as much collaboration between web designs and larger
advertising campaigns,
commerces,
social networking, intranets and
extranets as there is now. Web pages were mainly static
online brochures disconnected from the larger projects.
Many web pages are still disconnected from larger projects. Special design considerations are necessary for use within these larger projects. These design considerations are often overlooked, especially in cases where there is a lack of
leadership, understanding or concern for the larger project to facilitate
collaboration. This often results in unhealthy
competition or compromise between departments, and less than optimal use of web pages.
Liquid versus fixed layouts
On the web the designer has no control over several factors, including the size of the browser window, the web browser used, the input devices used (mouse, touch screen,
voice command, text, cell phone number pad, etc.) and the size and characteristics of available fonts.
Some designers choose to control the appearance of the elements on the screen by using specific width designations. This control may be achieved through the use of a
HTML table-based design, or through the use of CSS. Whenever the text, images, and layout of a design do not change as the browser changes, this is referred to as a
fixed width design. Proponents of fixed width design prefer the control over the look and feel of the site and the precision placement of objects on the page. Other designers choose a liquid design. A liquid design is one, like
Wikipedia, where the design moves to flow content into the whole screen, or a portion of the screen, no matter what the size of the browser window. Proponents of
liquid design prefer to use all the screen space available. Liquid design can be achieved through the use of CSS, by avoiding styling the page altogether, or by using HTML tables set to a percentage of the page. Both liquid and fixed design developers must make decisions about how the design should degrade on higher and lower screen resolutions. Sometimes the pragmatic choice is made to flow the design between a minimum and a maximum width. This allows the designer to avoid coding for the browser choices making up the
long tail, while still using all available screen space.
Similar to liquid layout is the optional
fit to window feature with Adobe Flash content. This is a fixed layout that optimally scales the content of the page without changing the arrangement or text wrapping when the browser is resized.
Flash
Adobe Flash (formerly
Macromedia Flash) is a proprietary, robust graphics animation/application development program used to create and deliver dynamic content, media (such as sound and video), and interactive applications over the web via the browser.
Flash is not a standard produced by a vendor-neutral standards organization like most of the core protocols and formats on the Internet. Flash is much more restrictive than the Open format HTML format, though, requiring a Proprietary software plugin to be seen, and it does not integrate with most
web browser UI features like the "Back" button unless a hyperlink is programmed to link a new html page from the Flash file, in which case the animation of the previous page would reset. However, those restrictions may be irrelevant depending on the goals of the web site design.
According to a study http://www.macromedia.com/software/player_census/npd/ study, 98% of US Web users have the Flash Player installed http://www.macromedia.com/software/player_census/flashplayer/, with 45%-56%http://www.macromedia.com/software/player_census/flashplayer/version_penetration.html (depending on region) having the latest version. Numbers vary depending on the detection scheme and research demographicshttp://www.greatinteractions.com/stats.htm.
Many graphic artists use Flash because it gives them exact control over every part of the design, and anything can be animated and generally "jazzed up". Some application designers enjoy Flash because it lets them create applications that don't have to be refreshed or go to a new web page every time an action occurs. Flash can use embedded fonts instead of the standard fonts installed on most computers. There are many sites which forgo HTML entirely for Flash. Other sites may use Flash content combined with HTML as conservatively as gifs or jpegs would be used, but with smaller vector file sizes and the option of faster loading animations. Flash may also be used to protect content from unauthorized duplication or searching.
Flash detractors claim that Flash websites tend to be poorly designed, and often use confusing and non-standard user-interfaces. Up until recently, search engines have been unable to index Flash objects, which has prevented sites from having their contents easily found. This is because many search engine crawlers rely on text to index websites. It is possible to specify alternate content to be displayed for browsers that do not support Flash. Using alternate content also helps
search engines to understand the page, and can result in much better visibility for the page. However, the vast majority of Flash websites are not disability accessible (for screen readers, for example) or
Section 508 compliant. An additional issue is that sites which commonly use alternate content for search engines to their human visitors are usually judged to be spamming search engines and are automatically banned.
The most recent incarnation of Flash's scripting language (called "ActionScript", which is an
ECMA language similar to JavaScript) incorporates long-awaited usability features, such as respecting the browser's font size and allowing blind users to use
screen readers. Actionscript 2.0 is an
Object-oriented programming language, allowing the use of CSS, XML, and the design of class-based web applications.
CSS versus tables
Back when
Netscape Navigator 4 dominated the browser market, the popular solution available for designers to lay out a Web page was by using tables. Often even simple designs for a page would require dozens of tables nested in each other. Many web templates in
Adobe Dreamweaver and other
WYSIWYG editors still use this technique today. Navigator 4 didn't support
Cascading Style Sheets to a useful degree, so it simply wasn't used.
After the browser wars subsided, and the dominant browsers such as
Internet Explorer became more W3C compliant, designers started turning toward CSS as an alternate means of laying out their pages. CSS proponents say that tables should be used only for tabular data, not for layout. Using CSS instead of tables also returns HTML to a semantic markup, which helps
bots and search engines understand what's going on in a web page. All modern
Web browsers support CSS with different degrees of Comparison of layout engines (CSS).
However, one of the main points against CSS is that by relying on it exclusively, control is essentially relinquished as each browser has its own quirks which result in a slightly different page display. This is especially a problem as not every browser supports the same subset of CSS rules. For designers who are used to table-based layouts, developing Web sites in CSS often becomes a matter of trying to replicate what can be done with tables, leading some to find CSS design rather cumbersome due to lack of familiarity. For example, at one time it was rather difficult to produce certain design elements, such as vertical positioning, and full-length footers in a design using absolute positions. With the abundance of CSS resources available online today, though, designing with reasonable adherence to standards involves little more than applying CSS 2.1 or CSS 3 to properly structured markup.
These days most modern browsers have solved most of these quirks in CSS rendering and this has made many different CSS layouts possible. However, some people continue to use old browsers, and designers need to keep this in mind, and allow for graceful degrading of pages in older browsers. Most notable among these old browsers are Internet Explorer 5 and 5.5, which, according to some web designers, are becoming the new Netscape Navigator 4 — a block that holds the World Wide Web back from converting to CSS design. However, the W3 Consortium has made CSS in combination with XHTML the standard for web design.
How it Looks vs. How it Works
Some
web developers have a graphic arts background and may pay more attention to how a page looks than considering other issues such as how visitors are going to find the page via a search engine. Some might rely more on advertising than search engines to attract visitors to the site. On the other side of the issue,
search engine optimization consultants (SEOs) obsess about how well a web site works technically and textually: how much traffic it generates via search engines, and how many sales it makes, assuming looks don't contribute to the sales. As a result, the designers and SEOs often end up in disputes where the designer wants more 'pretty' graphics, and the SEO wants lots of 'ugly' keyword (internet search)-rich text,
bullet lists, and text links. One could argue that this is a false dichotomy due to the possibility that a web design may integrate the two disciplines for a collaborative and
synergy solution. Because some graphics serve communication purposes in addition to aesthetics, how well a site works may depend on the
graphic designer's
visual communication ideas as well as the SEO considerations.
Another problem when using lots of graphics on a page is that download times can be greatly lengthened, often irritating the user. This has become less of a problem as the internet has evolved with high-speed internet and the use of vector graphics. This is an engineering challenge to increase bandwidth in addition to an artistic challenge to minimize graphics and graphic file sizes. This is an on-going challenge as increased bandwidth invites increased amounts of content.
Accessible Web design
Accessible Web design is the art of creating webpages that are accessible to everyone, using any device. It is especially important so that people with disabilities - whether due to accident, disease or old age - can access the information in Web pages and be able to navigate through the website.
To be accessible, web pages and sites must conform to certain accessibility principles. These can be grouped into the following main areas:
- use semantic markup that provides a meaningful structure to the document (i.e. web page)
- Semantic markup also refers to semantically organizing the web page structure and publishing web services description accordingly so that they can be recognized by other web services on different web pages. Standards for semantic web are set by IEEE
- use a valid markup language that conforms to a published Document Type Definition or XML schema
- provide text equivalents for any non-text components (e.g. images, multimedia)
- use hyperlinks that make sense when read out of context. (e.g. avoid "Click Here.")
- don't use Framing (World Wide Web)
- use Cascading Style Sheets Tableless web design for layout.
- author the page so that when the source code is read line-by-line by user agents (such as a screen readers) it remains intelligible. (Using tables for design will often result in information that is not.)
However, W3C permits an exception where tables for layout either make sense when linearized or an alternate version (perhaps linearized) is made available.
Website Planning
Before creating and uploading a website, it is important to take the time to plan exactly what is needed in the website. Thoroughly considering the audience or target market, as well as defining the purpose and deciding what content will be developed are extremely important.
Purpose
It is essential to define the purpose of the website as one of the first steps in the planning process. A purpose statement should show focus based on what the website will accomplish and what the users will get from it. A clearly defined purpose will help the rest of the planning process as the audience is identified and the content of the site is developed. Setting short and long term goals for the website will help make the purpose clear and plan for the future when expansion, modification, and improvement will take place. Also, goal-setting practices and measurable objectives should be identified to track the progress of the site and determine success.
Audience
Defining the audience is a key step in the website planning process. The audience is the group of people who are expected to visit your website – the market being targeted. These people will be viewing the website for a specific reason and it is important to know exactly what they are looking for when they visit the site. A clearly defined purpose or goal of the site as well as an understanding of what visitors want to do/feel when they come to your site will help to identify the target audience. Upon considering who is most likely to need/use the content, a list of characteristics common to the users such as:
- Audience Characteristics
- Information Preferences
- Computer Specifications
- Web Experience
Taking into account the characteristics of the audience will allow an effective website to be created that will deliver the desired content to the target audience.
Content
Content evaluation and organization requires that the purpose of the website be clearly defined. Collecting a list of the necessary content then organizing it according to the audience's needs is a key step in website planning. In the process of gathering the content being offered, any items that do not support the defined purpose or accomplish target audience objectives should be removed. It is a good idea to test the content and purpose on a focus group and compare the offerings to the audience needs. The next step is to organize the basic information structure by categorizing the content and organizing it according to user needs. Each category should be named with a concise and descriptive title that will become a link on the website. Planning for the site's content ensures that the wants/needs of the target audience and the purpose of the site will be fulfilled.
Compatibility and restrictions
Because of the
Usage share of web browsers (depending on your target market), the compatibility of your website with the viewers is restricted. For instance, a website that is designed for the majority of websurfers will be limited to the use of W3C Markup Validation Service
XHTML 1.0 Strict or older, Cascading Style Sheets Level 1, and 1024x768
display resolution. This is because Internet Explorer is not fully W3C Web standards with the
modularity of XHTML 1.1 and the majority of CSS beyond 1. A target market of more alternative browser (e.g.
Firefox and Opera (Internet suite)) users allow for more W3C compliance and thus a greater range of options for a web designer.
Another restriction on webpage design is the use of different
Image file formats. The majority of users can support
Graphics Interchange Format,
JPEG, and PNG (with restrictions). Again
Internet Explorer is the major restriction here, not fully supporting PNG's advanced transparency features, resulting in the GIF format still being the most widely used graphic file format for transparent images.
Many website incompatibilities go unnoticed by the designer and unreported by the users. The only way to be certain a website will work on a particular platform is to test it on that platform.
Planning documentation
Documentation is used to visually plan the site while taking into account the purpose, audience and content, to design the site structure, content and interactions that are most suitable for the website. Documentation may be considered a prototype for the website – a model which allows the website layout to be reviewed, resulting in suggested changes, improvements and/or enhancements. This review process increases the likelihood of success of the website.
First, the content is categorized and the information structure is formulated. The information structure is used to develop a document or visual diagram called a
site map. This creates a visual of how the web pages will be interconnected, which helps in deciding what content will be placed on what pages. There are three main ways of diagramming the website structure:
- Linear Website Diagrams will allow the users to move in a predetermined sequence;
- Hierarchical structures (of Tree Design Website Diagrams) provide more than one path for users to take to their destination;
- Branch Design Website Diagrams allow for many interconnections between web pages such as hyperlinks within sentences.
In addition to planning the structure, the layout and interface of individual pages may be planned using a
storyboard. In the process of storyboarding, a record is made of the description, purpose and title of each page in the site, and they are linked together according to the most effective and logical diagram type. Depending on the number of pages required for the website, documentation methods may include using pieces of paper and drawing lines to connect them, or creating the storyboard using computer software.
Some or all of the individual pages may be designed in greater detail as a
website wireframe, a mock up model or comprehensive layout of what the page will actually look like. This is often done in a graphic program, or layout design program. The wireframe has no working functionality, only planning.
See also
References
External links
- W3C - World Wide Web Consortium
- Adobe Labs - Adobe AIR
Web design 4 you designs sites for the web
Design, hosting and domain name registration. Includes company information and portfolio. Located in Huttons Ambo.
Web design Huddersfield from e commerce specialists Chameleon Digital ...
Design and construction of web sites for businesses, from small informative sites to e-commerce and database driven (ASP) sites. Contact details.
Cambridge web design and website development services from Studio 24
Offers design, hosting, domain name registrations, e-commerce solutions, maintenance, copywriting, and consulting services.
Net-finity web design Northern Ireland, internet services, search ...
Offers web design and associated internet services.
Online Marketing Agency | Web Design Agency | Internet Marketing UK
Coast Digital is an award winning Online Marketing Agency specialising in web design, internet advertising and digital marketing solutions. Our services include internet ...
Web Site Design And Web Development London UK : Datadial Ltd
Datadial is a London based website design and development agency offering web site design and web design services. Our other services include hosting, internet marketing, email ...
Web Design Nottingham
Agency specialising in web design and new media. Includes profile, services, news and clients.
Dolphin Promotions Web Design and SEO Company UK. Search Engine ...
Dolphin Promotions are a Web Design and SEO Company that specialise in the development Search Engine Friendly Websites. With a long list of happy SEO and Web Design Client you ...
MVG Media - Web design & development agency based in Hertfordshire ...
MVG Media Limited is a web design agency in Hertfordshire. We specialise in website solutions that look great, are easy to manage and are accessible to both humans and search ...
Web-Design UK: Professional, approachable and local web site design ...
With over 7 years experience, we provide high quality, flexible, reliable, dependable and very user-friendly web sites for thousands of commercial and non-commercial organisations ...