Unit VII: Website Page Layout and Design Issues - Web Technologies I

Website Page Layout:

In graphic design, the page layout is the process of placing and arranging text, images, and graphics on a software page to produce documents such as newsletters, brochures, and books or to attract readership to a website. The goal is to produce eye-catching pages that grab the attention of the reader. Often this involves using a set of design rules and specific colors, the specific style of a publication or website to adhere to a visual brand.

1. Understanding Site Audience:

A website audience is a group of users visiting our site that we have cookies with our tracking tag. An audience might include everyone who has visited our site, just users who have registered, or users who have abandoned their shopping carts.

Essentially, it is a group of people we have identified that they had visited our site. We can choose to create multiple website audiences. Some users may overlap into multiple audiences depending on the settings we created.

2. Page Size and Screen Resolution:

Our pages should work at any resolution. Jakob Nielsen is on record as recommending:

a. Optimize for 1024×768, which was the most widely used screen size for a long time. Of course, the general guideline is to optimize for our target audience’s most common resolution, so size will change in the future. It might even be a different size now, if, say, we are designing an intranet for a company that gives all employees new big monitors.

b. Do not design solely for a specific monitor size unless we have been specifically commissioned to do so because screen sizes vary among users. Window size variability is even greater, since users don’t always maximize their browsers (especially if they have large screens).

c. Use a liquid layout that stretches to the current user’s window size (that is, avoid frozen layouts that are always the same size).

3. Designing Pages:

Web design itself refers to the process of creating a web page’s appearance and to the choice of a right color scheme, page layout, fonts and more. Every single web page on a website has a different content, but all the pages are using a similar graphic design. Often sites will use website templates, which contain all the basic elements of web design, the website's CSS style, buttons, backgrounds, borders and various graphic elements like hover images, bullets and header banners. When the website template is applied to the website, all the pages assume its appearance, using the same styles, background and other graphical elements.

But most of the pages on a website have their own design elements. This is needed because every page has to present different content, and the basic website style is not fully applicable for all the web pages. For example, designing a contact form will sometimes require a custom layout and design elements with which to handle the form's fields, buttons, drop-down menus, etc. All these styles, layouts, images, etc. are often not applicable to the other website pages. So, the contact page uses the basic website template for the menus, backgrounds, header images, etc. but also has its own web page design, including the contact form’s design itself and all the other elements specific for that page.

4. Coding Our Design:

Coding is basically the computer language used to develop apps, websites, and software. Without it, we’d have none of the major technology we’ve come to rely on such as Facebook, our smartphones, the browser we choose to view our favorite blogs or even the blogs themselves. It all runs on code.

5. Developing for Mobile Devices:

Various devices have different capabilities and screen resolutions, which makes it difficult to build a single page layout suitable for all devices. Individual page templates allow defining alternative page layouts for specific device profiles.

Pages based on these templates automatically use the appropriate layout according to the device profile detected for each visitor.

Website Design Issues:

The designing industry is highly competitive, and to get ahead in the race, designers need to keenly focus on being technical as well as strategic. Here are a few common issues that designers have to face during web design and development.

1. Website Accessibility: 

The Web is basically designed to work for all people, irrespective of the culture, language, location, or physical or mental ability. However, one of the major challenges a web designer faces is to enhance the accessibility of websites. A good designer should ensure that the website is not only accessible across the world but also its various features are fully functional as well.

2. Compatibility With Browsers: 

With the introduction of different browsers, designers are constantly facing the challenge of building a website which is compatible with almost all the major browsers. After designing a website, it should be tested on all browsers to ensure that the website is completely functional.

3. Navigational Structure: 

The navigational structure is one of the vital aspects of any website, as the usability of the website, is based on an excellent navigational structure. Hence, to avoid any such issues, designers have to ensure that they provide a proper navigational structure to the users.

4. Positioning Of Content: 

Another prominent aspect of a website is that the users should find it readable. While designing the structure of the website, the designer should place the content in such a manner that it enhances easy reading. Also, use suitable colors when it comes to font.

5. Challenges In Creating A Responsive Website:

The process of creating a responsive website is a major challenge for designers as it involves a wide array of devices, code frameworks, scripts, and of course, the constant need to work in an innovative way with clients to effectively manage the process.

