UNIT 15.1 CREATE STRUCTURES AND STYLES AND PRODUCE A WEBSITE

Uncategorized

This unit explores methods provided in the form of a written report to demonstrate the ways to understand the common principles of website software. From web layout to understadnig file types, each element will be explained in detail to allow full undersanding of all aspects.

1.1 Determine what website content and layout will be needed for each page and for the site.

Website Content

Web content is the textual, visual, or aural content that is encountered as part of the user experience on websites. It may include—among other things—text, images, sounds, videos, and animations.

Source: (https://en.wikipedia.org/wiki/Web_content)

Textual web content – Builds the foundation of most web pages, added on the webpage as text blocks, can also include good internal links, and uses up little to no storage space.

Visual web content – Most commonly video and images, popular multimedia contents, can vary in efficiency based on the browser used, often use a hefty amount of storage dependent on file type used.

Aural web content – Different types of audio files can be added as part of the web content so as to increase the desirability of the website (SFX, UX, and general complimentary entertainment).

Website Layout

Header – Visible at the top of every page on the site. Contains information relevant to all pages (like site name or logo) and an easy-to-use navigation system.

Main content – The biggest region, containing content unique to the current page.

Stuff on the side – Information complementing the main content; information shared among a subset of pages & alternative navigation system.

Footer – Visible at the bottom of every page on the site. Like the header, contains less prominent global information like legal notices or contact info.

Source: (https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Common_web_layouts)

Example

A near perfect example of these elements in practice is the Adidas website (below)

1.2 Plan and create web page templates to layout content.

1.3 Select and use website features and structures to enhance website navigation and functionality.

Link The Logo To The Home Page

It sounds obvious, but some websites neglect this rule. This is a convention best followed as it is so widely implemented.

Mega Drop Down Menus

Mega drop-downs are large menu panels that typically drop down or fly out from a global nav bar. You can’t use a mega drop-down for every site. The main benefit of a mega drop-down is that they facilitate the display of many options at once.

Horizontal and Vertical Menus

A number of factors influence the decision to choose horizontal or vertical navigation, including design, usability and intention of content. Small websites often prefer horizontal type at the top of the site, while large corporate websites often use both horizontal and vertical type.

Sticky / Fixed Navigation

Sticky or fixed navigation does not disappear when the user scrolls down the website. Usually, sticky type is used on sites where the main call to action elements are situated on the primary bar.

1.4 Create, select and use styles to enhance website consistency and readability.

Choose Fonts Wisely

Headlines should be easy to scan, but usually, they aren’t very long so you can go for a more creative font here. For longer texts, you should use clear sans serif fonts. While serifs help the readability in printed media by supporting the reading flow, they do the opposite on the web. On screen, the little serifs can easily blur together, making it more difficult to read the text.

Keep it Short

While we don’t mind reading longer lines in print media, the optimal line length on the web is considered between 50-60 characters. If you make your lines much longer, your might scare your visitors off. Besides, long lines make it more difficult to focus and to correctly jump from one line to the next.

Repeat Layout Styles

This technique breeds consistency and it can work on multi-page sites or singular landing pages. The goal is to re-use similar elements all throughout the page, but with different content & graphics.

Keep Branding Consistent

Web branding is a deep topic and it’s more than a simple identity. You also need to consider page colours, textures, typefaces, padding, and icons/elements related to the brand. There are no right or wrong ways to brand, just some ways that work better for some websites.

1.5 Provide guidance on laws, guidelines and constraints that affect the content and use of websites.

Authorisation of Images and Copyright Content

The rule of thumb is that you must receive authorization from the creator in order to use his/her image (you’d be smart to get this in writing). Does this mean that every single one of the billions of pictures on the internet is either authorized by the creator or in violation of online images copyright? The answer is no – and this is where fair use comes into play.

Fair Use Laws

Fair use is an exception and limitation to the rights of exclusivity that are granted by copyright to the creator of a piece of work. The purpose of fair use is to provide limited use if it benefits the public. The factors that allow content classify as fait use are:

The purpose of use: educational, non-profit, scholarly, reporting, reviewing, or research

The nature of use: fact-based or public content (courts are usually more protective of creative works)

The amount and substantiality used: using only a small piece of the image, using only a small thumbnail/low-resolution version of the image

The market effect: you could not have purchased or licensed the copyrighted work

1.6 Explain what access issues may need to be taken into account.

Navigation

This is probably the most important accessibility issue and applies to any website. Whether people have a disability or not, if a site has not been properly designed to allow for simple navigation, some of the website’s information will be difficult to access.

Site Structure

Properly structured websites use levels of text that have been logically named to show the relationships between different areas of content. For web users without vision impairment, people can understand site structure and a page’s content naturally and quickly by scanning for titles or headings.

Text

Users should be able to easily increase or decrease text size. Text should also be able to be effectively displayed across a range of device types including desktop, mobile, and tablet. Proper colour contrast between text and backgrounds reduces challenges created by colour blindness or other vision impairment conditions.

Images

Using images rather than text to convey meaning or to navigate webpages prevents people from being able to properly access information.

Hyperlinks

Hyperlinks are one of the main features of websites, allowing people to easily navigate to other pages to seek out additional details of related information.

1.7 Explain when and why to use different file types for saving content.

Web File Types

.AVI — Audio/Video Interleaved – Standard video format supported on the windows platform. They do not stream, however, so you have to download the entire file before you can watch any of it.

.WAV — WAV(e) sound file – A basic and compressed sound file, usually used for short sound samples.

.TIFF — Tagged Image File Format – For really high quality images, but cannot be viewed through a browser.

.PNG — Portable Network Graphics – PNGs are a file format designed to be used in place of GIFs. They are usually slightly smaller, and sport advanced features like alpha-channel transparency and 24-bit colour support.

.MP3 — MPEG Layer 3 sound file – Singlehandedly caused a revolution. MP3 is a sound file format which is highly compressed, which allows download-happy file sizes and excellent quality.

.JPG/ .JPEG — Joint Photographic Experts Group file – Another very common image file format, mainly used for photos.

.PDF — Portable Document Format – Adobe Acrobat files were invented so that documents could be transferred between computers and indeed platforms, and still look the exact same, something which can’t be said about HTML files…

.ZIP — ZIP(ped) file – Zipped files are really groups of other types of files kept together and compressed a bit.

1.8 Store and retrieve files effectively, in line with local guidelines and conventions where available.

To conclude, it’s common practice that industry professionals are required to make themselves familiar with such information such as files types and web layout. These are simple aspects of marketing that can transcend the specialisation and be used for web building, graphic design and many other similar industries: highlighting the importance of understanding each point.