1 Discuss three fundamental website and page design errors D

1. Discuss three fundamental website and page design errors. Describe the problem, why it makes for poor design, and how it impacts users.      

2. Discuss the relationship between foreground and background colors. What guidelines should you follow?

3. Discuss at least three image file types commonly used on the Web? Explain the advantages and disadvantages of each one.

4. What are some of the advantages and disadvantages to using CSS in your site.

5. Describe in detail how JavaScript can be used for input validation on the client side.

6. Explain in detail how CSS is used to create the layout for a web page.

Solution

I.Website Design Errors:

1.No contact link in website : User engagement is important if you want to build a successful community, and communities are important if you want to build successful websites and social Web apps. User engagement is also important if you want to build loyal customers. Quickly answering people’s questions and fixing their problems doesn’t just mean that you have good customer service — it means you care, and your customers and visitors will appreciate it.But many websites still don’t give visitors an easy channel for getting in touch with the company. Some websites don’t even have an email address or contact form on them.

2.Bad Navigation: Users should be able to surf around easily. While there is no standard for navigation within a website, especially now as more new web development technologies emerge, it is imperative to understand that navigation must be intuitive and consistent.If text is used as navigation, it should be concise. Visual metaphors should not be re-invented. If hyperlinks are used, then they should stand out from the body of the text. Dead links should have no place on any web page whatsoever. This increases user confusion and wastes time. And one that is even just as worse is having a link on the homepage that links to the homepage.

3.No Search Option :A lot of people start looking for a search box as soon as they arrive on a page. Perhaps they know exactly what they’re looking for and don’t want to spend time learning the website’s navigation structure.we can call these people search-dominant users.

         Whether you run an online shop or blog, you need search. People may come looking for a particular product or for an article they remember reading a while back, and chances are they’ll want to find it with a quick search. The good news, if you haven’t already implemented search on your website, is that it’s very easy to do.

----------------------------------------------------------------------------------------------------------------------------------------

3.Image File Formats :

1.JPEG:JPEG is short for Joint Photographic Experts Group, and is the most popular among the image formats used on the web. JPEG files are very ‘lossy’, meaning so much information is lost from the original image when you save it in JPEG file. This is because JPEG discards most of the information to keep the image file size small; which means some degree of quality is also lost.JPEG is very web friendly because the file is smaller, which means it takes up less room, and requires less time to transfer to a sites.

Pros of JPEG:

Cons of JPEG:

2.GIF: GIF, short for Graphics Interchange Format, is limited to the 8 bit palette with only 256 colors. GIF is still a popular image format on the internet because image size is relatively small compared to other image compression types.GIF compresses images in two ways: first, by reducing the number of colors in rich color images, thus reducing the number of bits per pixel. Second, GIF replaces multiple occurring patterns (large patterns) into one. So instead of storing five kinds of blue, it stores only one blue.Compared to JPEG, it is lossless and thus more effective with compressing images with a single color, but pales in detailed or dithered pictures. In other words, GIF is lossless for images with 256 colors and below.

Pros of GIF:

Cons of GIF:

3.BMP:

The Windows Bitmap or BMP files are image files within the Microsoft Windows operating system. In fact, it was at one point one of the few image formats. These files are large and uncompressed, but the images are rich in color, high in quality, simple and compatible in all Windows OS and programs. BMP files are also called raster or paint images.

BMP files are made of millions and millions of dots called ‘pixels’, with different colors and arrangements to come up with an image or pattern. It might an 8-bit, 16-bit or 24-bit image. Thus when you make a BMP image larger or smaller, you are making the individual pixels larger, and thus making the shapes look fuzzy and jagged.

BMP files are not great and not very popular. Being oversized, bitmap files are not what you call ‘web friendly’, nor are they compatible in all platforms and they do not scale well.

Pros of BMP:

Cons of BMP:

4.Using CSS in Website :

Advantages of using CSS:

1.Consistently Efficient
CSS improves web master efficiency, especially when applying and changing style elements. With CSS, developers no longer need to change each page one at a time. CSS enables web designer efficiency; giving designers the power to alter an entire website or folder with only a few lines of code, ensuring consistency throughout for a global audience.

2.Improves Site Speed
Less code simply means faster load time. When you use CSS, designers can reduce the amount of lines of programming for each page, which makes a website faster than the-other-site who does not use CSS. This is a huge advantage over website owners who keep users on pins and needles, waiting for the page to load.

3.Low Maintenance
CSS simplifies website maintenance and gives web developers and designers one page to manage, making it easy for web masters to format, manage, and change one element on any whim from one spot — everything is now easier to control and alter when compared with HTML.

DisAdvantages of using CSS:

1.Fragmentation
CSS renders different dimensions with each browser. Programmers are required to consider and test all code across multiple browsers for compatibility before taking any website or mobile application live.

2.Different Levels
There are different levels to CSS: CSS; CSS 2; CSS 3. This has been confusing for developers and browsers. One language is preferred.

5.JavaScript:

JavaScript is a client-side scripting language, which means that the the script runs on the your viewer or client’s browser and not on the server. JavaScript extends the web functionality with a combination of HTML and server side languages. JavaScript validation is one of the common features used with the language. Interactive websites contains dynamic content that requires user input and such user input is then authenticated before submitting to the processing page. Validation refers to a specific check, which makes the user enter the correct information, or information in a correct format as required by the site. For instance, if a phone number is required, then the user might enter a alphanumeric value by mistake, which is not possible in the case of phone numbers. Using JavaScript validation prevents these mistakes from passing on to your database.

Validation is made up of two types: real-time validation and on-submit validation. Regardless of what you validate in JavaScript, you have to choose between real-time validation or on-submit validation. Real-time validation checks the data with every keystroke or once the field in question loses focus. On-submit validation waits until the user hits the submit button.

You usually create a separate JavaScript function for validation. You can then make calls to other functions to validate different form fields. Each validation function should return an error message if the input is invalid.

The username validation depends and changes from website to website as set by the developer. Generally, regular expressions are used to check the input value in the validation form. The username is required to check two things:

An Exmaple of Java Script to check User Name Validation is as follows :

6.CSS in Designing Layout :

Use CSS to define styles for your documents, including the design, layout and variations in display for different devices and screen sizes. You can place your CSS in the <head> of a document with an embedded style sheet, or attach a separate file that defines your styles with an external style sheet. To link an external style sheet to your document, you\'ll simply add a link to the style sheet in the <head> of the document.

<

This creates a container that is essentially 1000 pixels wide with no margins and no padding. This will fit very nicely on a screen resolution of 1280 x 800.

This Creates Header row in css file types

a holder for your menu:

border in the CSS is a better alternative to using a hard rule in the HTML. It provides greater flexibility and is easier to update pages later. You can define the color of the border by using hex numbers. The thickness of the border is defined by pixel. Many designers would advise against using too many borders on a site as they create clutter. Instead, utilize good white space technique to help keep your content organized and easy to find.

Adding columns to the css file . You need to create columns that are divisible by two, which means you can\'t simply create three columns. First, you need to create two columns and then split the second column in two.

Adding the footer

This creates a layout for the web page we can change the border which ever is necessary .