This essay has been submitted by a student. This is not an example of the work written by our professional essay writers.
These types of users are basically new to the system and require a very simple and a basic interface to use them. As being new to the systems they require a safe way of working with the systems. The interface of the Novice Users should provide them with very simple ways to perform the tasks. While dealing with this type of user's utmost care should be taken that they are focused more on the main case and are not being confused with the other unnecessary functions which are of no use to them.
These type of users are, that have understood the procedures but have forgotten it. These type of users do not require more training and experience.
These are the users that have limited knowledge and aspects of operating the systems. These users only concentrate on things that are useful for them. Some training and documentation may be required for these users to let them understand some unfamiliar areas of the system.
The word Expert itself describes how a user would be. Expert users are those who have extended experience in any application. These users have a high demand of more customization options and more advance features. As they have the most experience with the application the try new things with it and explore it more within. These users are not worried if they make any mistakes as they are pretty sure that they can overcome their mistakes if they make any.
But user has some requirements and needs in order to work properly. Well some of the needs we can describe here can be:-
The way of the user to understand the things, the compassion of the user towards the job, the attention needed to understand things, the strength, trust, self-esteem and companionship everything that the user needs in terms of psychology.
Cultural needs include language, foods, clothing and festivals. It basically means the way the user needs to communicate with the things, the user is working towards.
A user should be aware of the social awareness, here when making a web-site for any company. The user would need to know if the company is directly or indirectly related to any social causes.
HEALTH AND SAFETY CONSIDERATIONS
Any user would make and build a web-site on a computer. So while doing this the user has to be careful about his/her health. As working on a screen (monitor), the user has to be careful about the safety of his/her eyes. The sitting posture, as the user might be working for a long time. Also the user should have time intervals at certain times.
This is a major factor that the user would need. The place where the user is working has to be accurate to the user. The environment should be such that the user feels free and easy to work.
So these are some basic user needs, we described above.
Ref: Lecturer's Notes
Question 1 (b)
Evaluate an existing Web-Site
Web-Site Address - www.toysmart-uk.com
The above Web-Site (Home Page) is a Web Site of toys.
We would evaluate this web-site in terms of the color, navigation, compatibility etc.
This Web-Site is a toys web-site. The logo of the Company does not at all look in any way to be closer to a Toy Company. Moreover the color used (Red - White) makes the web-site look dull. Being a toys web-site it could have been more attractive.
The other thing on accessing this web-site found was that the resolution was not set to fit in all screens. It just used the space of the original size instead of fitting in the screen. This was found as this web site was accessed in two different resolutions (1280 x 720 and 800 x 600). It did fit to the screen mostly in 800 x 600 resolutions but did not fit at all in a 1280 x 720 resolution. The web site should have had dashboard included so that this problem wouldn't have arisen.
The web-site did fail to attract a user towards it. Header could have been used, some space for specific elements could have been used. But it is been built in a very simple way. Also some images do not come up.
The buttons used in the Web-site were simple, not attractive, being a toys website not animated either. When a button was clicked rather than opening in the same tab it used to open it a new tab.
This company has all types of toys, but still the main page just shows mostly Helicopters. All the other items can be viewed by navigating through the site. But the other items than the helicopters do not appear on the main page. (appears on the buttons and on the sides of the page)
The accessibility for existing users was available to log in with user ID and password, but no feature for creating a new account.
The text used was standard in the whole web-site and even in the buttons. It shows a same flow for everything in the web-site.
It does not have any space for any new, attractive or seasonal offers.
The currency selection was a good option for the users so that they can select the currency according to their suitability. But the Payment method was only by Credit/Debit cards. An option for online payment should have been given, so any user from the world can buy toys from this company.
When clicked on any item, the item gallery showed not more than 2 images, and the description was not up to understanding. Also it was lacking in showing videos of the item. As a toy, a customer should know the functions of the toy and how it works for a clear view at the item. But as it was not included no customer can be sure of the item.
No tracking service was available. A customer would be eager to receive the item ordered. If the tracking facility was available, the customer would constantly know how far his/her item is.
Whereas navigation is concerned, it had buttons for different items, but did not have the HOME button. If a customer is on some other page and wants to return to the Home page, he/she cannot. They would have to type in the URL again to go to the homepage.
The Web-site does not notify the customer of any standardized registered mark. So there might be no guarantee that the customer's information is safe. As being an e-commerce site, this should have been taken into serious consideration, as customers reveal their Personal information while ordering anything to buy along with the bank details.
Whereas the compatibility is concerned, it was supported by browsers like Internet Explorer, Google Chrome, Mozilla Firefox. The only browser with which the web-site had problems was Safari. The navigation to the site caused problems. As far as platforms are concerned, the web-site did open up on Windows desktops/laptops, Apple Computers, and on Mobile Phones also. But again depending upon the Operating systems of the mobile the web-site didn't open up on some mobiles. It did open up on the Symbian Platforms, but did not open up on an Android Phone.
This was a simple site analysis of this company's toys web-site.
We now have a table that compares two different web-sites along with the web site that we analyzed. (Web-sites of Toys Company)
Web-Designing is a process to create the content (hyper-text, hyper-media), that are delivered to an end user through the World Wide Web (www), using a Web Browser or other Web enabled software, displaying the content of the design.
As we talk about the content of the Web-Site, the content can include text, images, videos, audio etc. This all can be created using HTML, DHTML, and XML etc.
(Reference: - Lecturer's Notes)
Web Designing includes creating Web-Pages, where the web-pages can be static or dynamic.
A static web-page is created where the content or the design is not changed for any user. It is the same as it was when it was created.
Whereas, a dynamic web page is created where the content (may be design as well) has to be changed or updated according to the needs and requirements.
Web-Pages are designed using languages as HTML, DHTML, and XML etc.
Web-Development does include the Web Pages, created by Web Designing but more than that it does even include making a web site for the World Wide Web (www), a private network, client/server, e-commerce etc.
Here we come to the difference between Web-Designing and Web Development. We have already discussed what Web-Designing is and how Web-Pages can be created. Web-designing (web pages) are static web-pages that do not need to be changed, whereas Web-Development includes those web-pages created, which may need to be changed, so Web-Development includes Dynamic web-pages.
This changing of the content and design is also done through some languages, but there is a vast difference between the languages used to create Web-pages, and the languages used for Web-Development. There are frequent changes that might be needed to a particular site, where languages like HTML, XML cannot be used. So languages like PHP, ASP, JAVA, .NET etc. are used.
The languages used for Web-Designing are called as Mark-Up languages, whereas the languages used for Web-Development are known as Scripting.
Ref: PHP 6 and MySQL 5 for Dynamic Web Sites: Visual QuickPro Guide - Larry Ullman
MARK UP LANGUAGE
A Mark-Up Language is something, which is added to a text document that gives some extra information about it. For a basic understanding, if we wish to change the font style, size we use the tags for that particular word. The Mark Up Language basically says how the document should appear.
One of the most common Mark-Up language is HTML (Hyper Text Mark-Up Language). HTML is used by web-browsers to display the web pages. The coding of this language can be created by some web-designing programs (e.g. Adobe Dreamweaver). So far till time there have been many updates and variations in this Language. A basic example of this is DHTML (Dynamic Hypertext Mark Up Language).Multiple codes can be used to create a unified appearance of the web-site.
Mark up languages (HTML) are used in some word processors to change the appearance of the text. The user cannot see this coding that is done behind the word processor application.
Some codes in HTML can only be read by the web-browsers that give it the instruction on how to perform.
Mark Up Languages are also used for vector graphics, content syndication, user interfaces etc.
HTML has many liberties, which has made it so popular today. As it is so free and has liberties some web browsers and web applications have added their own functionality to the HTML base protocol, which in turn has higher security risks.
So there are steps being taken to replace HTML with any other standardized Mark Up language.
Whereas if we take XML into consideration, it has gained popularity because it has the facility of transferring data between different programs and Operating Systems. It can enable the developer to design its own data in the required format in its own terms.
Some advantages of Mark Up languages are that it does support user defined tags, it is platform independent and has a longer viability. Also it has some disadvantages as such it requires a real expertise person, some tools required are expensive, and also labor may prove out to be expensive.
Some of the Mark Up languages are: -
HTML, XML (Extensible Mark Up Language), DHTML, MXML (used for Flash), VML (Vector Mark-Up Language), X3D (for 3D graphics) etc.
Mark Up Languages are used to create static web-sites.
Ref: PHP 6 and MySQL 5 for Dynamic Web Sites: Visual QuickPro Guide - Larry Ullman
Ref: Arena Animation - Web Weaver(Book) - Testing a Web-Site
A script language is a programming language, which allows controlling more than one software applications. Scripting is not programming, as it is written in different languages, and might be created or modified by the user.
Types of Scripting Languages:-
Job Control Languages and shell
Application Specific Languages
Text Processing Languages
General Purpose Dynamic Language
Scripting is mostly used for creating Dynamic Web-Sites. Scripting languages are used that help in creating Dynamic Web-Sites like any E-Commerce web-site, any network security web-site, any data transfer web-site etc.
While creating a Dynamic Web-Site there are basically two fundamental types of scripting languages: -
A server side scripting language is, that is processed by a particular server after any request is made. Server side have their own coding that are placed in a document on the server. When a request is placed by the user to view any web-page, the server does not simply send the web page but it does process the script in the document, and send it back to the user who requested it, in the form of HTML, so that the browser can display the content of the web-site to the user.
Whereas a client side server is something that goes from the user's computer to the server. As basic example we can consider here is a user filling an online form as sending the information back to the server.
Scripting Languages are now widely used every day, due to more and more needs of e-commerce web-sites. Some basic advantages of Scripting is that it is easy to learn and use, minimum training and experience required, it allows complex tasks to be performed easily, allows simple editing and the most important advantage that scripting gives is that it allows to add dynamic and interactive activities into the Web-Pages. Also the disadvantage of Scripting is that is easily downloads executable code from any machine to the web browser and can be installed and run, without the user being aware of it. This is a real disadvantage in Scripting Languages like Java & VBScript.
Some basic Scripting Languages are Java, PHP, Python, Pearl, Blender (for 3D authoring tools), etc.
Scripting languages are used to create dynamic web-sites.
Ref: PHP 6 and MySQL 5 for Dynamic Web Sites: Visual QuickPro Guide - Larry Ullman
Question 2 (b)
Web Authoring Tools
Web Authoring Tools basically mean the tools required to create a Web Site. A Web Site can be made by using different Software's or by Coding or Scripting. Here we would have a look at the software's that can help an individual to create a Web Site.
Due to the advancement in the technologies, there are software's available that can help create Web Sites easily. Some of the software's that are used for Web Designing are: -
Sony Sound Forge
Macromedia Fire works
Microsoft Front Page
Corel Draw (Graphics Suite)
Microsoft Visual Studio
Aptana (Open Source)
CoffeCup VisualSite Designer
The software's from Adobe (Macromedia) are software's that are not open source. It has to be legally bought to make use of them. Whereas there are some software's available which are Open Source. Any user can download it from the internet or from any other relevant source and make use of them. The only difference that comes between paid software's and Open Source Software's is that, a user does not get all of the functions in an Open Source software that are available in a paid software. For example an Open Source GIMP is used for editing Photos, which is much similar to Adobe Photoshop. Aptana is another open source software which is used for Web Development.
But before making use of any of these software's there are some features that should be taken into consideration. The tool's available in a particular software, their suitability etc.
Most of the Web Authoring software's are Graphical User Interface (GUI), so it makes things really easy. We would take into consideration some of the above mentioned software's according to their availability, the tools available, their layouts, the commands etc.
Ref: Lecturers Notes
Adobe Dreamweaver is a standard web designing software with the leading web authoring tools available. It does work visually or directly into code, design and split mode with Cascading Style Sheet (CSS) inspection tools and develops with content management systems.
The Home Page of Adobe Dreamweaver CS3:-
Also it has features like Getting Started, to know the basics of the Software, Resources available, new Features added etc. Also it provides with some Pre-Loaded Templates, so that can be used directly without creating the page designs, and then the content can be added accordingly.
Adobe Dreamweaver CS3 (Working Area)
As we can see in the above image, the main benefit of Adobe Dreamweaver is, that it creates coding directly according to the design the user does. It offers three different modes:-
The user can work according to the needs. If the user does not know coding, the design mode can be used and the required things can be created, where the coding is done directly into the code mode.
Adobe Dreamweaver has tabs related to its own individual activities, which offers any user a smooth ease of use. The tabs available: -
Insert > Common, Layout, Form, Data, Spry, Text, Favorites etc.
With this tabs a user can insert Images, videos, hyperlinks, E-Mail Links, Table, Scripts etc.
The Layout type can be selected (frames, Spry Tabbed Panels etc.)
Also Forms can be inserted with options like checkbox, radio buttons, Buttons, label, image field etc.
It supports CSS style, to style the web sites with CSS implementation tools, that can be modified in the properties panel.
Also it supports FLV files for playing movies in a live view.
It supports platforms like the Windows Computer as well as the Apple Macintosh.
Also some other features like importing a PSD file, Online Support, Helping Tips, many Exporting formats etc.
In all Adobe Dreamweaver has proved it to be one of the best Web Authoring Tools.
Other than Adobe Dreamweaver, software like Adobe Photoshop is available for the graphical use in Web Designing.
Adobe Photoshop is an Image Editing Software that takes editing to a level, where a user's imagination can reach. It can edit and create almost whatever a user wants to create, if the user has a full knowledge to use this software.
A thought come into mind that if Adobe Photoshop is an Image Editing software how can it help in Web Designing. Well Photoshop is just not used for editing, but is also used for creation. A whole attractive Web Page can be designed using Photoshop. Also Headers, Buttons, Company Logos, etc. can be designed in Photoshop. Below is an image shown of a Header and a Button, created in Adobe Photoshop.
A Header Created in Photoshop
A Button Created in Photoshop
Similarly a full Web page can be designed in Photoshop, and then it can be imported to Adobe Dreamweaver, for the functionalities.
Adobe Photoshop has got features that can change the look of any image, and a real attractive creation can be done, using the tools available.
Some basic features that Adobe Photoshop has for designing, editing or creating are Smart Filters, Quick Selection Tools, Edge Refine, Auto-Align & Auto-Blend Layers, B/W adjustment, Curves and Cooler, Brightness/Contrast/ Blend Modes, Save for Web option
Photoshop also has a special help menu with different topics, to help a user find a way if under any problems. Photoshop provides slicing of images (Web Pages), so that it can be imported into Adobe Dreamweaver easily for creating the functions of a web-site.
Also it supports mostly all of the Image formats, and can be imported or exported according to the requirements.
Other than this software's also, Software's like Adobe Flash is used for Web pages to create animated Web-pages, buttons, headers, introduction pages etc. by scripting and by using the framing of different objects used to get the required results.
All of these software's can be used to create an intellectual and attractive web-site.
These were two basic software's which are used for a simple web-designing. But we do see some web sites that are more attractive, with some animations and videos and audios etc. We would take a look at some of those software's used.
Adobe Flash is 2D animation software, but it can also do 3D Animation up to some extent. It is basically used to make animated buttons in a web-site. But other than this it is also used to do some character animations, also have some small programs and small games which can be done through scripting in this software. Below is the startup screen of Adobe Flash CS3, which describes its basic functions of the file types that can be created.
Adobe Flash provides tools that can help a user to create animations, buttons, and moreover it also helps to create a full static web-site, totally in Adobe Flash with the help of scripting.
Animation in Adobe Flash is dome through frames. The default frame rate in Adobe Flash CS3 is 24fps(24 Frames per second), which means that it would play 24 frames in one second. This frame rate can be decreased or increased according to the user requirements.
The advantage of Adobe Flash is that it can import Photoshop files, so that a user can create graphics in Adobe Photoshop according to different layers, and can import them in Adobe Flash in the same different layers that were in Adobe Photoshop, so that each element can be animated in the required way.
Adobe Flash CS3 has some basic tools required by a user to create anything. Like the shape tools, pen tool, brush tools etc.
Adobe Flash CS3 provides publishing the task done by a user directly into HTML format, which can help the user. Other than this the user can import different types of images of JPEG, PNG, and BMP format etc.
Anything that is created in Adobe Flash CS3 can be exported as a movie or image. The default flash file format is .FLA, whereas the file that can be used in web-pages can be saved as, .SWF. But it can also export formats such as GIF, AVI, MOV, WAV, BMP, JPEG etc. (according to the work that is created)
It does even have support for the user for on screen help, or online help, or even some tutorials.
This was a basic feature that Adobe Flash provides, that can be used in Web-Designing to make the web pages look more attractive.
Also there are some software's which are used to edit videos and audio. We would take a small look at those software's even.
Adobe Premiere - Video Editing Software
Sony Sound Forge - Audio Editing Software
Adobe Premiere is widely used for a real video editing. It can be used in a Web-Site for its Introduction page that might have some videos or can be used in the video content of the web-site. Below we have the start-up screen of Adobe Premiere.
As being a Video Editing Software, when a new project is supposed to be made, this software would require the playback device. The following image shows what kind of playback does Adobe premiere supports.
Adobe Premiere provides the user with a vast support like NTSC, PAL and 24P with different aspect ratios, video sizes, audio bit-rate etc. Also it requests the user to enter a file name and the file destination to be saved to move on further with editing video. (The only drawback Adobe Premiere has that it cannot import video files other than AVI.
It does help the user in every way so that the user can edit the video as required and can play them accordingly with no quality loss.
The Image below shows the main work area of Adobe Premiere, when any video is imported.
Adobe Premiere has different screens that are divided according to the tasks. There is a specific area showing the timeline of the video, an area that plays the edited video, space to add new video or audio etc.
The above Image shows the main work area of Adobe Premiere. This software allows the user to adjust the screen size, the audio of the video, different transitions, effects etc.
Also it does allow to add more videos and make a continuous video. This software can be used to create a video which would be much more attractive than the normal video and can be added to the web-site in the video content or in the main Introduction page.
This software also allows support for the user for any help tips, online helps, with different functionalities from the tool box, menu bar etc.
When the video is finally edited, it does render the video so that the video can be played smoothly without any disruptions. This is something that was really needful to a user after the final editing.
It does export the video in AVI, GIF format as per required by the user.
In all Adobe Premiere is widely and commonly used video editing software for general purposes and for using videos in a Web-Site.
SONY SOUND FORGE
Sony Sound Forge is an audio editing software, which helps the user to edit and create different types of audio files.
Sony Sound Forge, as being an audio editing software provides the user with editing the sounds. The user can add or remove the required content from an existing audio clip or that has been created.
Below is an image of the Sony Sound Forge 10.0 work area.
Sony Sound Forge gives pristine sound quality, precise audio editing, powerful audio recording.
It consists of professional audio effects and also includes tools for sound design and mastering.
Other than audio it does supports video formats like AVI, WMV, MPEG-1 and MPEG-2, so that a user can synchronize audio according to the video. It includes certain templates at 720p and 1080p, giving a real High Definition output.
Sound Forge Pro 10 software supports full resolution 24-bit/32-bit 192 kHz files for the ultimate in audio fidelity. Capture the subtle overtones and nuances of instruments, vocals, and effect changes that 24-bit audio provides. With Sound Forge audio software you can import, save, and even record to this resolution if using supported hardware.
Question 3 (a)
Key Features of the Web-Site according to the business objectives
Name: - Dorset Wildlife trust
Focusing on conservation and protection of local wildlife, and educating people about it.
Trust Operates online, so wants to give up-to date information.
Web Site Features
As being a wildlife trust, the web-site of this trust should be more towards the nature (animals).
The basic features to be taken care can be, the web site color theme, the web site functionality, appropriate content etc. But we would take a closer look into the features to be considered for this web-site.
The web-site should have a real good introduction page ( a short video) about the trust and their functionalities, along with a Skip button, so depending upon a user's choice it can be viewed.
The home (main) page of the web-site should give all appropriate information of the trust. We would start with the logo of the trust. As said earlier being a wildlife trust, the logo as well should be according to the company views and more towards wildlife. The logo should be along with the trusts name.
A header should be included in the home page, and should inform the user of the continuous and different activities taking place in the trust. The header should be a bit animated - sliding, rollover etc. to make it look a bit attractive.
The web-sites buttons of course, should be simple according to the company's logo and the logo color theme, so that it does not mismatch the color combination.
A search bar should be definitely included for an ease access to the information on the web site, so that a user can type in a keyword, and then all related information can be viewed.
A box should be made wherein all the photographs of the trust so far can be accessed. It should have a link to a new page/tab for viewing photographs specially. The photo album should be attractive with an ease of use. Thumbnails can be provided (of same sizes of all photos of course), so that on clicking on them the photo should appear in a big standard size.
The web-site should have a Sign-up, Login space on the page, so that new users can become members, and the existing members can log in to the web-site with access to other information.
Upcoming events notifications should be given on a side in the web-site, so that the users know what are the events the trust is organizing next.
Booking spaces should be included, to book a viewing of the trust or any resort or park, the trust handles.
Seasonal events/offers should be included in the web site.
One of the most important thing to include should be, the news of the Trust. All that is going on in the trust, the users should be made aware of it through the medium of web site.
Videos of the trust, wildlife, nature etc. should have a separate place on the web page, with a link to view all other videos.
The Company (trust) profile should give information of the trust, its history, its works, its functionalities etc.
Volunteers should be accepted, so that they can work for the trust, and the trust can provide them with respective means. (providing certificates to the volunteers, of the work they carried in the trust)
All details of the trust should be provided. A contact page should be giving information about the contact details of the trust. [Contact Nos., Address, Branch Location (if any) etc.]
Being such a huge Wildlife trust, it would need employer's. So a page should be available, with updates on current job vacancies at the trust etc.
Also the web site should be compatible under different platforms. If any user wants to access it on a Computer, or a mobile phone etc., the web-site should be compatible with all these platforms.
These might be some features to be considered for this Wild Life trust Web-Site.
Question 3 (b)
Storyboard of Web-Site main Page
"Originally, a series of drawings that lay out the sequence of scenes in a film, especially an animated one, but now any sequence of drawings or diagrams, as to illustrate the sequence of events in an accident or as a flow sheet for computer programming."
A basic Storyboard for the Dorset Wildlife Trust has been shown on the next page. We would discuss in brief about the elements and functions.
We have designed a simple storyboard of the web-site.
As we can see, on the top, we have the Company Name, with the search bar parallel to it. Below it, we have the Company Logo along with the header. The header would display images, news, videos etc., continuously for user's attraction.
Below it we would have the buttons, for navigation of the web-site according to the pages.
We have a Visit Site box included, so any user can book a time to visit respective places of the trust.
Next to it we have the Explore and Sign up, Log in Box. The Explore box would guide the users to explore the works of the trust. It would let the users know what the trust does. The Explore box would have a link to a new tab/window. The Sign Up button would allow new users to create an account with the trust, so that they can get the advantage of being up to date. The Log In box would be for the existing user's who can Log in with their username and password to access more information and other details from the website.
Below the Explore box, we have the Company Profile, which would provide a basic information about the trust. It would provide users with a simple beginning to get to know the trust.
A special box has been included next to Company Profile, which would include Photos. It would give the users a wide angle to explore the work of the trust. Also with photos we have a video box, next to it, which would show the users something more than what photographs could show.
Then we have a box for News, which would help the users to be up to date with the current flow of the trust. A small box which says Events would display all the upcoming events in which the trust is involved.
Next to Events we have three boxes for Social Network, Vacancies and Membership advantages. Social Network would link the user directly to the trust's social page (Facebook, twitter etc.), connecting different users through this. The vacancies would link to a new page which would have all the details of the current job vacancies available at the trust. The Membership advantages would link to a new page which would give any existing member or a new user details about the advantages one can have by becoming the member of this trust.
And at the bottom of the page we would have a simple footer, for site navigation.
This was a simple understanding of the storyboard created for the Dorset Wildlife Trust.
Ref: Arena Animation - Web Weaver(Book) - Testing a Web-Site
Graphical Data for the Web-Site
While creating any web-site one of the most important factors to be considered is the Web-Site Graphics. Unless the web-site does not have appropriate graphics, it is of no use to any user.
Here we are concerned about the Web-Site for a Wildlife trust. So taking graphics into consideration we would firstly think about the color theme of the Web-Site.
As this web-site is about wildlife and is more toward the nature part, the colors that can be used for this web-site would be green, brown and yellow. Not all of these colors can be used. For instance we choose a color theme for the web-site to be Green with White. Just with these two colors we can definitely create a perfect wildlife and a nature related web-site.
So the color theme we would incorporate in the web-site would be Green and White.
Now we talk about the color of the buttons of the website. Since we have used green and white color theme, the place where the buttons should be there, is in a light color shade we can used the button in a dark shade and vice versa with the same color theme.
As a web-site it has to have photos and images it the content. So we also have to be careful of the types(format) of photos we are using in the web site and the size as well. We cannot have different formats of photos and different sizes of photos in the web-site. But along with it we also have to be careful that the format which we use should be compatible with the web-browsers. Different user use different browsers, so we have to be careful that no user faces any problem while watching the site. There are different types of photo formats that can be used in a web-site. Formats like JPEG, TIFF, BMP, PNG, GIF etc. Mostly all of the browsers support these photo formats. But the mostly supported format for a photograph is JPEG ( Joint Photographic Experts Group). Almost all the web-browsers support JPEG format of a photograph. JPEG is a method of lossy compression. JPEG carries still images. Any higher size image can be compressed up to some level with the quality same. JPEG carries high quality images. Because of such advantages it is supported by all web browsers and so we would use JPEG format of photos in our web-site.
Other than JPEG, other format is GIF (Graphics Interchange Format). This format carries still images as well as animated images. Concerning it to web-designing any animation can be created and can be compressed into GIF and then can be attached to the web-site. It also has a good compression level. Also most of the browsers support GIF format. So if there is any animated photo to be used in the web-site we can compress it to GIF and use it in the web-site.
Also if there is any image with transparency, the photo format PNG can be used. The only disadvantage with this format is that it requires additional plug-in to the browsers to display the image.
Below we have a comparison of some of the Image type formats (JPEG, GIF, PNG, BMP, TIFF etc.)
We have considered the image above to compare the different formats of the image.
Factors Considered (Resolution 100 x 63 pixels in all formats)
Size ( In KB)
Same with high quality
Poor and Image size reduced
YES (if the image is animated)
Same and good compression
Very Poor and Image size reduced
Average, but image size reduced
As we saw in the table the different image formats and the sizes and quality individually. From this we come to a conclusion that JPEG and PNG image formats do not change the image resolution (in terms of the image size), whereas the other formats do change it, and also the quality is lost, whereas JPEG compresses an image in the highest quality, with reducing the size even. And also JPED is supported with mostly all of the web-browsers, so the images to be used in the web-site can be JPEG (where still images are to be carried).
We also have some videos to be attached in the web-site. The best quality video format is AVI (Audio Video Interleave), MPEG (2/4), 3GP, WMV (Windows Media Video), MOV(Apple-Mac).
The video format AVI has the best compression technique and is high quality and is compatible with almost all web-browsers. SO using a video of AVI format can be helpful, so that the users do not face any problems. Also MPEG format video can be used.
Other than the videos, we have the buttons to be used. If the buttons are simple just with links, the basic color theme can be used. But if the buttons are animated than, they should be in SWF (Shock Wave File) format. This requires an additional plug-in to come into function. But animated buttons make the web-page appear more attractive.
Now coming over to the content of the web-site, the content can be photos, videos, texts etc. We have discussed about photos and videos. Now we take into consideration the text that is to be used in the web site. The text size, color, style should be maintained according to the site and in such a way that the user does not find it hard to read. The Text should be same in the whole web-site, unless anything important is in different size, color or size, otherwise it should be standard.
The photo gallery of the web-site should attract the user to take a look at it. The photo gallery can be simple or can be animated. Thumbnails can be used for a quick view at the photo. The thumbnails should be of same size. It should have option to enlarge the image up to a standard extent. Options for next image and previous image should be included so that the user finds it easy to use it. If an animated gallery is included, the navigation of the photo gallery should be easy.
And some other basic things like the Company Name and logo can be simple or animated, according to the requirements. A header should be included to have an attractive look. Other than this some attractive banners, advertisements etc. can be used.
In all the graphical data in a web-site holds a real important place to be considered.
Arena Animation - Web Weaver(Book) - 2009. 1st Edition. Andheri (East), Mumbai.
Larry Ullman (December 2008) PHP 6 and MySQL 5 for Dynamic Web Sites. 3rd Edition.
Date and Time accessed: - 12th Dec 2010, 15:39
Date and Time accessed: - 13th Dec 2010, 16:24
Date and Time accessed: - 14th Dec 2010, 10:45
Date and Time accessed: - 14th Dec 2010, 16:36
Date and Time accessed: - 16th Dec 2010, 20:45
Date and Time accessed: - 18th Dec 2010, 02:45
Date and Time accessed: - 20th Dec 2010, 19:30