- Web Standard Fonts
- Web Safe Colours
- Screen Sizes
- Advantages and Disadvantages when designing in Coding languages
- Usability and Navigation conventions
- Content Management of files when designing for web
- Hosting Fees
- Image Formats
Web Standards are the formal, non-propriety standards and specification as stated by the World Wide Web Consortium. It is the consideration of the website as a whole by using HTML for the content structure and CSS for the design. By using CSS, it allows you to have a smaller file size as it takes some of the memory that would be used from HTML and puts it into a separate smaller file making it quicker to load. Using CSS alongside HTML allows for various media to be supported so it is more specific and makes it easier for a page to be printed if it is designed with a style sheet. HTML allows for websites to be accessible on all platforms and formats and this re-sizability works for font sizes too. While this is important, it does have the disadvantage of not all web browsers support CSS so this can create a problem when the style sheet is being interpreted.
Web Standard Fonts:
Not all fonts can be used online like they can be used for print. There are a few reasons for this:
Web Standard Fonts:
Not all fonts can be used online like they can be used for print. There are a few reasons for this:
- Web Browsers don't display all fonts correctly
- Computers installed with different operating systems have different fonts installed
- You can't install a font and use it without the permission of the designer
- Not all fonts display correctly online due to Web Typography
- Fonts can look different when they are being shown at a different size
Due to these factors, when you are Designing for Web and you are using text then, you need to use a font which is available for everyone meaning that the font needs to be one that is installed in every visitors computer. This can be a difficult task because not everybody has the same fonts as everyone else. From this, there are some standard fonts that have been determined so that they can be used on all platforms online (including mobiles and apps), can be legible and easy to use as well as being available on a wide range of computers:
"Common Web Safe Fonts"
Perez, A. L. (2008) "Common fonts to all versions of Windows & Mac equivalents" [Internet] Available from http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html (Accessed 18th November 2013)
|
Web safe Fonts are split into 4 types of fonts: Serif, Sans Serif, Monospace and Cursive. Serif and Sans Serif are the same for Web as they are for Print. Monospace fonts are fonts which are widely spaced whereas Cursive are fonts which are more decorative.
Examples of Web Safe Sans Serif:
- Arial
- Futura
- Gill Sans
- Impact
- Tahoma
Examples of Web Safe Serif Fonts:
- Baskerville
- Book Antiqua
- Garamond
- Georgia
- Palatino
- Times New Roman
Examples of Web Safe Monospace Fonts:
- Courier New
- Lucida Console
- Consolas
Examples of Web Safe Cursive Fonts:
- Copperplate
- Papyrus
LeBlanc, D. "CSS Font Stack" [Internet] Available from http://cssfontstack.com (Accessed 18th November 2013)
Another thing to consider with Web safe Fonts is the thickness of the font so that it is legible and readable when on screen.
 |
"Font Thicknesses on the Web"
Lopuck, L. (2013) "How To Choose Fonts For Your Website" [Internet] Available from http://www.dummies.com/how-to/content/how-to-choose-fonts-for-your-website.html (Accessed 18th November 2013)
|
In regards to font thicknesses, it is best to avoid fonts which are too lightweight as they are very small to read when used for body copy due to the fact that pixels are not too small themselves. Usually, a font which is a bit bolder is easier to translate onto the screen as it doesn't fade into the background.
To make this a bit easier, using CSS there is the ability to use a 'Font- Family'. This means that if you select a font and it is not available to use on a visitors computer, then the website will shift to a different font which is similar to your chosen font but it is web-safe.
 |
| Palatino 'Font-Family' Example |
Using Palatino as an example, if web designer had picked Palatino as a font and the visitor didn't have it, then the website would automatically select Book Antiqua as a font. In turn, if they didn't have Book Antiqua, it would go to the next font in the list which is Palatino. I they didm;t have Palatino then the website would just view using any Serif font. This gives you the opportunity to still have some control over the consistency of typeface whilst compromising for the viewer.
Web Safe Colours:
 |
