Web Design Coding

Here is a link to some of the coding experience I have:

http://www.codecademy.com/tristangreenhill

HTML is a coding language used for creating websites, including the information shown in it. From my personal experience I know that HTML "tags" most commonly come in pairs like <h1> and </h1>, although some tags represent empty elements, therefore they're unpaired, for example <img>. Like brackets, tags work in a similar sense, the first one starting and the second one endings (also called opening and closing tags). Web designers add texts, comments, further tags (tags within tags) and any other text-based content. The web browsers read the HTML coding then composes them into visible or audible web pages. The HTML coding of course is not shown on the web page, just used to interpret the page content. HTML forms the layout of website (like building blocks). It can embed scripts, which are written in other code languages such as JavaScript which then affect the behaviour of the HTML web pages.

JavaScript is a computer programming language. It is more or less for the functions of the website. JavaScript is most commonly used to write functions that are then added/included from web pages (HTML and JavaScript work hand-in-hand. HTML produces the "skeleton" of a webpage, whereas the JavaScript coding works as the interaction within the webpage). JavaScript code can run locally in the user's browser (rather than on a remote server), the browser can respond to user actions quickly. JavaScript code can detect user actions that HTML alone can't. JavaScript is the only language that most popular browsers share support for.

Example: var x; //defines the variable x, although no value is assigned to it by default

var y = 2; //defines the variable y and assigns the value of 2 to it

CSS (cascading style sheets) is designed primarily allow the separation of document content (written in HTML) from document presentation. CSS includes elements such as the colours and fonts. The separation of this can improve content accessibility, providing more flexibility and control in the specification of presentation characteristics. CSS enables multiple pages to share formatting, thus reducing the complexity and repetition in the structural content. CSS facilitates publication of content in multiple presentation formats based on nominal parameters. Nominal parameters include explicit user preferences such as: different web browsers, the type of device being used to view the site (Computer or mobile internet device), the geographic location of the user and numerous other variables.

selector [, selector2, ...] [:pseudo-class] {
 property: value;
 [property2: value2;
 ...]
}
/* comment */

Research on Website Design Issues

Here are some of the points that website designers need to consider:

