interactivedanwen

Interactive Media Work main site (dashboard)/web author blog. Smile and interact?


Leave a comment

Links Links Links!

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.

Web design Blog

Games Design Blog 

TV Idents Blog 

3D Animation Blog

Motion Graphics Blog

Digital Magazine Blog

App Design Blog 

Digital Graphics for print 

Digital Video

Critical Approaches

Web Animation 

Working to a Brief

FMP blog

My interactive story

Advertisements


Leave a comment

Website Testing Report

W3C Validation:

validator

Spelling and Grammar (my number one foe):

  • Home page slide has spelling errors. (fixed)
  • Missing Capitals on Address (fixed)

Links (NAV): 

  • Home (yes)
  • Illness (yes)
  • Find Us (yes)
  • Products (yes)
  • Form (yes)
  • Drop-down links (yes)
  • Hover (yes)
  • Illness picture menu (yes)

Other Links: 

  • PDF links: needs to open in a new tab (fixed)
  • Image thumbnail (good)

Layout:

  • Image placement (good)
  • Header/ footer placement (good)
  • Content placement (good)
  • Margins (good)
  • Text Alignment (good)

Speed:

  • Image loading time (too slow: fixed)
  • Slider cycle (too fast: fixed)

Browser Testing:

  • 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.

Device Testing:

  • 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!


Leave a comment

SEO

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:

On-page optimisations:

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:

Off-page optimisation:

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?

Other tips:

  • 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.
For those who are scared of a post that's filled with just words. This'll be the last time I do this or it'll just kill me.

For those who are scared of a post that’s filled with just words. This’ll be the last time I do this or it’ll just kill me.


Leave a comment

Anatomy of my website

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

The navigation bar is one of the most important part of a functional website so I hand-coded it; asides from the awesome dropdown menu which I will mention later on.

The navigation bar is one of the most important part of a functional website so I hand-coded it; asides from the awesome drop-down menu which I will mention later on. It may look simple but alignment and styling was a nightmare (when I achieved the end result, the satisfaction was immense) .

The footer is hand-coded as well. The good thing about that is I can jam a load of hidden feature to it (the email address is an actual link to user's e-mail composer, ready for sending e-mails to the client)

The footer is hand-coded as well. The good thing about that is I can jam a load of hidden feature to it (the email address is an actual link to user’s e-mail composer, ready for sending e-mails to the client). Of course I didn’t forget the copyright and a link to this very site (just click on my name).

I'm quite proud of these set of picture menus as I hand-coded them (you can produce something beautiful with some html and css plus a good coding book).

I’m quite proud of these set of picture menus as I hand-coded them (you can produce something beautiful with some html and css plus a good coding book). A lot of :hover css on this one.

html table

Okay so I used a html table generate on this one so that I won’t go insane typing out td and tr tags. However the content and css styling were all hand-coded, so there.

Just to prove that I wasn't bluffing, here's a screenshot of me tinkering with html in dreamweaver.

Just to prove that I wasn’t bluffing, here’s a screenshot of me tinkering with html in dreamweaver.

Add-ons (or should I say snippets I downloaded from the internet):

My first outside resource/bits of code. This smooth and speedy drop-down menu is called Tinydropdown2. It's brilliant, if you can handle the mass amount of CSS they chuck at you that it.

My first outside resource/bits of code. This smooth and speedy drop-down menu is called TinyDropdown2. It’s brilliant, if you can handle the mass amount of CSS they chuck at you that is.

Flexslider for woothemes. A no fuss slider that's highly customisable (even the javascript is relatively clear). I made it suite the site more by changing the colour of the arrows in Photoshop and adding captions (this took a while and a load of tinkering with opacity,, colors, postioning etc)

Flexslider by WooThemes. A no fuss slider that’s highly customisable (even the JavaScript is relatively clear). I made it suite the site more by changing the colour of the arrows in Photoshop and adding captions (this took a while and a load of tinkering with opacity, colors, positioning etc).

Soh Tanaka's clean and effective jQuery image hover gallery was perfect for my simple needs. It looks cool and required minor adjustments (had to delete some hidden links here and there then replacing images etc).

Soh Tanaka‘s clean and effective jQuery image hover gallery was perfect for my simple needs. It looks cool and required minor adjustments (had to delete some hidden links here and there then replacing images etc).

Here's me dissecting flexslider's css file, thankfully it's all clearly labelled. Very nice.

Here’s me dissecting flexslider’s css file, thankfully it’s all clearly labelled. Very nice.

Other stuff/breakthrough (well at least I think they’re cool)

On the form page I linked a thumbnail to the form so that  people can easily access a bigger version. If they're not happy with that they can click on PDF link at the bottom (this was easier than I thought to implement).

On the form page I linked a thumbnail to the form so that people can easily access a bigger version. If they’re not happy with that they can click on PDF link at the bottom (this was easier than I thought to implement).

Google maps were kindly enough to give me a n iframe code for their awe-inspiring map box (yes we’re calling it that). That wasn’t the breakthrough though, the fact that I’ve managed align everything the way they are is. Seriously I’ve lost couple strands of hair trying to do it but hey that’s part of the learning/coding process right?

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).


Leave a comment

Website evaluation

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).

Purpose

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.

Qualities

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.

Technical-wise, asides from the hand-coded (menus and overall structure of the site, I’ve also took some snippets on the internet to further add dynamics to the site (specifically I downloaded the code for : a JavaScript slider, which I edited to fit the theme of my site; a jQuery hover image gallery and a JavaScript drop-down menu). For more details about the technical workings of my site read this post. In future I hope to become sufficiently skilled in JavaScript and jQuery so that I can hand-code some of the dynamic stuff myself.

Original content

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.

Production process/scheduling

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.