"The RGB Colour Model"
Robbins, J. N. (2007) "Learning Web Design", 3rd ed., California: O'Reilly Media, Inc., p371
|
The colour mode normally associated with on-screen and web design is RGB, an additive colour mode where the colours are made up of the light on your computer monitor. Traditionally, there are 216 web-safe colours are made up for use on-screen via the RGB (Red, Green and Blue) colour mode. The amount of light in each colour is valued and described on a scale of 0 to 255, with 255 being at full capacity. The closer that the numbers are to 255, the closer the colour is to white. Any colour which is RGB can be described by a series of 3 numbers: a red value, a green value and a blue value.
When writing colour values into a CSS style sheet, they are usually show as a 6-symbol/digit combination which is known as a Hexadecimal Format. The Hexidecimal format is a 6-symbol combination of letters and numbers, starting with a #, that makes up the identity for a colour that can be used online. The 6-symbols are split into 3 combinations called Bytes which make up the colour components of Red Blue and Green of the colour itself. The numbers themselves are determined by the light source, with the lowest value being 0 and the highest being 255.
 |
| "Hexidecimal RGB Values" Robbins, J. N. (2007) "Learning Web Design", 3rd ed., California: O'Reilly Media, Inc., p237 |
The first byte represents the Red Colour value, the second byte makes up the Green Colour value and the third makes up the Blue Colour value.
 |
| "Hexidecimal Numbering System" Robbins, J. N. (2007) "Learning Web Design", 3rd ed., California: O'Reilly Media, Inc., p237 |
The numbering system for the colours uses 16-digits: 0-9 and A-F for representing the quantities 10-15. F represents the number equivalent of 255 whereas 0 is the number equivalent of 0 showing the lack or large amount of colour.
 |
