Layout & Responsive Web

Layout

In this section we introduce Layout and the concept of the responsive web.

In a previous section the HTML elements div and span were introduced.

Recall that div is a block level element and that span is an inline element. So far, the placement of the elements has not been specified. However, to design and implement websites it is required to be able to adjust the placement of HTML elements on a web page.

CSS treats each HTML element as a box. The box is either a block level element or an inline element.

Block level elements always start on a new line and act as the main building blocks of any layout implemented on a web page. As we have seen using CSS it is possible to adjust the width and height of each of these boxes using the width and height attributes.

If an HTML element is nested inside another HTML element then the outer HTML element is called the containing element or the parent element. By nesting HTML elements inside another HTML element the parent element can be positioned on the page and all of its nested element are positioned relative to the position of the parent element.

Using this idea it is common to see HTML element nested inside a div element. For example consider a footer on the bottom of a webpage, which contains the contact details of the author and the logo of the website. These components of the footer could be nested inside a div element.

CSS has a few different positioning schemes. Positioning schemes control how elements are laid out on a webpage. The positioning schemes supported by CSS are normal positioning, relative positioning, fixed positioning and absolute positioning.

Normal positioning

In normal positioning, block level elements appear on a new line causing each new block level element to appear lower down the page. Normal positioning is the default positioning scheme used by CSS so it is not required to define this positioning scheme in CSS. An example of normal positioning is shown in the following example.

Relative positioning

Relative positioning allows for a position to be specified relative to the position the element would have been placed if normal positioning scheme was used.

Absolute positioning

In absolute positioning elements are taken out of the normal positioning scheme and no longer affect the position of other HTML elements on the web page. The position of the HTML element is given using an offset from the top left corner of the page.

Fixed positioning

The fixed positioning scheme fixes the position of an element relative to the browser window.

Floating elements

The float property allows elements to flow inside the parent element. The other elements nested inside the parent element will flow around the floated element. Floating is used extensively to achieve web pages layouts. The example below demonstrates how float can be used.

The float property can be used to make HTML elements float side by side on a page.

The clear property allows the specification that no element should touch a side of a floating element. The value of the property can be either left, right, both or none. In the example below the third paragraph element has the class clear. The CSS rule for the class clear specifies that no element should touch the left side of the paragraph element. The result is that the element is forced onto a new line so that the second paragraph element does not touch the left hand side of the third paragraph element.

The float property allows for the creation of multicolumn layouts, these are common of modern websites. Multicolumn sites are facilitated by creating two CSS classes. One for the left hand column and one for the right hand column. Both CSS classes have there width and float attributes set. The result is a common website layout.

It is equally possible to create a three column layout.

Responsive Web

It is common with modern day Web browsing habits that visitors to websites use a variety of different devices with various operating systems and various Web browser implementations. This variability causes problems for web developers. As a web designer it is important that the website is available to the widest audience possible, after all, the website is there for a reason. By developing a website that is designed only to display properly for people using a specific type of device and a specific operating system with a specific browser may exclude some of your potential audience. For this reason it is important to consider these things when designing a website.

Screen size is perhaps one of the most important consideration when designing a website.

Consider viewing a website on a mobile device, the device may have a screen resolution of 800 pixels by 600 pixels. If the width of a website is 1000 pixels then when the page loads there will be a horizontal scroll bar, which is not ideal as there is content which is excluded from view from the user. There are tools to help design websites that are viewable independent of the screen size they are being viewed on. Google chrome developer tools contains such a tool. From the table below it is possible to see the trend in the screen resolution for web user. In general there is a trend for Web users to using devices with higher and higher screen resolutions.