6. Typography:

Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), and adjusting the space between pairs of letters (kerning). The term typography is also applied to the style, arrangement, and appearance of the letters, numbers, and symbols created by the process. Type design is a closely related craft, sometimes considered part of typography; most typographers do not design typefaces, and some type designers do not consider themselves typographers. Typography also may be used as a decorative device, unrelated to communication of information.

Steps to Follow for Website Design:

1. Requirement Analysis:

Before designing any website first of all we should analyze all the necessary things that are required while creating an effective website.

a.  Customer Requirement Analysis:

If we are designing any website for our customers, then we must collect the entire requirement from our customers, what type of website they wanted. Like; they wanted high graphics, a highly animated, or database-oriented or e-commerce enabled or a simpler one.

b.  Designer Requirement Analysis:

If we are designing a website then we should analyze all the required tools, data, content, etc. Before starting any website to design we must be aware of what we are going to design. Also sure that we have all the tools and data that customers wanted on the website. And we have to estimate the total time to finalize the website.

c.  Technical Requirement Analysis:

Before starting the design of any site, analyze the technical part of the website. Where we should aware of the webspace, Webserver platform, Web Server, Database server, Bandwidth assigned for the site, domain name of the website.

2. Website Design:

After completing the analyzing part we first design the website. In this section, we should design the whole website module by module.

a.  Web Layout Design:

Before starting the website design we should design the Layout of FrontPage and Inner page. Also, design any extra other special pages on our website. We must identify the size of each part of our layout, how many pixels we want to specify.

1. <header> - Defines a header for a document or a section

2. <nav> - Defines a container for navigation links

3. <section> - Defines a section in a document

4. <article> - Defines an independent self-contained article

5. <aside> - Defines content aside from the content (like a sidebar)

6. <footer> - Defines a footer for a document or a section

7. <details> - Defines additional details

8. <summary> - Defines a heading for the <details> element

b. Banner Design:

Banner is the main attraction of a website so we should design an attractive web banner for our website. To design a banner we can use any one of the graphic editing software. Like: Adobe Photoshop, Corel Draw, etc.

c. Menus Design:

After designing the Banner we must design the menu/links that we need on our website. Menu/link can be created simple text link, image link or JavaScript enabled dynamic animated menus.

d. Content of Page:

Now, when we have designed layout, banner and menus then we should start to manage the content of each page of our website. Collect all the content which we want to include into the pages from the primary or secondary sources.

e. Current Events:

If our website is of an organization then we should include the all recent events and must display on a highlighted form, where we can include GIF images, JavaScript Animated, Video Files or Flash Animated.

f. Footer:

Footer is the information about the organization/person that is holding the ownership of the website. Where we can include the full address and contact about an organization.

3. Resource Collection:

Resource collection is the major part of our website design, where we have to collect all the content that we want to include into the website like; information about the organization, pictures related to different event of an organization, graphics we want to place on our website and other media files. But be sure that we must have all the rights to use that resources otherwise, we have to take permissions to use that resources from the related source.

4. Finalizing/Managing The Site:

After creating most of the pages of our website, we have to finalize all pages, links of our site, where place all the content in a proper manner, where we can categorize the content and place in the different web folders. Like; we can place all web pages of one category into one web folder and images used on that category into another image folder. To manage the website in a proper manner we can use third-party tools like; Microsoft FrontPage, Adobe GoLive, Macromedia Dreamweaver, etc.

5. Testing:

After finalizing the web designing we should test our website for error-free, which makes our website better.

1. Layout: Check website on the browser is it finalized according to the Layout.

2. Links: Check all the links whether it is working or not placed on the website.

6. Upload To The Server:

After completing the site upload all webpages, media files on a web server. We can use various upload manager to manage our webserver. Like: Macromedia Dreamweaver's file manager, FileZilla, etc.

Example:

<!DOCTYPE html>

<html><head>

<style>

#header {

    background-color:black;

    color: white;

    text-align:center;

    padding:5px;

}

#nav {

    line-height:30px;

    background-color:#eeeeee;

    height:300px;

    width:100px;

    float:left;

    padding:5px;       

}

#section {

    width:350px;

    float:left;

    padding:10px;       

}