| Contextual example of Hexidecimal and RGB Colour Percentages |
To be able to get these values, you can use a colour picker in Photoshop or Illustrator, which will give you the value of a colour using the number/percentage amounts of red. blue and green individually as well as providing the Hexidecimal equivalent of that particular colour.
Image Formats:
In regards to image formats for web, the most common ones are GIF, JPEG and PNG as they all offer compression to shrink a final image in preparation for download. Each format uses different colour models, forms of compression and transparency effects.
Lossless compression preserves all detail whereas Lossy compression sacrifices detail to make the file as small as it can be. Colour depth refers to the number of colours an image format contains. Colour depth is measured in bits- a higher bit value offers a higher total cloud count. An 8-bit colour depth is limited to 256 colours whereas a 24-bit colour depth can go over 16million colour options.
GIF stands for Graphic Interchange Format and are files which are usually small and can be used cross-platform thereby making it versatile. They are most appropriate for images which have flat colour and hard edges or when transparency or animation is required. It uses a lossless compression format which is best suited to large areas of flat colour. GIFs are indexed colour images as the colour depth in a GIF file supports no more than 256 colours in one image which limits its use to compressing only a few colours. It is possible to save images with a large amount of colour information as a GIF however this would compromise the image quality.
JPEG stands for Joint Photographic Experts Group and works best for photographs or images with smooth colour blends. It has a high 24-bit colour depth which is well suited to photographs and colourful detailed imagery as it has the capability of displaying millions of different colours. JPEG's use lossy compression which means that detail is discarded for a smaller file size yet this is usually not noticeable for most images at most compression levels. However, the more you compress an image, the more the image quality suffers. Despite this, if an image has been compressed with high levels of JPEG compression, you can sometimes see blotches and squares which are referred to as artifacts. JPEG's need to be decompressed before they are displayed as it takes a web browser longer to decode and assemble a JPEG then a GIF.
PNG stands for Portable Network Graphic and these files can contain any image type and are often used as a substitute for GIFs. The reason for this is because they offer 2 modes of colour storage and have a large 24-bit colour depth so, even though they are lossless, they preserve all the colour and detail information. They can contain images with transparency or particle transparency as they have 2 mode of transparency, 1-bit and 8-bit.
So that the image is quick to download and is of a high quality, you need to make sure that you select the correct format for the image.
Hosting Fees:
For the pages of a website to be on the internet, they must be on a web server. Some desktop computers have software for this but otherwise, you would have to rent some space on a server. This is called finding a host site.
A hosting service is where individuals and companies can make their own website and businesses can rent space for them to have them put on the internet. Their service usually encompasses the technology and technical support necessary to maintain a running website. There are many different types of hosting services available:
Shared Hosting:
A hosting environment where server space is shared between your website and others, including the space and the software used. This is a more affordable option because the space is shared out amongst your website and other people but it can be slower to use.
Dedicated Hosting:
This is where you have the entire server to yourself which allows for faster performance as you are not sharing with anybody. You will be responsible for the cost of the entire server but this is a good choice for a large website which requires a lot of system resources and higher levels of security
Collocated Hosting:
Where you purchase your own server and have it housed at a web hosts facilities but makes you responsible for the server. The advantage to this is that it can make you be in full control of the server so that you can install any programmes, applications or scripts you need.
Free Hosting:
Some companies, however, do give away some space for free but the downside is that you would not have your own domain name and it will have their advertising on them. There are options of free hosting sites such as setting up blogs or using social networking or online community sites. Despite this, connection can be slow and websites can go down frequently.
Advantages and Disadvantages when Designing in Coding Languages:
When designing for the web, there are 3 main types of coding which you are likely to come across: HTML, CSS and Java Script.
CSS stands for Cascading Style Sheet and is used for specifying layout and style properties of a website. It allows a multiple of web characteristics to be applied to one particular website, such as fonts, colours and rollover effects, and keeps all the information in one place. CSS are usually embedded into HTML code and an advantage of CSS is that it is easily editable so changes can be made from the style sheet alone and it will automatically change the website. This gives the designer more control over the aesthetic of their website as it is much easier to maintain. However a disadvantage is that not all browsers are compatible with CSS so the information can be interpreted differently on different computers.
Java Script is a programming, interpretive scripting language which deals with producing functions that have been written into HTML code. The information is usually executed on the user's server so it saves on bandwidth making it cheaper to run. Another advantage to Java is that it can be developed by third-parties so add-ons can be made so as to improve the functionality of a particular site. A downside to using Java is that it can be used to exploit a system and therefore poses security issues.
Screen Sizes:
The screen size of something is the physical size of an area where an pictures and video is displayed. The size of a screen is usually dictated by the diagonal length of a screen when measured from opposing corners. This is different to display resolution which refers to the amount of distinctive pixels in each dimensions.
When designing for web, the main commercial web designs were made to fit a 800 x 600 pixel computer monitor which is the smallest significant monitor still in use but with the introduction of wide-screen, like iMac, there has been a change of making web pages 1024 x 768 pixel in width on average for high resolution monitors.
Despite the typical intention of designing for a set size, it is especially important to consider designing for a range of formats due to the range of screen sizes and formats available. When a layout for a website changes in regard to the format it is being viewed on, this is known as Responsive Design.
The idea of Responsive design is to make the web page flexible so that it works in any size and format, particularly as many platforms can change from landscape to portrait instantly. This can be manipulated through the use of images and grids to make it easier to scale down the information so it works on a large range of platforms, sizes and formats.
Usability and Navigation Conventions:
For a website to be useable to the wider audience, the website needs to be simple. There are many ways in which you can add this to your website design through these considerations.
A great website is consistent by having the navigation bar and page links in the same place on every page. By moving your navigation, it will confuse the user so they will go to a different site to find the information they want.
By having all links and tabs clearly marked throughout the website, it will allow for visitors to easily navigate their way around the website. This goes for the use of icons in websites as well- if the buttons image doesn't need explaining then it is clear. The use of breadcrumbs might be ideal so that the user can see where they have been and where they may go next.
For button functionality, make sure all of the buttons work in the same way and have an intuitive reaction to when the cursor is placed on them so that the user knows it has been selected. You need to make sure that all the button links work when the website is produced and the buttons need to stand out so that the user knows that it is one of the website features.
A lot of websites run of a visual hierarchy where the most important information is at the top of the site and the least important near the bottom. This gives automatic processing of information for the visitor as users will know where to go. In regards to content, the use of headings and sub-headings is ideal so that all the information is set out in a structured and organised way which is easy to find.
Content Management of Files:
There are two ways in which content management can be interpreted when it comes to web design and this is based on whether your website is hand-coded or if you are someone who does't know how to program.
When using hand coded web design in software like Dreamweaver, you need to manage the content of your website by having all of your content in a folder called the Root Folder. Within that folder should be all of your pages in files. Within the Root Folder, you should have a separate other folder called Images which contains all of the images for the website inside which keeps everything all together. This is so that the server can find all of the necessary files and images for the website when it is online which makes it quicker to download.
If you are not able to code websites, Content Management Systems can be used. Content Management Systems let non-technical web users be able to update their website content without using any HTML or code. This uses software that uses a database to manage and organise information. If a visitor makes a request on the website for particular information, the CMS will select the content and applies it tot he chosen interface template. This means that the software does a lot of the work for the user so people who don't know any coding are able to produce a custom made website.
References:
Shea, D. and Holzschlag, M. (2005) "The Zen of CSS Design" California: Peachpit Press
Robbins, J. N. (2007) "Learning Web Design", 3rd ed., California: O'Reilly Media, Inc.,
Weinman, L. (2003) "Designing Web Graphics. 4" 4th ed., Indiana: New Riders Publishing
Gordon, B. and Gordon, M. (2005) "The Complete Guide to Digital Graphic Design" 2nd ed., London: Thames & Hudson
In regards to image formats for web, the most common ones are GIF, JPEG and PNG as they all offer compression to shrink a final image in preparation for download. Each format uses different colour models, forms of compression and transparency effects.
Lossless compression preserves all detail whereas Lossy compression sacrifices detail to make the file as small as it can be. Colour depth refers to the number of colours an image format contains. Colour depth is measured in bits- a higher bit value offers a higher total cloud count. An 8-bit colour depth is limited to 256 colours whereas a 24-bit colour depth can go over 16million colour options.
 |
