Today I added the finishing touches to my Viva Voce Presentation which is exploring Search Engine Optimization.
I had a practice presentation on Thursday 8th May in front of my tutor and classmates; it was a good experience and I received some useful feedback to make some improvements.
The actual presentation, which is scheduled for this coming Wednesday, will cover my research enquiry, purpose, design, artefacts, conclusions, SEO strategy design, future implementation and further research. I hope nerves don't get the better of me and I am able to confidently present my work.
It's been an interesting project for me and hopefully one that will help forge my specialism within the web industry.
Saturday, 10 May 2014
Wednesday, 19 February 2014
Negotiated Client Project: Website Complete
Today I finished the final stages of SEO and testing. The website is now live at this location:
Phoenix Driver Training
Here is a screenshot of the home page:
Following registering the site with Google's Webmaster Tools and Analytics I am waiting for the Google search engine to crawl and index the site; once this happens I will be able to test the site's ranking for a set of keywords relevant to this business and location.
I have tested the site on a range of browsers and devices; here are my results:
Chrome on Windows Vista: perfect
Firefox on Windows Vista: perfect
Opera on Windows Vista: perfect
Safari on Windows Vista: perfect
Internet Explorer 8 on Windows Vista: full screen is almost perfect with graceful degradation (background image is replaced with a colour as IE8 cannot fully stretch background images). DIV alignment brakes down when screen size is reduced smaller than 961 pixels wide.
Internet Explorer 7 on Windows Vista: major alignment problems
Chrome on Windows 7: perfect
Internet Explorer 11 on Windows 7: facebook like/share buttons are not perfectly vertically aligned (a few pixels too low).
Default browser on Android 2.3.6 smart phone: perfect
Firefox on Android 2.3.6 smart phone: perfect
As with any website it is almost impossible to get it perfect on every device and browser but I am happy with my test results so far.
My next step is to continue testing on browsers on university machines and finally write my project book and evaluation.
Phoenix Driver Training
Here is a screenshot of the home page:
Following registering the site with Google's Webmaster Tools and Analytics I am waiting for the Google search engine to crawl and index the site; once this happens I will be able to test the site's ranking for a set of keywords relevant to this business and location.
I have tested the site on a range of browsers and devices; here are my results:
Chrome on Windows Vista: perfect
Firefox on Windows Vista: perfect
Opera on Windows Vista: perfect
Safari on Windows Vista: perfect
Internet Explorer 8 on Windows Vista: full screen is almost perfect with graceful degradation (background image is replaced with a colour as IE8 cannot fully stretch background images). DIV alignment brakes down when screen size is reduced smaller than 961 pixels wide.
Internet Explorer 7 on Windows Vista: major alignment problems
Chrome on Windows 7: perfect
Internet Explorer 11 on Windows 7: facebook like/share buttons are not perfectly vertically aligned (a few pixels too low).
Default browser on Android 2.3.6 smart phone: perfect
Firefox on Android 2.3.6 smart phone: perfect
As with any website it is almost impossible to get it perfect on every device and browser but I am happy with my test results so far.
My next step is to continue testing on browsers on university machines and finally write my project book and evaluation.
Wednesday, 5 February 2014
Research Project: Fifth Artefact - Link Building
In my final artefact I will be looking at building back links to my test website and analysing how this affects the ranking for my chosen set of keywords.
Reputable back links can increase the PageRank of a website and this can make it look more important to search engines and thus increase the ranking in search results. According to this source back links can have a total weighting of 40.09% upon ranking factors on Google. It is also worth noting that the Google search algorithms have now learned to disregard spammy mass purchased back links in favour of quality reputable links from sources which are relevant to the subject matter of the website.
As well as the back links which already existed on this blog, facebook, twitter etc. I decided to add more links on places which I felt were relevant and would have the biggest impact; these were:
Buckin' Burrito Google + page.
Google Places - a facility for registering businesses on Google maps.
Yelp.co.uk - a directory for restaurants
Urbanspoon.com - a directory for restaurants
Ufindus.com - a general directory for businesses
Yell.com - a general directory for businesses
I waited a week after placing all the links and tested on Google for my chosen set of keywords. Here are my results:
before (on 29/01/2014):
mexican food in sheffield - no listing
burrito bar sheffield - page 2, position 1
burrito sheffield - page 3, position 2
buckin' burrito - page 1, position 6
after (on 5/02/2014):
mexican food in sheffield - page 8, position 10
burrito bar sheffield - page 1, position 9
burrito sheffield - page 1, position 5
buckin' burrito - page 1, position 4
I am pleased that my first and most general keyword (mexican food in sheffield) has now for the first time featured my website in Google search. I believe this is due to the fact that in some of the directories I listed Buckin' Burrito as a Mexican restaurant and not just a burrito bar.
Overall there has been positive movement for all my keywords so it is clear that quality back links can have a significant positive impact on a website's ranking.
Next I will look at plotting all my test results from all my artefacts in a graph so I can tell which method of optimization has been most successful.
Reputable back links can increase the PageRank of a website and this can make it look more important to search engines and thus increase the ranking in search results. According to this source back links can have a total weighting of 40.09% upon ranking factors on Google. It is also worth noting that the Google search algorithms have now learned to disregard spammy mass purchased back links in favour of quality reputable links from sources which are relevant to the subject matter of the website.
As well as the back links which already existed on this blog, facebook, twitter etc. I decided to add more links on places which I felt were relevant and would have the biggest impact; these were:
Buckin' Burrito Google + page.
Google Places - a facility for registering businesses on Google maps.
Yelp.co.uk - a directory for restaurants
Urbanspoon.com - a directory for restaurants
Ufindus.com - a general directory for businesses
Yell.com - a general directory for businesses
I waited a week after placing all the links and tested on Google for my chosen set of keywords. Here are my results:
before (on 29/01/2014):
mexican food in sheffield - no listing
burrito bar sheffield - page 2, position 1
burrito sheffield - page 3, position 2
buckin' burrito - page 1, position 6
after (on 5/02/2014):
mexican food in sheffield - page 8, position 10
burrito bar sheffield - page 1, position 9
burrito sheffield - page 1, position 5
buckin' burrito - page 1, position 4
I am pleased that my first and most general keyword (mexican food in sheffield) has now for the first time featured my website in Google search. I believe this is due to the fact that in some of the directories I listed Buckin' Burrito as a Mexican restaurant and not just a burrito bar.
Overall there has been positive movement for all my keywords so it is clear that quality back links can have a significant positive impact on a website's ranking.
Next I will look at plotting all my test results from all my artefacts in a graph so I can tell which method of optimization has been most successful.
Wednesday, 29 January 2014
Research Project: Fourth Artefact - Metadata
I will now look at the impact a webpage's metadata has on it's ranking in the Google search engine.
You may be wondering 'what is metadata?' - according to this source metadata is:
'Simply put, metadata is data about data. It is descriptive information about a particular data set, object, or resource, including how it is formatted, and when and by whom it was collected. Although metadata most commonly refers to web resources, it can be about either physical or electronic resources. It may be created automatically using software or entered by hand.'
I have come across a very useful article online which points out the most effective meta tags for SEO. See here for more information
You may be wondering 'what is metadata?' - according to this source metadata is:
'Simply put, metadata is data about data. It is descriptive information about a particular data set, object, or resource, including how it is formatted, and when and by whom it was collected. Although metadata most commonly refers to web resources, it can be about either physical or electronic resources. It may be created automatically using software or entered by hand.'
I have come across a very useful article online which points out the most effective meta tags for SEO. See here for more information
Based on the reading I had done on this subject I decided to update the metadata on the home page of my test website as follows:
home page before:
<!--meta-->
<meta charset="utf-8">
<meta name="description" content="Try our freshly made burritos, fajitas, tacos, burrito bowls, nachos, salads and much more.">
home page after:
<!--standard meta-->
<meta charset="utf-8">
<meta name="description" content="Try our freshly made burritos, fajitas, tacos, burrito bowls, nachos, salads and much more.">
<!-- Google + -->
<meta itemprop="name" content="Mexican Burrito bar in Sheffield - Buckin' Burrito">
<meta itemprop="description" content="Try our freshly made burritos, fajitas, tacos, burrito bowls, nachos, salads and much more.">
<meta itemprop="image" content="http://buckinburrito.co.uk/images/logo.png">
<!--Facebook-->
<meta property=”og:title” content=”Mexican Burrito bar in Sheffield - Buckin#39; Burrito”/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="http://buckinburrito.co.uk/images/logo.png"/>
<meta property="og:url" content="www.buckinburrito.co.uk"/>
<meta property="og:description" content="Try our freshly made burritos, fajitas, tacos, burrito bowls, nachos, salads and much more."/>
<!--Twitter-->
<meta name=”twitter:card” content=”summary”>
<meta name=”twitter:url” content=”http://buckinburrito.co.uk”>
<meta name=”twitter:title” content=”Mexican Burrito bar in Sheffield - Buckin' Burrito”>
<meta name=”twitter:description” content=”Try our freshly made burritos, fajitas, tacos, burrito bowls, nachos, salads and much more.”>
<meta name=”twitter:image” content=”http://buckinburrito.co.uk/images/logo.png”>
<!--Publisher-->
<link rel=”publisher” href=”https://plus.google.com/106871109621071697363“/>
As you can see many of the new meta tags provide information for social networks which improves search visibility through those platforms. This builds on my previous artefact which initially linked the site to social media by now providing more detailed data specifically for social networks. I have also added a 'publisher' tag which links the site's ownership to a registered business on Google +.
As in previous tests I wished to find out how the new update would affect the ranking on Google for my chosen set of keywords. Here are my results:
before (on 21/01/2014):
mexican food in sheffield - no listing
burrito bar sheffield - page 2, position 5
burrito sheffield - page 4, position 8
buckin' burrito - page 2, position 3
mexican food in sheffield - no listing
burrito bar sheffield - page 2, position 5
burrito sheffield - page 4, position 8
buckin' burrito - page 2, position 3
after (on 29/01/2014):
mexican food in sheffield - no listing
burrito bar sheffield - page 2, position 1
burrito sheffield - page 3, position 2
buckin' burrito - page 1, position 6
mexican food in sheffield - no listing
burrito bar sheffield - page 2, position 1
burrito sheffield - page 3, position 2
buckin' burrito - page 1, position 6
As you can see from the data above there has been a significant increase in ranking for three of my keywords. From this result I can conclude that correct use of meta data has a positive impact on Google ranking. I believe this is due to the fact that the website is now linked to a Google registered business and has increased visibility on social platforms.
In my next and final artefact I will be looking at the impact of back links on search engine ranking.
Wednesday, 22 January 2014
Research Project: Third Artefact - Social Media Integration
In my 3rd artefact I will be looking at the impact of social media integration on Google search results. By social media integration I mean individual Facebook, Twitter and Google + pages as well as buttons on the website which allow sharing of the site on these three platforms. I have also created a Twitter feed on the home page of the test site. Below you will see an image of the bottom of the home page which includes social media page links, Facebook share/like buttons, Tweet button and Google plus one button; the twitter feed is on the right of the image.
I have read that building links through social media in the form of likes, shares, tweets etc can increase the visibility of a website and therefore raise the position in search results. According to this source social metrics have a 7.24% impact on ranking factors in Google.
I wanted to put this to the test so I checked the position in Google for my selected keywords before and after the social media integration. Here are my results:
before (on 12/01/2014):
mexican food in sheffield - no listing
burrito bar sheffield - page 2, position 6
burrito sheffield - page 4, position 3
buckin' burrito - page 2, position 3
after (on 21/01/2014):
mexican food in sheffield - no listing
burrito bar sheffield - page 2, position 5
burrito sheffield - page 4, position 8
buckin' burrito - page 2, position 3
As you can see there was very little positive movement in Google and in fact one of my keywords had gone down 5 positions. During my test period there were 42 likes on Facebook but only one share through each social platform; if there had been a bigger social engagement and over a longer period I believe the Google positions would have changed more. Social networking is one of the never-ending factors in SEO so I would encourage my client to continue promoting the business this way to see higher rankings in Google.
I have read that the social networks have their own meta tags such as open graph and Twitter cards. In my fourth artefact I will look at how implementing the new meta tags will help build visibility on social networks and if this will affect the ranking in Google.
I have read that building links through social media in the form of likes, shares, tweets etc can increase the visibility of a website and therefore raise the position in search results. According to this source social metrics have a 7.24% impact on ranking factors in Google.
I wanted to put this to the test so I checked the position in Google for my selected keywords before and after the social media integration. Here are my results:
before (on 12/01/2014):
mexican food in sheffield - no listing
burrito bar sheffield - page 2, position 6
burrito sheffield - page 4, position 3
buckin' burrito - page 2, position 3
after (on 21/01/2014):
mexican food in sheffield - no listing
burrito bar sheffield - page 2, position 5
burrito sheffield - page 4, position 8
buckin' burrito - page 2, position 3
As you can see there was very little positive movement in Google and in fact one of my keywords had gone down 5 positions. During my test period there were 42 likes on Facebook but only one share through each social platform; if there had been a bigger social engagement and over a longer period I believe the Google positions would have changed more. Social networking is one of the never-ending factors in SEO so I would encourage my client to continue promoting the business this way to see higher rankings in Google.
I have read that the social networks have their own meta tags such as open graph and Twitter cards. In my fourth artefact I will look at how implementing the new meta tags will help build visibility on social networks and if this will affect the ranking in Google.
Monday, 20 January 2014
Negotiated Client Project: Prototypes
My client is Phoenix Driver Training, a driving instructor business based in Lichfield. After receiving basic website content such as text and images I created three prototypes:
The client liked the third prototype the most but also wanted to add the image of the instructor from the second prototype. I was happy that the 3rd design was fun and innovative but there were problems with the layout as indicated by my tutor; the layout didn't follow the classic f shape so the content didn't look right and was hard to follow. I was also concerned that some of the colours were a bit hard on the eye.
Considering all the feedback I received, I designed another prototype which the client was happy with; see below:
The domain and hosting have been purchased and I recently uploaded a holding page at http://phoenix-driver-training.co.uk
I hope to complete the website by the end of February 2014 so watch this space for further developments.
The client liked the third prototype the most but also wanted to add the image of the instructor from the second prototype. I was happy that the 3rd design was fun and innovative but there were problems with the layout as indicated by my tutor; the layout didn't follow the classic f shape so the content didn't look right and was hard to follow. I was also concerned that some of the colours were a bit hard on the eye.
Considering all the feedback I received, I designed another prototype which the client was happy with; see below:
The domain and hosting have been purchased and I recently uploaded a holding page at http://phoenix-driver-training.co.uk
I hope to complete the website by the end of February 2014 so watch this space for further developments.
Wednesday, 15 January 2014
Research Project: Second Artefact - Keyword Placement
I will now look at keyword placement and how this impacts a website's position in search results.
My test website which I am building and optimizing for a client is http://buckinburrito.co.uk. This is a Mexican fast food restaurant located in Sheffield.
My search engine analysis will be done on http://google.co.uk and tested on Mozilla Firefox.
Initially after uploading the website to the server for the first time I linked the site to Google's Webmaster Tools and Analytics. Webmaster Tools enabled me to index the website on Google by submitting a sitemap. Analytics lets me track how often and where the website is visited.
The website started with very basic text and generic page titles. All the pages used the same title (Buckin' Burrito) and meta description (Quality Mexican Burrito Bar serving burritos, tacos, salads and more). There were no headings or body text.
I chose a set of keywords as a guide to my keyword optimization and tested on Google on 8/1/2014:
mexican food in sheffield - no listing
burrito bar sheffield - no listing
burrito sheffield - no listing
buckin' burrito - page 1, position 10*
* each page has ten websites listed.
I did some reading and found that the best places to put keywords into are in page title, headline, body text, URL, image alt attributes, internal/external links and meta description. See http://moz.com/blog/visual-guide-to-keyword-targeting-onpage-optimization
For the home page I optimized as follows:
page titles to Mexican Burrito bar in Sheffield - Buckin' Burrito
meta description to Try our freshly made burritos, fajitas, tacos, burrito bowls, nachos, salads and much more.
heading 1 (h1) to Delicious & Healthy, it 'Mex' sense
heading 2 (h2) to The home of healthy fresh Mexican food
body text to:
<p>Welcome to our website. We are passionate about Mexican cuisine, especially when it's quick and offered at the best price.</p>
<p>Our mission is to provide fast food that not only tastes delicious but also keeps you healthy. All our food is freshly made using authentic Mexican ingredients.</p>
<p>Explore our <a href="menu.html">menu</a> to find out what types of food and drink we have on offer and read <a href="about-us.html">about us</a> to discover the story behind Buckin' Burrito.</p>
The URL was already including the keyword buckin' burrito and descriptive alt attributes were used for images.
I used slightly different page titles and meta descriptions for other pages on the website to avoid duplicating content on search engines.
I noticed the position in Google had changed on 12/1/2014 to the following:
mexican food in sheffield - no listing
burrito bar sheffield - page 2, position 6
burrito sheffield - page 4, position 3
buckin' burrito - page 2, position 3
I noticed that there had been a negative movement in search results for the search term buckin' burrito. This is due to the fact that the words buckin' burrito are at the end of the page title rather than at the start; it seems that the starting words of the page title are picked up as more relevant terms and rank higher in Google.
From this result I can see how important keyword placement is when done correctly. I could have fitted more keywords but this would have been picked up as spam and given a negative result in my test. I believe I have the right balance here and this first test has been a good start to my marketing campaign.
In the next artefact I will be looking at social media integration and again testing how this impacts search results.
My test website which I am building and optimizing for a client is http://buckinburrito.co.uk. This is a Mexican fast food restaurant located in Sheffield.
My search engine analysis will be done on http://google.co.uk and tested on Mozilla Firefox.
Initially after uploading the website to the server for the first time I linked the site to Google's Webmaster Tools and Analytics. Webmaster Tools enabled me to index the website on Google by submitting a sitemap. Analytics lets me track how often and where the website is visited.
The website started with very basic text and generic page titles. All the pages used the same title (Buckin' Burrito) and meta description (Quality Mexican Burrito Bar serving burritos, tacos, salads and more). There were no headings or body text.
I chose a set of keywords as a guide to my keyword optimization and tested on Google on 8/1/2014:
mexican food in sheffield - no listing
burrito bar sheffield - no listing
burrito sheffield - no listing
buckin' burrito - page 1, position 10*
* each page has ten websites listed.
I did some reading and found that the best places to put keywords into are in page title, headline, body text, URL, image alt attributes, internal/external links and meta description. See http://moz.com/blog/visual-guide-to-keyword-targeting-onpage-optimization
For the home page I optimized as follows:
page titles to Mexican Burrito bar in Sheffield - Buckin' Burrito
meta description to Try our freshly made burritos, fajitas, tacos, burrito bowls, nachos, salads and much more.
heading 1 (h1) to Delicious & Healthy, it 'Mex' sense
heading 2 (h2) to The home of healthy fresh Mexican food
body text to:
<p>Welcome to our website. We are passionate about Mexican cuisine, especially when it's quick and offered at the best price.</p>
<p>Our mission is to provide fast food that not only tastes delicious but also keeps you healthy. All our food is freshly made using authentic Mexican ingredients.</p>
<p>Explore our <a href="menu.html">menu</a> to find out what types of food and drink we have on offer and read <a href="about-us.html">about us</a> to discover the story behind Buckin' Burrito.</p>
The URL was already including the keyword buckin' burrito and descriptive alt attributes were used for images.
I used slightly different page titles and meta descriptions for other pages on the website to avoid duplicating content on search engines.
I noticed the position in Google had changed on 12/1/2014 to the following:
mexican food in sheffield - no listing
burrito bar sheffield - page 2, position 6
burrito sheffield - page 4, position 3
buckin' burrito - page 2, position 3
I noticed that there had been a negative movement in search results for the search term buckin' burrito. This is due to the fact that the words buckin' burrito are at the end of the page title rather than at the start; it seems that the starting words of the page title are picked up as more relevant terms and rank higher in Google.
From this result I can see how important keyword placement is when done correctly. I could have fitted more keywords but this would have been picked up as spam and given a negative result in my test. I believe I have the right balance here and this first test has been a good start to my marketing campaign.
In the next artefact I will be looking at social media integration and again testing how this impacts search results.
Thursday, 21 November 2013
Research Project: First Artefact - Organic vs Sponsored search results
Throughout my five artefacts I have decided to follow an internet marketing campaign for a test website with the aim of increasing the website ranking in search results.
Through my first artefact I wish to discover the most effective strategy for marketing a site for search engines.
There are two types of search results; these are organic results i.e. websites which achieve their ranking through search engine optimization and those which are sponsored results i.e. websites which pay for the listing through services such as Google Ad Words. Through surveying members of the public I wish to enquire which type of search result people actually pay attention to so I can start my campaign in the right direction.
Using the image below I have asked people:
When you do a search on Google do you first click on the links in the red area or the links in the blue area?
I have not indicated this on the survey but the red area is sponsored results and the blue area is organic results.
So far I have had 19 responses to my survey; here are the results:
I have spoken to Google to enquire about the price of Ad Words and found out that paying for a sponsored result for just one keyword would cost at least £5 per day. From the result of my survey it is clear to me that sponsored search results are generally ignored by the public so paying for this expensive method of marketing would be a waste of money.
Organic search engine optimization is clearly the best way forward for my campaign. I now need to learn how to effectively optimize a web page for a selected set of keywords. In my second artefact I will look at keyword placement in page titles/headings and how this impacts a page ranking in organic search results.
Through my first artefact I wish to discover the most effective strategy for marketing a site for search engines.
There are two types of search results; these are organic results i.e. websites which achieve their ranking through search engine optimization and those which are sponsored results i.e. websites which pay for the listing through services such as Google Ad Words. Through surveying members of the public I wish to enquire which type of search result people actually pay attention to so I can start my campaign in the right direction.
Using the image below I have asked people:
When you do a search on Google do you first click on the links in the red area or the links in the blue area?
I have not indicated this on the survey but the red area is sponsored results and the blue area is organic results.
So far I have had 19 responses to my survey; here are the results:
I have spoken to Google to enquire about the price of Ad Words and found out that paying for a sponsored result for just one keyword would cost at least £5 per day. From the result of my survey it is clear to me that sponsored search results are generally ignored by the public so paying for this expensive method of marketing would be a waste of money.
Organic search engine optimization is clearly the best way forward for my campaign. I now need to learn how to effectively optimize a web page for a selected set of keywords. In my second artefact I will look at keyword placement in page titles/headings and how this impacts a page ranking in organic search results.
Client Project: Second Draft Website
After showing my design to my tutor and some friends I received some feedback about the look of the home page; I was told the brown textured background wasn't a suitable colour to represent the urban grunge look, it was also suggested that I could make it look more interesting by changing the position of the logo to the left and overlapping it with the navigation. My tutor advised me that it was not clear for the user what they should do on this page as there were images and links but no clear order to things; I resolved this issue by adding steps 1 to 3 to guide the prospective student to first find a place to study, then apply for a place through UCAS and finally apply for student finance. Again I used the red, amber and green to make the order more obvious. I also removed the footer as I didn't feel this was needed and it didn't look good on my new background. Below you will find a screenshot of the amended home page.
I achieved the overlapping of the logo using the following styles:
I achieved the overlapping of the logo using the following styles:
position:absolute; z-index:2; left:10%; top:10px;
Wednesday, 13 November 2013
Client Project: First draft coded design
study/home page (desktop view):
Based on the idea of traffic lights I have created three states for the colour of the navigation; the inactive page is red, the hovered link is amber and the active page is green. There is also a 0.2second delay in the colour change from red to amber, I did this by adding a css transition:
nav a {
text-decoration:none;
color:#d20000;
line-height:100%;
-webkit-transition:color 0.2s ease-in;
-moz-transition:color 0.2s ease-in;
-o-transition:color 0.2s ease-in;
transition:color 0.2s ease-in;
}
nav a:hover {
color:#eeb70e;
}
The page is responsive; here is the tablet view:
and here is the mobile view:
I also added the content for the second (work) page:
This page includes a rss feed from two sources:
http://www.jobsite.co.uk/cgi-bin/advsearch?rss_feed=1&job_title_atleast=Part-time,ttttt&location_include=Nottingham&search_currency_code=GBP&search_single_currency_flag=N&search_salary_type=A&daysback=7&scc=UK&compare_resolved=TO_NG1_NOTTINGHAM&compare_search=Nottingham&channel_code_include=PARF&channel_page_code=PART
and
http://www.mynottinghamjobs.co.uk/rss
The two feeds are combined using feed informer. (see http://feed.informer.com)
I will seek some feedback from my tutor over the next couple of days so I can make changes and finish the website within the next week.
Based on the idea of traffic lights I have created three states for the colour of the navigation; the inactive page is red, the hovered link is amber and the active page is green. There is also a 0.2second delay in the colour change from red to amber, I did this by adding a css transition:
nav a {
text-decoration:none;
color:#d20000;
line-height:100%;
-webkit-transition:color 0.2s ease-in;
-moz-transition:color 0.2s ease-in;
-o-transition:color 0.2s ease-in;
transition:color 0.2s ease-in;
}
nav a:hover {
color:#eeb70e;
}
The page is responsive; here is the tablet view:
and here is the mobile view:
I also added the content for the second (work) page:
This page includes a rss feed from two sources:
http://www.jobsite.co.uk/cgi-bin/advsearch?rss_feed=1&job_title_atleast=Part-time,ttttt&location_include=Nottingham&search_currency_code=GBP&search_single_currency_flag=N&search_salary_type=A&daysback=7&scc=UK&compare_resolved=TO_NG1_NOTTINGHAM&compare_search=Nottingham&channel_code_include=PARF&channel_page_code=PART
and
http://www.mynottinghamjobs.co.uk/rss
The two feeds are combined using feed informer. (see http://feed.informer.com)
I will seek some feedback from my tutor over the next couple of days so I can make changes and finish the website within the next week.
Client Project: Photoshop Mock-ups
With the design of my website I wished to incorporate graffiti art along with a 'grunge' style. Here is my design process:
Design 1:
After showing my first design to people in my class I was told this looked too dark and lacked colour.
Design 2:
The second design is similar to the first but uses a lighter textured background and semi-transparent container. I still felt that I could add more colour.
Design 3:
The third design made use of the new logo and a different textured background. I found this at this location: http://www.webtexture.net/photoshop-resources/patterns/15-high-resolution-grunge-textures/
The next step will be to code the design in html.
Design 1:
After showing my first design to people in my class I was told this looked too dark and lacked colour.
Design 2:
The second design is similar to the first but uses a lighter textured background and semi-transparent container. I still felt that I could add more colour.
Design 3:
The third design made use of the new logo and a different textured background. I found this at this location: http://www.webtexture.net/photoshop-resources/patterns/15-high-resolution-grunge-textures/
The next step will be to code the design in html.
Client Project: Graffiti Logo
My initial logo design made use of the graffiti style in a subtle way. See below:
I wanted to develop the logo into a more colorful and intricate design so I began experimenting with different custom graffiti fonts on http://www.graffiticreator.net/.
Here was my first attempt:
Here I used a different font:
I liked the shape of the lettering on the first attempt but the colours didn't work well together. The second attempt is a bit more difficult to read and the colours are messy.
Here was my third design:
I liked this the most as the colours are easier on the eye.
I then created a full logo using my new graffiti font along with the font used in the original design:
I wanted to develop the logo into a more colorful and intricate design so I began experimenting with different custom graffiti fonts on http://www.graffiticreator.net/.
Here was my first attempt:
Here I used a different font:
I liked the shape of the lettering on the first attempt but the colours didn't work well together. The second attempt is a bit more difficult to read and the colours are messy.
Here was my third design:
I liked this the most as the colours are easier on the eye.
I then created a full logo using my new graffiti font along with the font used in the original design:
Thursday, 7 November 2013
Client Project: Website content
My responsive 'Nottingham Loves Students' website will have 3 pages called 'study', 'work' and 'play'. I have come up with some ideas for the content of each page:
Study
This page will have information about the universities and colleges in Nottingham as well as links to services such as UCAS and Student Finance. The page will contain a jquery sliding gallery with images linking to different institutions; these will include Central College Nottingham, New College Nottingham, North Nottinghamshire College, Nottingham Trent University, University of Nottingham and West Nottinghamshire College. I am thinking of using css mouse hover effects to make the links to UCAS and Student Finance look interesting.
Work
This page will have links to employment agencies and a RSS feed with information about the latest student jobs.
Here are a few relevant job agencies I have found:
http://studentjob.co.uk/info/parttimejob_Nottingham
http://e4s.co.uk/jobs/nottingham.htm
http://reed.co.uk/jobs/nottingham
I will pull in rss feeds from sources such as gumtree (see http://gumtree.com/rssfeed/student-graduate-jobs/nottingham)
The feeds will be put together using a resource such as http://feed.informer.com
Play
I am thinking of making a page which shows a map with locations of the most popular cinemas, theatres and night-clubs in Nottingham. The map will have colour coded pointers for each type of entertainment spot and basic details will pop up when the user clicks on each pointer. I have found a website which allows me to upload a spreadsheet to create a Google map with multiple colour coded locations. See http://batchgeo.com
Design
As I will be incorporating graffiti imagery into my website I have done some research about fonts and found a useful website which creates custom graffiti fonts, see http://www.graffiticreator.net/. I am thinking of using this for the website logo.
My next step is to create design mock-ups in Photoshop then begin building the website in Dreamweaver. Watch this space for further details.
Study
This page will have information about the universities and colleges in Nottingham as well as links to services such as UCAS and Student Finance. The page will contain a jquery sliding gallery with images linking to different institutions; these will include Central College Nottingham, New College Nottingham, North Nottinghamshire College, Nottingham Trent University, University of Nottingham and West Nottinghamshire College. I am thinking of using css mouse hover effects to make the links to UCAS and Student Finance look interesting.
Work
This page will have links to employment agencies and a RSS feed with information about the latest student jobs.
Here are a few relevant job agencies I have found:
http://studentjob.co.uk/info/parttimejob_Nottingham
http://e4s.co.uk/jobs/nottingham.htm
http://reed.co.uk/jobs/nottingham
I will pull in rss feeds from sources such as gumtree (see http://gumtree.com/rssfeed/student-graduate-jobs/nottingham)
The feeds will be put together using a resource such as http://feed.informer.com
Play
I am thinking of making a page which shows a map with locations of the most popular cinemas, theatres and night-clubs in Nottingham. The map will have colour coded pointers for each type of entertainment spot and basic details will pop up when the user clicks on each pointer. I have found a website which allows me to upload a spreadsheet to create a Google map with multiple colour coded locations. See http://batchgeo.com
Design
As I will be incorporating graffiti imagery into my website I have done some research about fonts and found a useful website which creates custom graffiti fonts, see http://www.graffiticreator.net/. I am thinking of using this for the website logo.
My next step is to create design mock-ups in Photoshop then begin building the website in Dreamweaver. Watch this space for further details.
Saturday, 12 October 2013
Client Project: Assigned Client - Nottingham Loves...
For my first client project this year I have to create a piece of work for the Nottingham Young Creative awards based on the theme 'Nottingham Loves...'
Full details of the brief can be found here: http://www.youngcreativeawards.org/
I have decided to go with 'Nottingham Loves Students' and will create a 3 page responsive website which represents my theme. I will be working off three main ideas; these are entertainment, education and employment. My aim is to create a website which promotes Nottingham to young people who are looking for a place to live and study by showing the services the city has to offer them. My target audience is mainly 18 to 20 year olds.
I am currently working on a presentation which will structure my ideas and set the website build in motion. More details to follow.
Full details of the brief can be found here: http://www.youngcreativeawards.org/
I have decided to go with 'Nottingham Loves Students' and will create a 3 page responsive website which represents my theme. I will be working off three main ideas; these are entertainment, education and employment. My aim is to create a website which promotes Nottingham to young people who are looking for a place to live and study by showing the services the city has to offer them. My target audience is mainly 18 to 20 year olds.
I am currently working on a presentation which will structure my ideas and set the website build in motion. More details to follow.
Research Project: Proposal
Research Topic. Outline in no
more than 150 words what your project is going to explore. Is your
topic concerning an issue, concept, processes or application that you
want to acquire deeper knowledge and understanding in? Is it an area
that you have not been able to fully explore?
Looking
specifically at search engine optimization I wish to explore and
understand the processes and techniques needed to give a website a
high ranking in search results. One of the main search engines,
Google, is constantly changing search algorithms so what practices
must be maintained by a company or individual to keep them above
their competitors.
This is not an
area of web design that has been explored in my course but I feel it
is essential so I am keen to learn as much as I can about SEO through
my own research.
Your Background: Outline in
no more than 150 words how familiar you are already with this topic?
Does it build on personal interest? Have you done any formal or
informal investigation of this project already?
In my second year of university I was
given a few tips in the use of page titles, meta descriptions and
page headings from my lessons with Giselle Leeb but I did not yet
fully understand how this impacted a website's ranking. In the same
year I also began researching Google services and made use of
Google's Webmaster Tools and Analytics in my client projects. In May
2013 I redesigned my portfolio website with the intention of starting
freelance design work; I began looking into ways of paying Google to
appear higher in search results but I soon realised that this was not
financially viable for me. In the summer I did a ten week placement
with a SEO company called Easy Internet Services (see
http://www.easy-internet.co.uk/
); this gave me a deeper insight into organic SEO and really sparked
my interest in this topic.
Research sources. In week 2
of your final year you will be doing a presentation. At that
presentation you will be asked for a number of specific research
sources that are already aware of that will help you during the
initial stages of the project. List as many of them now. They might
be films, magazines, interviews, websites, You Tube links, etc.
Here are a few of
the SEO articles I have read online:
Here is an
interesting video about sponsored vs organic search results:
Here is a very
useful video about SEO techniques for a new website:
I
have signed up to an email newsletter from http://www.hobo-web.co.uk/
which is an internet marketing company referred to me by my tutor.
I am currently
looking into finding books and papers on the topic of SEO; these will
be included in my presentation.
Goals: In no more than 50
words outline what do you want to achieve as a result of working on
this topic.
I wish to
further my understanding of SEO to the point that I can offer this as
one of my services as a web designer.
Problems: What initial
problems can you see?
- Search engines
can take weeks to fully index a website and build an accurate picture
of it's ranking so it will be difficult to see immediate results when
creating my artefacts. I will take this into consideration when
planning a schedule for my research.
- There are
methods of SEO known as black hat which can be harmful and
ineffective in long term website ranking; I need to recognise these
methods exist early in my research so I can avoid using them in my
work. I wish to use reputable white hat methods of SEO which will
help both me and my clients.
Summer break: list the
things you can be doing over the summer break to help you prepare.
My summer
break was mainly focused on the work placement I mentioned before
which helped me practice web design and start to understand the
practical application of SEO. I have started to read about my chosen
topic and used newly learned techniques in my freelance work.
Friday, 15 February 2013
Client Project - Website for Ready Steady 60s
For my first client project I will be designing a website for a Nottingham based 60s rock band called Ready Steady 60s. This client was suggested to me by my lecturer, Shaun, and then I got in contact with the singer/guitarist of the band who also works in the university.
The client has asked for a site that represents the 60s style and includes the band's logo and colour scheme (see above). The client also wishes to be able to update the website without having any html or css knowledge so suggested a content management system such as Wordpress.
The project brief states that the web site should be fully accessible on a mobile device. Over the past three weeks I have been learning how to create responsive web designs by using percentages for widths rather than pixels; this makes the sections and content within resize when the browser window is reduced in size. I have also learned about using media queries to create cut off points (in pixels) when the web content changes to accomodate for a resized browser window.
I have created a simple responsive template in Dreamweaver just to put the responsive design techniques into practice but this is not yet ready to show to the client. I am currently looking at the sites of other bands and also researching 60s imagery to get a better idea of what I will incorporate into my design.
I feel the biggest challenge of this project will be transforming my custom design into a Wordpress theme. I have learned a little about the Wordpress language (PHP) in my Tuesday seminars and also read magazines and online articles about the Wordpress interface which should give me a good foundation to work on this project. I also started looking at editing Wordpress themes this morning and will continue in further detail next week. I have been told that Wordpress design is very popular and an essential skill for web designers so the knowledge I gain in this project will be very useful in the future.
Friday, 23 November 2012
Voyage - feedback stage 3
I showed the third draft website to my lecturer, David, today and he told me the overall design was fine but I should add an extra index page for accessibility so browsers without javascript enabled can view some content. There is a line of code which checks if the browser supports javascript and either diverts it to a different page with full js content if enabled or stays on the same plain index page if not enabled. Here is the code I used:
<script language="javascript">
document.location.replace("index2.html");
</script>
Index is my plain splash screen with no js content and index2 is the full version with js. The plain index page is basically just the text that is contained within the map page and nothing else.
Here is a screen shot of the plain index page;
At this stage I have shown my design to all my class mates and lecturers. I received some very helpful feedback and implemented more or less everything that was suggested. I am confident that this 4th draft website will be the final version and I look forward to the presentation in a week.
<script language="javascript">
document.location.replace("index2.html");
</script>
Index is my plain splash screen with no js content and index2 is the full version with js. The plain index page is basically just the text that is contained within the map page and nothing else.
Here is a screen shot of the plain index page;
At this stage I have shown my design to all my class mates and lecturers. I received some very helpful feedback and implemented more or less everything that was suggested. I am confident that this 4th draft website will be the final version and I look forward to the presentation in a week.
Voyage - Feedback Stage 2
Today I showed my Second draft voyage website to my lecturer, Giselle, and got some useful feedback with tips on how I can improve my design. Here are the points that were raised:
- Put a space around the text in the header.
- Make the 'click on the map to enter' text in the header a different colour to make it stand out more.
- Make the text on the map page larger.
- Make city names standout more, try a different coloured text.
- Make Wikipedia links more visible, try underlining.
I implemented all these changes during my seminar this morning and also tidied my file structure by placing all images within my images folder.
- Put a space around the text in the header.
- Make the 'click on the map to enter' text in the header a different colour to make it stand out more.
- Make the text on the map page larger.
- Make city names standout more, try a different coloured text.
- Make Wikipedia links more visible, try underlining.
I implemented all these changes during my seminar this morning and also tidied my file structure by placing all images within my images folder.
Thursday, 22 November 2012
Week 6 Task: Design a marketing strategy for your personal website
I have had my own website set up since November 2011 under the domain name http://nimahedayati.com. The site has evolved from being a simple portal to share my music to a full online portfolio showcasing all my multimedia work. The website was most recently updated earlier this month in preparation for the hand in of my Context 2 portfolio assignment.
My website currently serves the purpose of sharing my artwork and selling myself as a multimedia practitioner; this is to prepare me for placements and eventually full time employment after completing my degree.
Since the website launched I have thought of ways to promote it; this includes linking it from other existing social networking sites such as Facebook, Twitter and Reverbnation. I have also made sure that my page titles include my name and had a simple domain name which helps bring my site to the top of the list when searching my name in Google. Today I have set up an account with Google Analytics and copied a bit of javascript onto each of my website pages to allow Google to track the number of visits I get and the demographic of my visitors. Here is the overview page on my analytics account:
At the moment the stats all say zero visits as I have just set up the tracker. I will visit this again every few weeks and hopefully see detailed reports of visits made to my website.
As well as promoting my website I am thinking of ways of making my name well known online as this will generate more Google searches and ultimately more visits to my website. One way I am doing this is through a new volunteer journalism job I have just started. I have started writing album reviews for a website called Metal Shock Finland which primarily reviews albums for worldwide metal bands. My first review has been published and can found at this location:
http://metalshockfinland.com/2012/11/21/review-hologram-earth-ep-2012/
The good thing about this job is that it gives me an opportunity to network and build friendships with musicians and Metal Shock staff worldwide which in the long term will help me build a reputation in media and hopefully find clients for web design work.
At this moment I believe my unique selling point is my dedication to promotion of music through blogs and effective web design. My target audience is anyone who shares my interest in music and wants to promote their work online; in the future I hope to expand my audience to all business sectors.
I expect my website and overall marketing strategy to evolve and improve as my skills improve in web design and journalism.
My website currently serves the purpose of sharing my artwork and selling myself as a multimedia practitioner; this is to prepare me for placements and eventually full time employment after completing my degree.
Since the website launched I have thought of ways to promote it; this includes linking it from other existing social networking sites such as Facebook, Twitter and Reverbnation. I have also made sure that my page titles include my name and had a simple domain name which helps bring my site to the top of the list when searching my name in Google. Today I have set up an account with Google Analytics and copied a bit of javascript onto each of my website pages to allow Google to track the number of visits I get and the demographic of my visitors. Here is the overview page on my analytics account:
At the moment the stats all say zero visits as I have just set up the tracker. I will visit this again every few weeks and hopefully see detailed reports of visits made to my website.
As well as promoting my website I am thinking of ways of making my name well known online as this will generate more Google searches and ultimately more visits to my website. One way I am doing this is through a new volunteer journalism job I have just started. I have started writing album reviews for a website called Metal Shock Finland which primarily reviews albums for worldwide metal bands. My first review has been published and can found at this location:
http://metalshockfinland.com/2012/11/21/review-hologram-earth-ep-2012/
The good thing about this job is that it gives me an opportunity to network and build friendships with musicians and Metal Shock staff worldwide which in the long term will help me build a reputation in media and hopefully find clients for web design work.
At this moment I believe my unique selling point is my dedication to promotion of music through blogs and effective web design. My target audience is anyone who shares my interest in music and wants to promote their work online; in the future I hope to expand my audience to all business sectors.
I expect my website and overall marketing strategy to evolve and improve as my skills improve in web design and journalism.
Tuesday, 20 November 2012
Voyage Feedback Stage 1
I
showed my first draft website to a few classmates and my lecturer and
got some very useful feedback. As I already suspected I was told that
the index page doesn't look very good but the main map page got some
good reviews and seems to be good enough to keep as it is. I was told
the button image looks very outdated and the header logo doesn't
quite fit in with the overall design of the site. My lecturer
specifically told me that I should replace the images on the index
page with one background image of my world map and create a
transition effect between this page and the map page. After the
lecture I spent some time resolving these issues as best I could.
Here are the steps I took:
- I created a new index page and used a reduced size world map as the background image; this image was made to cover the screen using css.
- I created a new header logo with text underneath. I added a line of css3 code to the word 'Voyage' to create a drop shadow and also a box shadow around the wrapper that surrounded the header.
- I kept the slideshow but reduced the size of the images to make it fit to the right of the logo within the header; the text was floated left and the slideshow was floated right to create this alignment.
- I
added a new jquery routine to both of my pages which added a cross
disolve between each page; I am very happy with this effect as it
looks quite slick. I learned how to do this through an online
tutorial which can be found at http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/
Here
are the three javascript routines I have used on my website so far:
- Jquery cross-fading slideshow on index page.
- Jquery cross disolve page transition on index and map pages.
- Jquery
image map scrolling on map page.
Here
is a screen shot of the new index page:
At
this stage I am happy with the outcome of this project but I will
again seek more feedback from other lecturer's and make any necessary
changes.
Subscribe to:
Posts (Atom)
