Date	1920x1080	1366x768	1280x1024	1280x800	1024x768	800x600	Lower
January 2015	32.7%	16%	33%	7%	5%	4%	0.3%	2%
January 2014	34%	13%	31%	8%	7%	6%	0.5%	0.5%
January 2013	36%	11%	25%	10%	8%	9%	0.5%	0.5%
January 2012	35%	8%	19%	12%	11%	13%	1%	1%
January 2011	50%	6%		15%	14%	14%	0%	1%
January 2010	39%	2%		18%	17%	20%	1%	3%
January 2009	57%					36%	4%	3%
January 2008	38%					48%	8%	6%
January 2007	26%					54%	14%	6%
January 2006	17%					57%	20%	6%
January 2005	12%					53%	30%	5%
January 2004	10%					47%	37%	6%
January 2003	6%					40%	47%	7%
January 2002	6%					34%	52%	8%
January 2001	5%					29%	55%	11%
January 2000	4%					25%	56%	15%

For reference a set of popular devices and their screen resolutions are listed below.

A

Device	Size	Resolution
iPhone 6	4.7 inches	1334x750
iPhone Plus 6	4.7 inches	1920x1080
iPad air 2	9.7 inches	2048x1536
MacBook air 3 (2015)	12 inches	1440x900
Nexus 9	8.9 inches	2048x1536
Dell XPS (2015)	15 inches	3840x2160

Because of the variability of display size and resolution it is difficult to design web pages that look excellent on all screen sizes. Instead all a web developer can do is a best effort attempt and design pages with a width between 960 and 1000 pixels. As for the height of a page, it is usually assumed that 600 pixel high is suitable.

Layout styles

There are two standard layouts for web pages, they are fixed width and liquid layouts.

The fixed width layout fixes the width of the content of a webpage, filling any remaining space with empty space.

The liquid layout allows the content on the page to stretch and contract with different screen sizes. Neither of the solutions are overall better than the other, there are advantages and disadvantages to both The table below summaries the advantages and disadvantages of both layout styles.

Fixed width layout		Liquid layout
Advantages	Disadvantages	Advantages	Disadvantages
Pixel values are accurate at controlling size and positioning of elements. The web developer has greater control of where HTML elements are positioned on the page. It is possible to control the length of lines. The size of an image will remain the same relative to other content.	The remaining space either side is empty space if the screen width exceeds the width of the content. If the users screen is much higher resolution than the content was designed for the font size can look small and be hard to read. If the user changes the font size then the layout of the text inside the fixed width containers can cause the content to be unreadable. Web sites that use this layout will often take up more vertical space as space is wasted either side of the fixed width area.	Pages expand to fill the entire browser windows. The design is capable of adapting to user settings such as font size.	If the width of the elements are not controlled properly then the design can look very different on different device setups. If the user has a wide browser window then lines of text can become very long reducing readability. HTML element can overflow their parent elements if the width attributes are not set correctly.

An example of fixed width and liquid layout can be found in the resources accompanying this section.

Summary

div elements are often used as containing elements to group together components of a web page.
By default Web browsers display block level elements using normal flow.
The float property moves content to the left or right of the parent element.
Web pages can be either fixed width or liquid layouts.

HTML5 Layout

HTML5 introduced a set of new HTML elements that are intended to be used to define layout. The tags are intended to be used instead of div elements.

The new HTML elements are aside,nav,header,footer,section and article. These new HTML elements have semantic meaning. They are intended to help the web developer to describe the structure of the web page. This is helpful for users who do not view the web page in the traditional way or for search engines to find the relevant content on the webpage to index.

`header` and `footer`

The header and footer HTML elements are used to define the header and footer of the web page or section.

`section`

The section HTML element is used to define a section of the web page. According to the World Wide Web Consortium's HTML5 documentation: "A section is a thematic grouping of content, typically with a heading.".

`nav`

The nav HTML element is used to define the navigation on a web page. Not all links on a page should be part of the navigation rather the intent of this element is to group links that form part of the essential navigation on the page.

`article`

The article HTML element is used to define a section that is self contained. The section could be considered out of context from the remainder of the web page and still make sense.

`aside`

The aside HTML element is used to define a section of text that is related to the main content of the page but is not essential.

Obstacles with HTML5

