As this is the main dashboard/hub for all of my interactive media blogs, I’ve decided that the last post on interactive danwen will act as an accessible portal to all my blogs (as well as a progress tracker for each unit). In laymen’s terms this post will contain all my IM blog links.
Spelling and Grammar (my number one foe):
- Home page slide has spelling errors. (fixed)
- Missing Capitals on Address (fixed)
- Home (yes)
- Illness (yes)
- Find Us (yes)
- Products (yes)
- Form (yes)
- Drop-down links (yes)
- Hover (yes)
- Illness picture menu (yes)
- PDF links: needs to open in a new tab (fixed)
- Image thumbnail (good)
- Image placement (good)
- Header/ footer placement (good)
- Content placement (good)
- Margins (good)
- Text Alignment (good)
- Image loading time (too slow: fixed)
- Slider cycle (too fast: fixed)
- Firefox (works)
- Safari (works)
- IE9 (works)
User Testing (results):
- Most people found it easy to find their desired illness even without a search bar.
- When asked about the clinic’s address everyone replied they knew where it was and how to get there (thank goodness for google maps).
- They all found it easy to send my client an email.
- Most people found the product ‘Acne Getaway’ on the website easily.
- All found the slider easy to navigate and the text contained in it easy to read.
- Most found the slider speed just right with a few that complained it was too fast (which is alright since they can navigate back easily, is about striking a balance between readability and showcasing images).
- Everyone found the site’s overall loading speed fast.
- Those who took the survey were on a laptop or a mac and the majority were browsering with google chrome.
- Ipad (version test: 3rd generation): every design aspect is present; every test above applies and as a neat bonus the slider works with finger flicks. Everything loads pretty fast as well.
- Iphone (version tested: 4s): same with Ipad, surprisingly the smaller size actually makes the website look sharper and navigation is relatively easy espeacially compared. Only downside is that the slider is harder to navigate when zoomed in.
- PS Vita: works well as well even moves with the back touch screen. Slider is slightly harder to navigate on the vita but everything else works well and most importantly, looks how I intended it to look!
Search engine optimisation is a pretty big deal in the industry. That’s unsurprising considering that SEO determines how high up your website is in search engine result listings when someone searches for a subject related to your website. Anyone who wants their website to get traffic/ be seen (which is pretty much everybody) will want their site to be optimised and easy to be discovered. So here’s how it works:
Actual text: the textual content of your site is looked at by search engines as a basis for searches. So try to put relevant keywords in your site’s content.
HTML: the html files and links needs to be named appropriately as browsers look at that as well so no page1.html or any other generic rubbish.
Title: the title on your page (in one of the
title tag) is as looked at by search engines also if you put
hn tags around the headings on your page then the SE will take even more notice as it uses that to gauge what your website is about.
Alt text: adding alt text (description that comes up when your image fails to display on a browser) to your images are important as they’re what puts your image on the search index in image searches. Again no generic descriptions such as this is an image please.
Quality: you may think that is far too beyond search engines to determine the quality of your website. Well your wrong if you think that. One way search engines measure quality is to see if users will ‘bounce’ (click back to search results to try another page) from your website if they either don’t find it interest or relevant. So appropriate, engaging content and aesthetics suddenly become a crucial factor thanks to this SE feature. Clever, aren’t they?
Here’s a visual (albeit crudely drawn) representation of the above text if you’re intimidated by all the words:
Links: how many other sites link to your site also help determine your page content. But SEs don’t just look at how many pages link to you, they see if the content of the sites linking to you have related content. So if a beauty salon linked to your gaming website it probably won’t have as much of an impact to your page ranking as a website that linked to you that is also about gaming.
Social media: social media links/references to your site has become more and more important to website’s page ranking as well. So set up social accounts and make them popular!
Warning: Please don’t create a thousand fake accounts. Whilst SEs can’t check if something is fake or not it can see if one account has poor reputation (i.e. no followers). Plus you don’t want to confuse consumers would you?
- Spelling, spelling, spelling. If you spell things wrong not only would it annoy viewers it’ll make your content irrelevant and thus pushing it down the page rankings.
- No cloaking (hiding keywords by making them the same colour as the background, cheeky!) search engines (well Google) will penalise you for it.
So it’s finally finished!
Link to website: http://www.britschoolmedia.co.uk/IM/2012/danwen/drhuang.html
Making this website was a stressful but enjoyable experience. The amount of time I’ve stared at code and pumped my fist in air triumphantly as a solved a problem are countless. Thankfully my experience in math and gaming has prepared for this up and down ride of overcoming the puzzle we call web coding. Anyhow here’s an anatomical breakdown of my website (just to evidence that I didn’t just pull all of this out of thin air):
Main Structure + other hand coded bits
Add-ons (or should I say snippets I downloaded from the internet):
Other stuff/breakthrough (well at least I think they’re cool)
Last but not least here’s how to make a page/link open in a new tab (just add ‘target=”_blank ” in you anchor tag):
<a href="http://www.stuff.com" target="_blank">Stuff</a>
Here’s how to post source code on wordpress without the whole thing jumbling up in a technical mess (discovered whilst trying to post the above code).
Meeting the client’s needs
My brief was a simple, “Okay, make a website for the clinic.” – rough translation from the orignal Chinese Mandarin dialogue. This was a difficult task (for anyone whose read my lesson activity diary will know) as my clients each had little knowledge of websites in one way or another.
For me the fact that my client (father) couldn’t understand design or even tell the difference between a good looking website and a bad one, his only complaint was that I missed out the post-code was missing. Whilst this may seemed like a great opportunity to design the website as I’d like, it also ment that I’ve little idea what my client thinks of the design. Luckily my other client (my mother) was more commutative, she agreed with the minimalistic design of the site and also discussed with me about the content of the about section. Overall I’d say meeting my client’s needs was both hard (from a lack of feedback) and easy (from the freedom they allowed me in the design). In the end my parents were both satisfied with the website (my dad because I’d got the contact details correctly and my mum because it actually doesn’t look too bad in her eyes).
The main purpose as stated on the breif is to advertise the client’s clinic, with a hint of information regarding Chinese Medicine (to further promote the clinic and its services). Overall I have catered to this via the content of my website (the slider on the home page itself contains introductions to all aspects of TCM). However I’d liked to have put in more content (though this was limited since the client may practise TCM, his not a historian or a critical expert on TCM). If I did more research on the subject in the future or put in some further reading links, then the informational purpose of the site will be better served.
As mentioned before style-wise I’ve gone for a minimalistic and clean look to fit the tone of a clinic. By using colours associated with traditional Chinese medicine (TCM) and the clinic’s colour to further give a cultural impression and identity. The overall aesthetics of the site is exact what was mentioned in the brief: clear. Hence why it was important I’d gone for a simple navigation with no unnecessary frills attached whilst still maintain a pleasing and professional aesthetic.
All written content came from the leaflet that the client provided and the rest my head. As for the images: the form and certificates were supplied by the client; the images for acupuncture, massage and illnesses were stock photos downloaded from the internet (I just did some cutting down to appropriate sizes); the rest were taken and edited by myself. The massage and acupuncture (along with all the illness images) were not original because to take photos of actual patients would bring up a load of legal issues and require people to actually turn up so I chose to use stock images (of decent quality of course) instead.
As for whether or not my clients wanted the content… well some were (okay, most were) suggested by me since my client just wanted people to know the address and name of the clinic for the most part. I’ve discussed with them beforehand though during a meeting and they were happy with my ideas and the content I used (such as pictures) were also given positive feedback. Though I do regret not having as many original photographs as possible.
The overall planning and idea generation went very smoothly as I had a clear vision of how I wanted the site to look. Learning coding turned out to be the most enjoyable and well managed part of the whole production process- I went for a learn what I needed to create my site method, whilst also flipping through my coding bible. When it comes to actual production of the site, it took longer than expected partly due to getting used to the befuddlement of coding and having a broken up schedule. Next time I’ll be keeping a more strict schedule and increasing my work speed (a thorn that’s been in my side for a long time). One thing that I never worried about is creative ability as such an abstract aspect can only forever get better the more things you experience in life (or the more creative things you look at) it helped that I found a load of inspirational web design sites too.
I documented most of my progress and design decisions on my blog and made sure to get my client’s approve and feedback on my decision (at times having to urge them due to their reluctance born from a lack of understanding the process of making a website). If I could improve on this aspect I’d say is best if I updated the on every tiny detail for the website (such as fonts and use of colour). Nonetheless I chose to not go overboard with documentation asides from what’s important (i.e. the wireframe and site map) as my clients wished not to be bombarded with information and preferred that I focus on getting the site finished.
What would I change (if I could travel back in time)?
I’d like to add more convenient features (such as tools to change text sizes and a search bar but due to time-constraints (those elements would need fine-tuning to work well after all) this was not possible . Another thing I’d change is the spacing between the Chinese characters on the background image; this is a small niggle but I just feel that those pieces of beautiful calligraphy (okay it was an adobe font) were nearly always obscured by the site’s content. Finally my wish is for that I actually gone through with my original plan of showing what methods os TCM can cure which illness. Whilst my tables of illnesses that we cure is fine, there’s something neat about knowing what method is used to go about it.