28 Mar 2011
by eviltwinin Design Tags: responsive web design, UX, web design
I’ve recently been working on a project where we’ve been creating a website with responsive solution. This basically means that the website is flexible for being viewed on a variety of devices….better description here, and this is a rather interesting article on it as well.
Anyway – it’s been a really interesting challenge so far. My basic approach has been to create a simple grid structure which is carried over three layouts – a desktop version, a tablet version and a mobile version.
I’ve been creating a wireframe for each version for every key page layout. This means that I am constantly considering each layout, how it needs to be flexible, as well as any limits and alterations I have to make to each version as well each previous version to ensure that the site will work irrelevant of the device it’s being viewed on.
Once all our page wireframes have been created our next step will be to look at the visual variations on look and feel – basically simplifying the CSS for smaller screen widths to reduce loading times. Then the next challenge will be to actual build the pages and develop the CSS. I’m sure we’ll have a lot of tweaking to do but it will be interesting to see how the site develops.
25 Mar 2011
by eviltwinin Design, thoughts Tags: UX, web design
After a discussion (quite) a while back about whether we should have an FAQ page on a site we were working on, I starting wondering ‘do we really need them?’.
In my own experience I will quite often try to find FAQs to get a quick answer rather than having to read a lot of information on a page, but is there a way we can design layout and content to ensure that a user can quickly find the information they’ll need?
I guess for me at the moment I’m not convinced we can preempt when someone will decide to look for a specific answer to a question, and as long as the FAQs really are questions that a customer will ask then I’m still for them.
Anyway – I did find this article that has a few FAQ best practices.
18 May 2010
by eviltwinin code, Design, thoughts
Well, apparently WordPress 3.0 should be released in the next few weeks. For someone who is firstly a designer, then after that a pretty sub standard developer it’s great news. It offers new opportunities to make better CMS driven websites with quite a few of it’s excellent new features.
Custom post types
In the past I’ve found it a little hard to manage different types of content when you are limited to only pages or posts. Now you can make your own custom post types. Excellent.
Menu management
Previously I’d found a plug-in that helped organise the menu items, but the new menu management feature means you can change the order and destination of the links, as well as manage all the sub pages.
Well, there’s a whole bunch of other stuff you can find out about here: WordPress 3.0: The 5 Most Important New Features
18 May 2010
by eviltwinin artists, Design, shop, thoughts Tags: crafts
I can’t help it, I just love useless cute stuff.
Cute sock monsters and stuff by @NickyGibson.
Handmade plush….um….toys? But what would you do with them?
And me….
Well, I’ve only made the sock monkey toy for my nephew, but these things have inspired me to make more useless adorable things…and maybe even get out my sewing machine…
More adorable things
Rebecca Danger
Sushi or Death – Knitted Sushi
14 May 2010
by eviltwinin Design, thoughts
I’ve always been happy using my browser bookmarks to store useful or interesting websites; efficiently organising them into folders. Then I started using Digg. Digg was a good way to remember blog posts and tutorials I found useful, keeping them separate from the sites I liked, as well as being a nice way of letting the author know that I liked what they’d written.
Since then I’ve been recommended a few others, here’s what I think of them all anyway.
I found Delicious to incredibly irritating to use – the tags might make it flexible, but you can’t put anything in to folders, or keep sections separated. It’s also far too blue so becomes a really tedious site to look at after a while.
It’s good at
- Tagging your links with topics so they are easy to find
It’s bad at
- Showing screenshots - appear to be some on the home page, but none of the links I’ve added seem to have them
- Exploring new things – I find the whole tag structure quite awkward personally
- Being interesting – every time I’m on the site that blue makes me want to kill myself
Best for
- Argh……..driving you mad with the same blue over and over again!!!!
I’ve been using Digg for a long time – I found it to be quite a friendly, nice site to use. Seems to be a good community, and it’s easy to search categories to find something you are interested in.
It’s good at
- Adding blog posts and tutorials
- Telling you how popular the link is
- Find interesting articles – Digg feels quite like a news hub – it shows you latest headlines and has good main category sections.
It’s bad at
- Organising and finding your links – everything is just in chronological order
Best for
- Finding and adding interesting news articles and blog posts
StumbleUpon I quite like – it’s especially easy to add sites you like, but the content other users have added seems to be a lot more juvenile compared the the articles and blog posts in Digg.
It’s good at
- The StumbleUpon tool bar – Its excellent at just quickly adding a site you like, or even one you don’t – you don’t even have to leave the site you are on
- As well as that you can just view random websites with the ‘Stumble!’ button
- Lets you know if you are the first person to add something, and shows you how popular a link is
It’s bad at
- Part of the problem with the ‘StumbleUpon!’ button is that a lot of people add a lot of rubbish, so you can see an awful lot of rubbish, as well as ‘work unsafe’ stuff before you see something good
Best for
- Finding and adding interesting, cool and weird sites and images
So…
StumbleUpon and Digg are both sites I like, with nice features, but Delicious? I really think I might just be biased against that blue.
Anyway, to be honest I’m not massively interested in the social aspect of the bookmarking sites. I like having somewhere where I can keep the things I want to remember, so I think I’m going to stick to the handy Xmarks plugin so I can view my favourite bookmarked sites on any computer, then continue to add interesting posts and things I like to Digg.
25 Mar 2010
by eviltwinin Design, flash Tags: application, countdown, flash
Well, here is my Countdown Timer. It is an Adobe Air desktop application that you can use to count down time until an event. You’ll need to make sure you have Adobe Air installed first, then all you have to do is download the Countdown zip file, extract application file then run it on your computer.
Get Adobe Air
Features
It’s quite a simple little application – here’s a some of the things you can do with it.
Start your countdown
Use the settings panel to name your event and set the date and time. You can specify it up to 15 minute intervals.
Counting down
Watch your timer count down to your event. It will countdown up to milliseconds. You can reset the timer to begin again, minimise it to the taskbar, view the mini countdown version, or just close it.
The mini view
This mini view of the countdown allows you to keep your countdown open without taking up too much of your desktop space.
Download the Adobe Air application package
Get Adobe Air
28 Jan 2010
by eviltwinin code, Design, flash, tutorial Tags: actionscript, adobe air, flash
To help improve my AS3 skills I thought a good starting project would be to challenge myself to create an Adobe Air desktop application, and after working on a Christmas countdown, I decided it would be rather nice to make a Countdown timer.
This article runs through a few things I had to learn in AS3 to create it.
Getting Adobe Air working
First thing I needed to do was ensure that Adobe Air was installed and that everything working.
- Install Adobe Air
- Ensure Flash is updated, and install all the available updates. For Flash CS4 they are here.
- Get the Adobe AIR SDK. Once downloaded this needs to be copied into the AIK folder in the Flash program folder – i.e. C:\Program Files\Adobe\Adobe Flash CS4\AIK.
Phew! Now creating the application…
First step was to get an accurate countdown mechanism. I found this Countdown example which was a good starting point to create a Countdown class in AS3. The basic idea is that it takes the current date and the specified event date then works out the difference.
Creating the event date input
I used Flash UI components for the drop down menus, but controlled their content using my Countdown class. To style the UI combo box component you can edit it in the FLA file, but to change the font you need create a TextFormat variable, then apply it to the component.
var comboFont : TextFormat = new TextFormat ();
comboFont.font = "Calvert MT Light";
comboFont.color = 0x333333;
comboFont.size = 12;
eventDayCombo.textField.setStyle ("embedFonts", true);
eventDayCombo.textField.setStyle ("textFormat", comboFont);
eventDayCombo.dropdown.setRendererStyle ("embedFonts", true);
eventDayCombo.dropdown.setRendererStyle ("textFormat", comboFont);
I then added data to the combo box. It is important to add this data dynamically to ensure that the Countdown is always up to date.
eventDayCombo.addItem ({label: dayStr, data: day})
Reading, saving and using XML data
Check if the data exists
Every time the application opens it checks to see if the user has already set an event date. The first thing it does is specify the name of the file, then where this file should be located. In my Countdown example the application creates an XML file called CountdownPrefs in the user’s My Documents folder.
var prefs:String = "CountdownPrefs.xml";
var prefsFile:File = File.documentsDirectory.resolvePath (prefs);
To check if a file exists on the system you can use prefsFile.exists; this will give a true or false result.
if (prefsFile.exists){
AS3 uses file streams to manipulate data; this makes the process much simpler than in AS2. It opens a file stream and reads the data. When it has completed reading the data the event listener calls the function processXMLData.
readStream = new FileStream ();
readStream.addEventListener (Event.COMPLETE, processXMLData);
readStream.openAsync (prefsFile, FileMode.READ);
}
Processing the data
So, to process the XML data I just use the function to specify the data then close the file stream. Now I can set my event date from the data in the XML file.
function processXMLData (event : Event) : void {
var prefsXML: XML = XML (readStream.readUTFBytes (readStream.bytesAvailable));
readStream.close ();
TITLE = prefsXML.child ("title");
YEAR = prefsXML.child ("year");
MONTH = prefsXML.child ("month");
DAY = prefsXML.child ("day");
HOUR = prefsXML.child ("hour");
MINUTE = prefsXML.child ("minute");
startCountdown ();
}
Saving new data
When the user sets their event date in the application it creates an XML file. First I defined what the content of the XML should be.
var dateStr:String = "<?xml version=\"1.0\" encoding=\"utf-8\"?><countdown><title>" + TITLE + "</title><year>" + YEAR + "</year><month>" + MONTH + "</month><day>" + DAY + "</day><hour>" + HOUR + "</hour><minute>" + MINUTE + "</minute></countdown>";
It then opens a file stream and writes the data to the location specified previously using the string variable to construct the XML content.
var newStream:FileStream = new FileStream();
newStream = new FileStream();
newStream.open(prefsFile, FileMode.WRITE);
newStream.writeUTFBytes(dateStr);
newStream.close();
Delete the data
To reset the countdown application all you need to do is simply delete the XML file then I called my reset function to restart the application.
if (prefsFile.exists){
prefsFile.deleteFile ();
resetCountdown ();
}
Using the Timer Class
So my Countdown function returns an object with the years, months, days, hours, minutes, seconds and milliseconds, then to update my countdown display I need to repeat the call every millisecond. I can use the Timer class to repeat the function call and get the updated countdown object.
timerObject:Timer = new Timer (delay, repeatCount );
timerObject.addEventListener (TimerEvent.TIMER, updateCountdown);
timerObject.start ();
The finishing touches
Creating a custom chrome
To make the application visually nicer I added my own chrome to it with minimise and close buttons, here is how: http://www.adobe.com/devnet/air/flash/articles/custom_chrome_app.html
Creating an application icon
This is very simple. All you need to do is create little image files in the sizes: 128×128, 48×48,32×32, 16×16 then on the publish settings you can add the icon images.
Publishing the application
All you have to do then is publish the application and it’s ready to go. Look out for my next post if you want to download the application and try it out.
05 Sep 2009
by eviltwinin ads, Design, flash Tags: adverts, banner, flash
I was just doing some browsing on IMDB this afternoon and saw this banner. I don’t normally even want to click on interactive banners, but was rather intrigued…
Frame 1 – Draw a car you’d like to sell
Frame 1 – My wonderful drawing
Yes – my car actually does look like that – isn’t it lovely. Erm…
Frame 2 – Cheeky robot
Hard to believe this was actually my fourth or fifth attempt at drawing a decent looking car. He actually had a few different cheeky messages. He even fell over laughing once.
Frame 3 – Are you done?
Cute little jumping up and down animation on the Drive button. I liked the call to action on this too, made me want to click on it.
Frame 4 – Interact a wee bit more
I dislike when interactive banners want you to something, but it does actually seem connected to the rest of the banner. This is a nice way to make you feel like drawing the car actually had a point.
Frame 5 – Aw, he’s actually going to drive it away
So off he goes in to the distance, and I get taken to the landing page: http://www.autotrader.co.uk/CARS/selling/selling_a_car.jsp?platform=DFA
Well, cute little banner that I liked. Fun to use, nice touches…and maybe when I am selling my car I’ll even go to Auto Trader.
16 Apr 2009
by eviltwinin Design
Every time I start designing a website I have a small voice inside my head telling me I should at least think about designing the site for a fluid page width….then I just say ‘Shut up, stupid voice, what do you know anyway’, and happily draft out a 960px width.
When you start designing a website it’s easy to start thinking of it as something flat rather than interactive, but I really should listen to that little voice sometimes and think about how a fluid page width could enhance the page design.
More about Fluid grids.
21 Feb 2009
by eviltwinin code, Design
I was browsing my RSS feed and found this new site IconDock – which uses a WordPress e-Commerce plugin to sell stock icons online. It integrates with PayPal, Google Checkout and a few others. I googled it to find out some opinions on it, and found a few other blog posts about it:
Basic opinion seems to be that it is easy to install and set up, but if you want to customise it, you run into problems with unorganised code, and not very good support documentation. Well, it may have it’s issues, but could still be a handy little plugin.
Previous Older Entries
RSS