HTML5 is a recent development. Some older browsers do not support the new HTML elements. However those users using older browsers should not be disadvantaged while using the website. To overcome the lack of support for the new HTML elements in old browsers there are two 'hacks'. The first is a CSS hack and it states that all of the new elements should be treated as block level elements. The second is to allow CSS rules to be applied to the new elements. The latter primarily intended for versions of Microsoft's Internet Explorer prior to version 9. The two following snippets should be placed in the head of the HTML document.

CSS hack


header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

HTML5 shiv


<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

An example of HTML5 layout is provided in this section's resources (html5-layout.html).

Web Design

Now that the basic concepts of HTML and CSS have been introduced we turn our attention to the process of designing a website. From the outset of designing a website the website has a particular purpose. That purpose has an audience and that audience has requirements and motivations, all of which affect design decisions.

Intended audience

Every website should be designed for its target audience. It is therefore important to understand the intended audience. Understanding the intended audience including understanding their backgrounds and their motivations for visiting the website. For example, if the website is an eCommerce website that sells some product your intended audience is anyone connected to the internet, after all presumably the intention is to sell as many of the product as is possible. The audience the website is intended for are those people who wish to purchase your product. It might be worth considering the following points when trying to understand your audience.

What is the age range of your target audience?
Will your audience be gender biased?
What languages will your audience be familiar with?
Will you audience have a common experience before visiting the website?
What is the average income of your audience?
What level of education will your audience have?
How familiar are your audience with navigating websites?
What kind of device will your audience use?

One technique that is often employed by web developers is to invent some users, when it comes to making a design decision the web developer will put themselves in the mindset of the supposed user and allow the outcome to influence the design.

Motivations for visiting a website

The design of a website is influenced by the motivation of the users who visit it. Therefore a web designer should consider why a user uses the website. There are two types of questions that should be asked when trying to establish why a user visits a website. What are the motivations of the user for visiting the website? What is the goal of the users to the website? Consider, again, an eCommerce website. The motivation of the user is to purchase some product and the goal is to leave the website having completed a successful contractual agreement to purchase goods or services.

Knowing who your audience is and what their motivations are it is any good web designers ambition to deliver to their audience what they want. For this it is required that the web designer understands what information the user needs to complete their goals. The web designer may also wish to add additional information to support their users. It is essential that the additional information does not burden the user with too much information. It is advantageous to abide by the idea The right information, at the right time and not too much. A web designer may consider the following questions when establishing what information to include.

Will the visitors be familiar with the subject area? Will they need an introduction?
Will the visitors be familiar with the product or service?
Will the visitor know what service the website provides?
Will the visitor be familiar with how the information is presented on the web site?

Website and Web page structure

Having an understanding of why and how your audience will access the website is essential but allowing the audience to achieve what they set out to do is essential for a website to be successful. Think about any popular website, most probably the user is able to complete the task the website was designed to do easily. This motivates the study of user interface design. For a user to complete a task the process of completing the task must be obvious and should be as obstacle free as possible. This means considering the types of device the audience will be using and how you intend the users to navigate the website.

A common way to plan the navigation system of a website is to create a sitemap. A sitemap is a pictorial representation of the links betweens the pages in a website. Each of the blocks represent a webpage and a line between two blocks indicates a links from that page to the next. When designing how the pages of a web site link together remember to consider the visitors and how the navigation can help the users to achieve their goals.

Another important concern is the layout of the page. We have looked at the how to achieve a particular site layout using HTML5 and CSS3 but now we will concentrate on designing the structure of a website. Web users are accustomed to particular Web page layouts. This familiarity with particular layouts makes them ideal candidates when designing your own web pages. One technique which is often employed for designing web pages is wireframe diagrams. A wireframe diagram is an outline of the visual appearance of a web pages which are all of the components spatially located. Wireframe diagrams can be as basic as hand drawn diagrams of a page layout or diagrams drawn using special software such as Microsoft visio, Photoshop or online tools like MockingBird.

Web Accessibility

Web accessibility is about making a website accessible to all Web users independent of their ability. In the most part Web accessibility concerns ensuring that a website is accessible to users with disabilities to support their ability to understand, navigate and interact with the website. Web accessibility includes people with visual, auditory, neurological and cognitive disabilities. The Web accessibility imitative (WAI) provides case studies and guidelines.