Aesthetic qualities (look at feel of the site)
Access Speed (how quick the site loads)
Content is King (the message the website is trying to get across is displayed correctly and includes the correct information. Content must be up-to-date and maintained)
Web Standards (W3C - Perceivable, Operable, Understandable, Robust)
Websafe colours (sticking to defined colour palette and the codes that make up those colours. Only 216 of 256 colours that display consistently on any monitor or web browser that is capable of displaying atleast 8-bit colour. Examples: http://www.w3schools.com/html/html_colors.asp)
Image formats (apparently only svg, jpeg, psd and gif files show in the creation of a webpage)
Font Families (web standards - using fonts that display consistently on different platforms and monitors as well as using appropriate font styles for content.)
Fluid vs Fixed (Fluid is when the website re-sizes as you re-size the window it's displayed in. Fixed being where it does not re-size.)
Responsive Web Design (providing optimal viewing experience e.g. website responds to the environment, depending on the device it's being used on. Rather than having a fixed unit of pixels you code it as a percentage for better scaling on different platforms.)
Layout e.g. HTML divs, tables, layers, CSS positioning (what coding is it using)
Advantages of HTML5 over older HTML versions (extra functions and features. HTML5 backwards compatible)
Readability (how easy it is to read)
Usability (how easy it is to use the website)
Consistency (how consistent the website design is)
Navigation (how easy it is to navigate the website)
Accessibility e.g. colours, navigation, target audience, fonts (accessibility for those with special needs or other health issues such as bad sight or hearing. Tailored for whoever the site is targetted towards.)
Cross browser compliance (do they work on different browsers)

Redbubble - http://www.redbubble.com/

Aesthetic qualities: The website looks well laid out, clear and concise.
Access speed: It loaded quite quickly as there's not too much for it to instantly load on the main page.
Content is king: The content is good, straight away you can see what the site is about. It doesn't make you read through loads of irrelevant content to find what you want. The site is maintained as work is up-to-date.
Web standards: W3C shows three errors in total. They were all minor. Missing the more than sign to close the code before entering a new one.
Websafe colours: The colour palette is simple, it works, and consistent. With simple colours like red and white it should display that way on all combinations of monitors and computers.
Image formats: The images are saved as jpegs.
Font families: The site uses mainly just one font type, it's simple and easy to read. It is consistent and just used for links to the rest of the site in a bar located to the left of the page. There is also a use of a smaller/larger font size for relevant information.
Fluid/fixed: The website is fluid. It scales when you alter the size of your window.
Responsive Web Design: All interactive parts of the site work as they should do. No faults with the site when using it on an iPhone 3.
Layout: The coding layout of the site is mainly based on divs and classes. Within HMTL body there are a series of divs corresponding with the classes on CSS. This is so they can use a selection of layouts but they stick to the selection they have made, not varying the style for other parts of the site (consistent).
HTML5 or older version: Redbubble uses HTML5. <!DOCTYPE html>
Readability: There isn't much to read on this site but it is clearly laid out and easy to read. It is not cluttered.
Usability: The site is very user friendly. There aren't many things you need to click on to find what you want as the menu is very straightforward and well positioned (to the left) on the webpage.
Consistency: The layout and fonts are very consistent.
Navigation: Very simple to navigate.
Accessibility: The site is designed for artwork and it is clearly tailored to that.
Cross browser compliance: It worked fine on Google Chrome, Safari, Internet Explorer 8.

Blackboard - https://blackboard.cityofbristol.ac.uk/webapps/portal/frameset.jsp

Aesthetic qualities: The website isn't laid out too well. There is information everywhere with no clear/consistent layout. Initially it doesn't look very appealing.
Access speed: Doesn't load up too quickly as you have to log in multiple times and often does not allow access. (Often have issues using it at college but logging in isn't so much of a nuisance at my own home).
Content is king: The website is filled with content, it definitely has a lot of it and it has what you need. The website is maintained well as information is always updated.
Web Standards: W3C shows that https://blackboard.cityofbristol.ac.uk/webapps/portal/frameset.jsp has 6 errors and 4 warnings. (Line 1, Column 1: no document type declaration; implying "<!DOCTYPE HTML SYSTEM>), (Line 3, Column 30: required attribute "TYPE" not specified), (Line 13, Column 21: end tag for "HEAD" which is not finished), (Line 15, Column 73: there is no attribute "HEIGHT"), (Line 20, Column 3: "DOCTYPE" declaration not allowed in instance).
Websafe colours: The colour palette is simple, and consistent. With simple colours like blue and white it should display that way on all combinations of monitors and computers (I know it displays the same on the college macs as it does at home on my PC).
Image format: There's only one or two pictures. They are of jpeg format.
Font Families: A number of different fonts are used for different pieces of information. It helps separate different links on the site but the layout sort of makes that redundant. The number of fonts decreases once you following one of the links on the homepage, making it much better for more specific searches on the site.
Fluid/fixed: The website is fluid. It scales when you alter the size of your window.
Responsive web design: All interactive parts of the site work as they should do. It's very hard to read on an iPhone thus making it a little bit more difficult to use.
Layout: The layout uses frames which is very poor for accessibility giving web design issues, blackboard is a CMS system so it also uses JavaScript.
HTML5 or older version: Blackboard uses HTML 4.01 transitional which is rather old.
Readability: Although the information is poorly laid out the written information itself is easy to read. As mentioned before in "Front families" as you delve further into the website less fonts are used and thus makes it easier to read. Initially very cluttered.
Usability: I don't think the site is very user friendly, mainly because the layout isn't too clear. Not the easiest to find what it is you're looking for either. But again as mentioned before, once you narrow down to what you want (Year 2 course units for example) it becomes a lot more simplified.
Consistency: It's fairly consistent in terms of the colour palette but the layout changes a bit. Some things remain like the bar at the top and some menu system on the left but not throughout each part of the site.
Navigation: Not the easiest to navigate as it's not too clear to find what you're looking for. But once you understand it's okay.
Accessibility: The site is tailored for students but there's nothing that would really make you think it's made for that if you weren't to look into the content. Although it is obvious it's for students in the first place (especially as you initially have to log in with student details).
Accessibility: I know it works on both Google Chrome and Safari. I'd assume it works on other browsers also.

Artist portfolios

This portfolio is very smart indeed. You have the most important links to other pages up top in a menu format. I think it's smart being in black and white, the writing stands out on the background and the fonts are easy to read. The background isn't just plain black, as you can see it has some sort of texture which makes it very appealing indeed. The carousel below is a lovely way of displaying pieces of work. The whole of the screen is used wisely, as the work is displayed in the center with details noting it on the side (this is good as you don't have to scroll downwards for the image or information).

Wow! Look at this! This site is very pretty indeed, I think the designer here has really thought about the look and function of the site more than just content (that being, not walls of text to simply say what it is he wants to put across). Assuming the handsome face is the designer, I think it's good because it makes it more personal. As you can see like the site I looked at previously (and in fact most sites), it has a menu up top with links to other parts of the page. I see that it appears the main feature on this current page also acts as a menu to go through to other parts of the site. I think this is the home page and that is why it is some what limited on written info.

I'd like to think this one is fairly similar to my own site. Particularly the portfolio section. I like how it has a sort of sub-menu up top.

Here is some development of my site (keep in mind this is just some of it, there is much much more!):

To start with I was thinking of having this background, but then I thought about my work on blogger and decided I wanted to follow a similar theme. I put the menu from the top to being in a column on the left, but then chose to have a menu that stayed with you as you scrolled down the page (currently located on the right).

Here, the background has been changed and some sort of "boxes" have been put in which is where the text will be located.

Deciding I wasn't a fan of those select "boxes" for text. I had placed a slightly transparent black column down the center for the text to be placed on. This is done so the text stands out more clearly than just being placed directly onto the background image. I wanted the text to be white as I thought it stood out well and it was smarter than having a coloured text.

Here I have put in some content, it was pretty much just copied in from a word document I had initially typed the content into. So it is not nicely laid out currently.

Here is the real deal:

Evaluation:

As you can see, I have made a functioning website. It has multiple pages labelled with different titles suggesting what can be found in those individual pages. It displays some of my work I have completed and some other info about me and my work.

Completing this task, I guess it's easy to say I've learned quite a lot. However if I'm honest most of it went in one ear and out the other. A lot of the coding needed I had found on the web which I then copied into Dreamweaver. Before this however, I'd of had no idea at all how to create a site at all. In terms of design I've learned a few things, such as having web-safe colours, clear fonts, etc.

What's the point? Well initially for this course, however it can be doubled also as a personal portfolio to sell myself on the web! It has also been a useful learning experience. Giving me a better understanding of what challenges there are in creating a site and its functionalities, as well as the design of a site.

Considering my lack of computer software ability, I'm quite happy with how the site has turned out. Although we were given a template to work off of, I think I managed to change a reasonable amount to make it function as my own, as well as being designed as I wish. I'm happy with the menu to the right (which stays with you as you scroll through the page) instead of sticking with the bar along top which was part of the initial template. I think it lacks content but personally, I couldn't think of too much to put in there. At least it has some written info about myself, my work, and example of that work. I like the background image but as you can see, it has been stretched to fit the whole page, that being, the more content there is in the page (requiring you to scroll down), the image is stretched further and further, resulting in a not so pretty image.

If I had spent more time doing the tasks on codeacademy, I think I could have made the site a bit more elaborate. As well as spending more time to think about what could be written in the site. Maybe some more images than just text? But then I was thinking if I have images all over the place, I'd probably be copying pieces of work that'll just be later found under the portfolio tab. Overall, I think putting in more time to the site would have improved it.