#footer {

    background-color:black;

    color: white;

    clear:both;

    text-align:center;

   padding:5px;         

}

</style>

</head>

<body>

<div id="header">

<h1>City Gallery</h1>

</div>

<div id="nav">

London<br>

Paris<br>

Tokyo

</div>

<div id="section">

<h2>London</h2>

<p>London is the capital city of England. It is the most populous city in the United Kingdom,

with a metropolitan area of over 13 million inhabitants.</p>

<p>Standing on the River Thames, London has been a major settlement for two millennia,

its history going back to its founding by the Romans, who named it Londinium.</p>

</div>

<div id="footer">

Copyright © W3Schools.com

</div>

</body>

</html>

HTML Responsive Web Design:

Responsive web design is the practice of building a website suitable to work on every device and every screen size, no matter how large or small, mobile or desktop. Responsive web design is focused around providing an intuitive and gratifying experience for everyone. Desktop computer and cell phone users alike all benefit from responsive websites.

Responsive design is aimed at providing the best user experience across a broad range of platforms, whether we are browsing from our PC, our laptop, our tablet or our smartphone. It’s born from the idea that we use multiple screens to view content, and that this content should automatically respond to match our screen size.

How to Implement a Responsive Design?

1. Adopt A Fluid Grid:

Years ago most websites were laid out based on a measurement called pixels. But now, designers have shifted to using a fluid grid.

A grid sizes the elements of our site proportionally, rather than making them one specific size. This makes it easy when sizing things for different screens: the elements will respond to the size of the screen (that is, the grid), not the size they’re set to be in pixels.

A responsive grid is often divided into columns, and the heights and widths are scaled. Nothing has a fixed width or height. Instead, the proportions depend on how large the screen is.  We can set rules for this grid by modifying our website’s CSS and other code.

2. Allow For Touchscreens:

These days even laptops are shipped with touchscreens. This makes it essential for responsive websites to be designed with both mouse and touchscreen users in mind.

If we have a form that contains a drop-down menu on a desktop view, consider styling this form so it is larger and easier to press with a fingertip on touchscreen devices. Additionally, remember that tiny elements (like buttons) are very difficult to touch on smartphones, so try to implement images, calls to action, and buttons that display properly on all screens.

3. Decide What Elements To Include On Small Screens:

Responsive design does not mean replicating our website exactly from one device to another. We are looking for the best user experience and that may mean we need to leave things out when someone looks at our site on a very small screen.

Responsive websites often condense their menus or navigational options into a button that can be opened with a single press. The menu may display expanded on a large screen, but can be opened through this single button on a small one.

Again, we can set rules for including or leaving out certain elements by modifying our website’s CSS and other code. This may take some time to set up, but our visitors will absolutely appreciate it!

4. Think About Images:

Image sizing can be one of the most challenging aspects of responsive web design. We will need to create rules in our CSS that determine how images are handled on different screens, whether they are made to be the full width, or removed, or handled a different way.

5. Try A Pre-Designed Theme Or Layout:

If we are not a designer by nature, we may need extra help in converting our site to be responsive. The good news is help is available.

If we do not have the time or the desire to design a responsive website ourself, we can “cheat” by using a theme or pre-designed layout that does the work for us. This means that all we will have to worry about doing is updating the colors, branding, and content to match our company’s needs.

If we use WordPress, there are plenty of both free and paid themes available that are responsive right out of the box. The same applies to many leading eCommerce providers who offer themes on their site.

6. Outsource Our Project:

If we don’t use WordPress or a hosted eCommerce website, we may find it impossible to locate a pre-designed theme to use. Or we may simply want a design that better matches our specific needs or company branding. Well, we can always hire someone to create something custom for us!

A web design company like WebFX has experience designing responsive sites. In fact, all the websites we create are responsive right out of the box! This means we’ll never have to worry about redesigning our site to be mobile-friendly (unless there’s something else we want to accomplish, that is).

We can also try hiring a freelancer to redesign our site, but make sure to check their references as this is an advanced job. Designing responsive websites requires a strong background in web design. This is not an area where we want to cut corners on price. Make room in our budget to pay for someone to do a thorough job so we do not have to revisit this issue again six months down the line.