Web design

Evaluation of my blog

At the start of this unit I hoped to create a well organised, easy to navigate and professional looking website as a showcase for all my future media material. As my website was likely to be sports based as the website is part of the Sports Journalism course I’m taking I used prominent sporting websites as inspiration for how to design mine. I looked at http://www.autosport.com/, http://www.fifa.com/,http://www.formula1.com/ and http://www.nfl.com/ as inspiration for my site. Now I’ve completed this module in reflection I feel the site I have created meets all the targets that I set out when initially starting this project. With four pages- Home, About, Blog and Contact my site is well sorted with all of the pages having relevant content and being easily accessible. Whilst I was not able to add all the design features I wanted this is mostly to do with the limitations of using WordPress for my site.

As I mentioned above the first step I took when designing my website was to look at other prominent sports websites for design ideas. When it came to creating my own site at first I only used a basic template design as I wanted to get the basics right first before adding to my site at a later stage. Soon after I came back to the design and went through the full list of design templates much more thoroughly this time looking for the right one. Once I had chosen the right template I then set about altering the default colours used. Finally I settled on a basic colour scheme of black and white. Whist it may appear slightly boring to some I chose these colours because I felt they were the most professional looking and that was the overwhelming priority for my site; for my site to look professional. After sorting out the design I then focused on adding a structure to my site through content, I subsequently added the about, blog and contact pages to add some structure to my home page. From this point I then focused on the smaller details which all together cementing the professional look I wanted from my website.

The intention of my website was to have a simple easy to use yet professional looking website. I wanted to keep my site relatively simple with only a Home page, About, Blog and Contact partly because of the amount of time given to us to create this site and partly because I wanted my site to be structured so it’s very easy to navigate for the reader. One of the features I included as a way of helper the reader visually see this is a sports based website was using a picture of famous racing driver Ayrton Senna as my header.

Whilst having a website with few pages may mean I lack in content to similar sporting websites the benefit to this is that my website does very well in speed as it’s very easy to load because of it’s relatively small size. Therefore when I tested the speed of my site on Pingdom it performed very well.

The results showed my site only takes 1.49 seconds to load which is 80% faster than other sites tested. Therefore the speed test didn’t influence my website very much because the tests had shown it didn’t need tweaking in terms of speed. The W3C test however was less straightforward as that showed my website had 6 errors and 3 warnings. The warnings however are far less significant than the errors so they can largely be discounted. In reality, the W3C test didn’t influence my website very much either because after looking through them it became clear all these errors were to do with the WordPress site itself and was no errors were of my own making on the site which meant there was little I could do to fix them.

From the original inspiration sites I have been able to incorporate some of their design features such as with Autosport.com their breaking news is all together in list form in the middle of the page. I have a vaguely similar design on my site with my latest posts being in list form in the middle of the page just off to the right. Also at the very top of the page they have all their different sections to the site for the reader, something I have done also placing all the navigation buttons at the top of the homepage below the header. These are both effective on my site as they make it easier for the reader to navigate my site which was their original purpose with the recent posts allowing the reader to easily find my latest posts whereas the navigation buttons are clearly visible on the home page for the reader too.

Through the design process the only problems I had to contend with was difficulty in making the picture of Ayrton Senna which I wanted to fit into the header bar. This was resolved relatively easily however as after several tries I simply chose another photo to use which fit the header box perfectly. Also I had a small issue with making the site name fit on one line in the header box which because of the length of the name I was unable to do. Whilst it looks slightly unprofessional, it’s a relatively small detail. However after exploring how to resolve this I decided not to resolve this small problem.

To change the header I would have to find a way to lengthen the size of the header or header photo, something I was unwilling to do as I previously explained above, the header photo was something that was difficult to implement. The only other option would be to change my blog title, something that is not wise to do considering the amount of work put in to create this blog in the first place. Therefore after considering these options I decided not to change anything simply to fit in the title on one line. The only effect this has is to compromise slightly the professional look of my site however in reflection I do not feel it compromises this enough to necessitate a drastic change to the header.

At the bottom right of my blog I implemented a recent posts section so that readers could visit other blog’s I’ve posted when they visit my blog. Initially the recent posts section was placed on the top right of my pages yet afterwards I was advised it would be better to place the categories section above the recent posts section. This is to allow readers to easily see the categories my blogs are written about so as to determine if this correlate with their interests ad hobbies.

The recent posts section is something I hadn’t given much thought to in the initial design process yet is something I would definitely include in future sites. This is because of the effect they have in making it a lot easier for readers to easily see if my blog posts are linked with their interests. It also makes it a lot easier for readers to navigate between blog posts on my site.

In conclusion I have learnt how to properly design a professional looking website and how to improve it through the use of coding and also testing such as the W3C errors test and the Pingdom speed test. I have also learnt to develop my content through tags and categorising my posts which help boost the popularity of my posts. This can also be helped with search engine optimisation which is another thing I’ve learn whilst developing this website. In the future I would ensure I had slightly more time to get it perfect but that’s the only thing.

Web Coding Protocols

Web coding forms the backbone of every web page created as the person creating any new web page will use web coding to design every element of the site/page. There are two main types of web page: static coding(HTML) and dynamic coding(PHP).