The Web accessibility the World Wide Web Consortium (W3C) has published a set of guidelines for web authors to consider and implement when designing Web sites and web content. The Web Content Accessibility Guidelines (WCAG) version 2.0 was published by the W3C and is currently the latest version of the guidelines. The objective of the WCAG is outlined in the abstract to the document:

"Web Content Accessibility Guidelines (WCAG) 2.0 covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these. Following these guidelines will also often make your Web content more usable to users in general."

In short the WCAG version 2 makes the following recommendations.

Perceivable
- provide text alternatives for non-text content.
- Provide captions and other alternatives for multimedia.
- Create content that can be presented in different ways, including by assistive technologies, without losing meaning.
- Make it easier for users to see and hear content.
Operable
- Make all functionality available from a keyboard.
- Give users enough time to read and use content.
- Do not use content that causes seizures.
- Help users navigate and find content.
Understandable
- Make text readable and understandable.
- Make content appear and operate in predictable ways.
- Help users avoid and correct mistakes.
Robust
- Maximize compatibility with current and future user tools.

Legal obligation

In addition to the ethical obligations to Web accessibility there is a legal obligation under UK law to ensure Web accessibility. The Equality Act 2010 (EQA) which came into force in October 2010 was brought in to statute to address concerns with disability discrimination that were overlooked or unenforceable in the Disability discrimination Act 1995. To avoid ambiguity and confusion over the interpretation of the Equality Act 2010 a Statutory Code of Practice has been published which provides guidance on how the Act should be interpreted.

Although the Equality Act does not expressly refer to websites the Act covers the delivery and provision of services. As the provision of a website can and is considered as a service the Act is considered to cover the provision of Web resources. The Equality Act 2010 imposes a responsibility on the service provider, the web designer and implementer, to make reasonable adjustments to enable disabled persons to access the service. In the Equality Act 2010 Section 20(6) it infers that where the service is the provision of information there is a responsibility on the service provider to provide the information in an accessible format. In the context of websites this could mean that the website should be able to be viewed without a stylesheet or the site should still be accessible when viewed in a larger font. The Act required the service provider to take positive action to ensure that disabled people can access the service, it is not sufficient to avoid the discrimination of disabled people. The Statutory Code of Conduct provides an example of how the Equality Act 2010 may be applied to website.

"A provider of legal services establishes a website to enable the public to access its services more easily. However, the website has all of its text embedded within graphics. Although it did not intend to discriminate indirectly against those with a visual impairment, this practice by the provider places those with a visual impairment at a particular disadvantage because they cannot change the font size or apply text-to-speech recognition software. They therefore cannot access the website. As well as giving rise to an obligation to make a reasonable adjustment to their website, their practice will be indirect disability discrimination unless they can justify it."

In the provision of services the Equality Act 2010 requires reasonable adjustments are made to make websites accessible, but what is "reasonable adjustments? The Statutory Code of Conduct suggests that when considering what constitutes a reasonable adjustment one should consider the financial position of the service provider, the amount of resources that have been invested in making adjustments to date and the extent of any disruption caused to the service provider by making the adjustments. The impact for this is that large companies have a greater obligation to ensuring Web accessibility over smaller companies and personal web authors. It would be hard for a large company to justify not making reasonable adjustments whereas the author of a personal webpage or a charity may have a better defence if they can show that the discrimination was not intentional and that they cannot afford to make the adjustments. To date there have been no prosecutions under the Equality Act 2010 regarding Web accessibility so the exact interpretation of the law is unknown.

It would be reasonable to assume that if a website adheres to WCAG then it would not be possible to show that the discrimination was intentional and would help in the defence of a prosecution. Of course it should not be a web designer's objective to comply with the Equality Act 2010 just because it is a legal obligation. The ethical and moral factors should weigh heavily, after all a website has a purpose and that purpose is to be consumed by its intended audience whether they are disabled or not.