"What's The Difference Between JPEG, PNG and GIF?"
sultanrana (2013) "What's The Difference Between JPEG, PNG and GIF?" [Weblog] Technology Tutorials 13th February Available from http://sultanrana.wordpress.com/2013/02/13/whats-the-difference-between-jpg-png-and-gif/ (Accessed 25th November 2013)
|
JPEG stands for Joint Photographic Experts Group and works best for photographs or images with smooth colour blends. It has a high 24-bit colour depth which is well suited to photographs and colourful detailed imagery as it has the capability of displaying millions of different colours. JPEG's use lossy compression which means that detail is discarded for a smaller file size yet this is usually not noticeable for most images at most compression levels. However, the more you compress an image, the more the image quality suffers. Despite this, if an image has been compressed with high levels of JPEG compression, you can sometimes see blotches and squares which are referred to as artifacts. JPEG's need to be decompressed before they are displayed as it takes a web browser longer to decode and assemble a JPEG then a GIF.
PNG stands for Portable Network Graphic and these files can contain any image type and are often used as a substitute for GIFs. The reason for this is because they offer 2 modes of colour storage and have a large 24-bit colour depth so, even though they are lossless, they preserve all the colour and detail information. They can contain images with transparency or particle transparency as they have 2 mode of transparency, 1-bit and 8-bit.
 |
"Choosing the Best Colour Format"
Robbins, J. N. (2007) "Learning Web Design", 3rd ed., California: O'Reilly Media, Inc., p371
|
Hosting Fees:
For the pages of a website to be on the internet, they must be on a web server. Some desktop computers have software for this but otherwise, you would have to rent some space on a server. This is called finding a host site.
A hosting service is where individuals and companies can make their own website and businesses can rent space for them to have them put on the internet. Their service usually encompasses the technology and technical support necessary to maintain a running website. There are many different types of hosting services available:
Shared Hosting:
A hosting environment where server space is shared between your website and others, including the space and the software used. This is a more affordable option because the space is shared out amongst your website and other people but it can be slower to use.
Dedicated Hosting:
This is where you have the entire server to yourself which allows for faster performance as you are not sharing with anybody. You will be responsible for the cost of the entire server but this is a good choice for a large website which requires a lot of system resources and higher levels of security
Collocated Hosting:
Where you purchase your own server and have it housed at a web hosts facilities but makes you responsible for the server. The advantage to this is that it can make you be in full control of the server so that you can install any programmes, applications or scripts you need.
Free Hosting:
Some companies, however, do give away some space for free but the downside is that you would not have your own domain name and it will have their advertising on them. There are options of free hosting sites such as setting up blogs or using social networking or online community sites. Despite this, connection can be slow and websites can go down frequently.
Advantages and Disadvantages when Designing in Coding Languages:
When designing for the web, there are 3 main types of coding which you are likely to come across: HTML, CSS and Java Script.
 |