Static coding displays the same content that was originally placed on the page/site when the web creator made it. Therefore typically static we pages have HTML coding (HyperText MarkupLanguage). Static coding is good for web pages which are rarely updated however they become less impractical when someone chooses to use a large number of static pages on their websites. An example of this is when it comes to making any changes to their website the web administrator would need to psychically change the code on every page which is very time consuming and not very practical.

On the other hand, dynamic coding is an amalgamation of HTML and PHP and is useful to a user who wants to regularly update and add content to their web page. The main advantage to these types of sites is they allow a much greater interaction between the audience and the site administrator through comments and links. The majority of dynamic web pages are social media websites,blogs and forums/message boards.

Another advantage to dynamic coding is the fact it’s far more user friendly over static coding as the user does not need to have any prior knowledge about coding however with static coding the user would need a competent level of knowledge on how to implement coding as they would need to manually enter the right coding themselves. This therefore makes dynamic coding the more helpful type of coding to use for people who are new to creating websites or have little technical knowledge of website design which explains it’s overwhelming popularity for website design.

An example of a live static webpage is http://www.fibercom.co.za/ . This page is clearly static as the site has no interactional features and the website content shows no sign of having any changes made to it. An example of live semi-static web pages are the majority of Wikipedia pages which are set up and the in the majority left as a static web page it can be argued as although by definition they’re dynamic pages as anyone can edit them their appearance suggest that these pages are static as they have features related to dynamic coding on their pages. Although with some pages such as with living people the pages will be updated depending on the latest goings on in their life some of he pages will be created and then left untouched. Here’ a link to a semi-static Wikipedia page en.wikipedia.org/wiki/Website#Static_website .

Examples of Dynamic web pages are social media sites Twitter and Facebook. Users can post anything they want on these pages and can interact and share info with other users easily which helps explain their huge popularity as websites. All users have to do is sign up to these sites and confirm some of their details for security reasons and they can access these sites immediately. Dynamic coding is realistically the only coding template these sites can use to function as with static coding these sites would need an army of people constantly re-writing the coding to keep up with the intense speed of progress and rate of growth of these sites with new tweets and posts.

Also even with more simple areas such as the sign in menu with entering your username and password to gain access to the site this requires dynamic coding as the content on the page is changing and the coding needs to work in line with the server, something dynamic coding can do automatically whereas static coding cannot, to see if the username/password has been entered correctly before it grants the user access to the site. The links to both pages can be found here http://www.Twitter.com and http://www.Facebook.com .

There are many different HTML tags in use and the first example is the images tag which is 

<img>

. An example of all 5 HTML tags can be found on the Wikipedia page I linked above. The function of images are to add a visual element to the web page which help attract people to your site as it keeps their attention focused on your site. Secondly images can help show or explain to the reader something which the site administrator could not adequately explain themselves in text form.

A second example are heading tags which are 

<h1>

and their function is for adding keywords or pictures related to your site. This is significant as it helps massively with your search engine optimisation as search engines identify these tags to determine where your page is placed for different search options. Another key point with heading tags are the fact that heading tags can be used multiple times such as 

 <h2>

and a third example is

<h3>

.

Heading tags can be used to your advantage if you follow a similar layout to most newspapers where the main header sits atop the page before the second header will contain the main headline whereas finally the third header will be the first paragraph of the article which typically is in bold text. These tags can be a huge advantage for your website because if your using these tags coupled with any added links or images they can drastically improve your search engine optimization ranking on sites such as Google, which can consequently improve the amount of visitors to your page.

It works simply as search engines like Google rank web pages in priority form based on an a reputation it bases on views and how many times the site is linked from another page therefore the more links and tags used in your web page the higher it will appear in Google and the amount of views will increase also. Finally these tags, although easy to use with dynamic coding, are far more difficult to use with static coding as the web administrator would need to physically re-write all the coding to add in these tags every time they want to add a new one which is very time consuming and not a very practical method to use.

Paragraph tags which are either 

<p></p>

or 

<span></span>

.
The only difference between the two slightly different paragraph tags are that the

<p></p>

represent a line break in the paragraph whereas the 

<span></span>

doesn’t show a line break in the paragraph. The primary function of paragraphs are to help disperse the amount of text which helps with the visual appeal of the site as many people will not be prepared to read one paragraph of text the length of the page yet they will read the same content if it’s broken down into smaller chunks.

Another HTML tag commonly used is comment tags which are

 <!--This is a comment. Comments are not displayed in the browser-->

. The biggest advantage with comment tags are that they allow an interaction between the reader and site administrator which can add to any points made on the page and can therefore benefit the content of the page as a balanced argument can be created. However, Static web pages rarely use comment tags which limits their significance.

The final example of HTML tags are link tags which are 

<a href="http://www.example.com"></a>

. They can add to the content to the web page as the web page creator could post a link to a similar website with different or higher levels of knowledge on the subject. Also visual content such as videos or images can be posted on the site to add a visual element to the page which would nicely complement the text on the page. Also with HTML there are more than one type of them which is useful in a number of ways.