| HTML within Dreamweaver |
HTML stands for Hypertext Mark Up Language is a mark up language which is concerned with the presentation of a website and not the programming. It uses tags to structure the siteThe code is received by the user's computer and deciphered by browser software so that the formatted documents can be displayed by the browser that renders the page on screen. Images, Flash animation and other content are received and rendered as part of this process. The advantage of HTML is that it is a free language conceived by users for users and can be read by any type of computer with the same end result. However, the disadvantages are that web pages are stored on several files and designs are limited in what they can produce.
 |
| CSS Style Sheet within Dreamweaver |
 |
| Java Script within Dreamweaver |
Screen Sizes:
The screen size of something is the physical size of an area where an pictures and video is displayed. The size of a screen is usually dictated by the diagonal length of a screen when measured from opposing corners. This is different to display resolution which refers to the amount of distinctive pixels in each dimensions.
 |
"Screen Resolutions Chart" by Robert Giordano
Design215 (2010) "Screen Resolutions Chart" [Internet] Available from http://www.design215.com/toolbox/screen_resolutions.php (Accessed 25th November 2013)
|
Despite the typical intention of designing for a set size, it is especially important to consider designing for a range of formats due to the range of screen sizes and formats available. When a layout for a website changes in regard to the format it is being viewed on, this is known as Responsive Design.
 |
"The Baker Street Enquirer" by Ethan Marcotte
Kayla Knight (2011) "Responsive Web Design: What Is It and How To Use It?" [Internet] Available from http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ (Accessed 25th November 2013)
|
Usability and Navigation Conventions:
For a website to be useable to the wider audience, the website needs to be simple. There are many ways in which you can add this to your website design through these considerations.
 |
| Navigation and Links between PagesCameron Chapman (2010) "Information Architecture 101: Techniques and Best Practises" [Internet] Available from http://sixrevisions.com/usabilityaccessibility/information-architecture-101-techniques-and-best-practices/ (Accessed 25th November 2013) |
By having all links and tabs clearly marked throughout the website, it will allow for visitors to easily navigate their way around the website. This goes for the use of icons in websites as well- if the buttons image doesn't need explaining then it is clear. The use of breadcrumbs might be ideal so that the user can see where they have been and where they may go next.
For button functionality, make sure all of the buttons work in the same way and have an intuitive reaction to when the cursor is placed on them so that the user knows it has been selected. You need to make sure that all the button links work when the website is produced and the buttons need to stand out so that the user knows that it is one of the website features.
A lot of websites run of a visual hierarchy where the most important information is at the top of the site and the least important near the bottom. This gives automatic processing of information for the visitor as users will know where to go. In regards to content, the use of headings and sub-headings is ideal so that all the information is set out in a structured and organised way which is easy to find.
Content Management of Files:
There are two ways in which content management can be interpreted when it comes to web design and this is based on whether your website is hand-coded or if you are someone who does't know how to program.
 |
| Content Management of files in Root Folder |
If you are not able to code websites, Content Management Systems can be used. Content Management Systems let non-technical web users be able to update their website content without using any HTML or code. This uses software that uses a database to manage and organise information. If a visitor makes a request on the website for particular information, the CMS will select the content and applies it tot he chosen interface template. This means that the software does a lot of the work for the user so people who don't know any coding are able to produce a custom made website.
References:
Shea, D. and Holzschlag, M. (2005) "The Zen of CSS Design" California: Peachpit Press
Robbins, J. N. (2007) "Learning Web Design", 3rd ed., California: O'Reilly Media, Inc.,
Weinman, L. (2003) "Designing Web Graphics. 4" 4th ed., Indiana: New Riders Publishing
Gordon, B. and Gordon, M. (2005) "The Complete Guide to Digital Graphic Design" 2nd ed., London: Thames & Hudson
No comments:
Post a Comment