The iPhone is the new Internet Explorer 6, says mobile developer | Technology | guardian.co.uk

The iPhone is the new Internet Explorer 6, says mobile developer | Technology | guardian.co.uk

While doing research into mobile web for my PRP, I've come across an interesting article from the Guardian website (Feb 2010). Charles Arthur is reporting on the opinions of Peter-Paul Koch who warns that the iPhone is becoming mobile web's equivalent of Internet Explorer 6 (hated by designers - see http://www.bringdownie6.com).

A quote from Koch states "The iPhone has become an obsession. If we don't pay attention, we'll have a mobile web that only works on the iPhone. And then we'll have the real mobile web that wasn't made by us and doesn't give a shit about web standards and best practices."

I think I agree with him!

Another pointed comment "No "mobile web development" specialist ever mentions Nokia ever. After all, Nokia only sells more smartphones than BlackBerry and Apple combined, so there's no reason to mention it." really make you think about this iPhone 'obsession'.

Piracy Final

Located at: http://jennoe.x10.mx/piracy/1/myths.html

Working Version

Here is a working version of the site how it look at the moment: http://jennoe.x10.mx/piracy/1/myths.html

I think I like it!

I seriously need to get some reliable web hosting!

More Progress

This is how the website is looking at the moment. The jQuery extender is there but at the moment I haven't really worked out how I'm going to match the right text up to it's respective myth. Hmm.

Browser Compatibility

Google Chrome -

Firefox -

Internet Explorer -

You can't really tell in much detail here, but it looks better in Chrome and Firefox rather than IE, mainly because IE doesn't support the text-shadow property, and also has a fit trying to run a simple piece of JavaScript.

Can be seen live here: http://jennoefur.comyr.com/piracy/myths.html

Pretty styles!

So we start off with a line of text yeah?

Add a bit of CSS styling and... bam!

I was originally trying to embed some webfonts with @font-face but it doesn't seem to like working within JavaScript so I've decided to go with one of my favourite classic fonts; Century Gothic. I think it looks pretty smart with some styles thrown all over it. I have used the CSS3 property 'text-shadow' though, which requires a webkit browser.

Close-up -

JavaScript Array

In order to make my piracy myths appear randomly on the webpage I have used JavaScript to create a function. An array has been created containing all the myths then the floor() and random() methods of the Math object are used to pick one out at random. The code for this is demonstrated below -

function getMyth()
{
var piMyths = new Array();
piMyths[0] = "Pirates only want things for free.";
piMyths[1] = "Downloading music damages the artist.";
piMyths[2] = "No artists support piracy.";
piMyths[3] = "Piracy is stealing.";
piMyths[4] = "Piracy will kill creative arts.";
piMyths[5] = "Digital piracy costs the industy billions.";
piMyths[6] = "Piracy is illegal, and therefore wrong.";
piMyths[7] = "Pirates are all young people who don't really understand how society works.";
piMyths[8] = "Using pay services is so much easier.";
piMyths[9] = "It isn't expensive to just pay for stuff anyway.";
piMyths[10] = "You don't support the band by pirating their music.";
var randValue = Math.floor(Math.random() * piMyths.length);
document.write(piMyths[randValue]);
}

By using an array more information can be added quickly and easily by just editing this one piece of JavaScript. I have placed this script in an external .js document that can be linked to from any of my HTML pages. Then all I have to do is call upon the JavaScript function in the body of my HTML document in order to make the random quotes show up.

This can be see in action at http://jennoefur.comyr.com/piracy/arraydemo.html. Refreshing the page will bring up one of the randomly selected quotes.

Colours + Backgrounds

Experimenting with colours on a manipulated texture for my background image -

Blue -

Green -

Red -

Designs

I've been making some mock ups in Photoshop for this project, and I think this is more helpful that creating wireframes. I prefer the second design here, and think I'm going to have a fairly dark colour scheme, with big emphasis on the typography.

Wireframes

Not too sure how useful these really are for this project, as it's mostly based on the aesthetics the wireframes just look empty.

here's a pirate

First of all, here's a pirate. I don't think it really has anything to do with anything but there you go. I think he's cute.

Progress..

I think my piracy project is going quite well so far.

I will post some of my development work shortly.

Piracy Myths

Okay so here is a list of the myths I intend to bust:

• Pirates only want free stuff
• Downloading music damages the artist
• No artists support piracy
• Piracy is stealing
• Piracy will kill the creative arts
• Digital piracy costs the industry billions
• Piracy is illegal, and therefore wrong
• Pirates are all young people who don't understand how society really works
• Using pay services is much easier anyway
• It isn't expensive to just pay for stuff
• You don't support the band by pirating their music

Most of these statements are claims made by anti-piracy groups, or are just common misconceptions. All that stuff about you wouldn't steal a handbag, and it's not even stealing...

Schedule

Here is a Gantt Chart showing my schedule for the Simulated Client project.

Simulated Client Project

The Brief:

Produce a short multimedia piece that informs about or illustrates Digital Piracy.

Proposal:

To answer this brief I propose to create a pro-piracy website informing about myths within anti-piracy campaigns. It will mostly focus around digital piracy within the music industry, but also touching upon the film industry.Through research of digital piracy I have discovered that there are many points argued by anti-piracy groups that can be disputed and sometimes proven wrong. Some examples are –

• Digital piracy costs the industry billions every year
• Piracy is stealing
• Pirates are all young people who don’t understand how society really works
• No artists support piracy
• You don’t support bands by pirating their music

I intend the website to be very simple but also focused on aesthetic design, with a clean, modern look conforming to current design trends. It will be created using HTML and CSS, with JavaScript being used for certain elements.

I have taken inspiration from the website' WTF Should I Make For Dinner?' with regards to how my piracy website will work.

On this website a link to a different recipe is displayed each time the page is refreshed or the user clicks the link to display a new one. I would like my piracy website to work in the same way, with a different myth displayed on each page. Using large type to state the myth, I will then give the user the option to read more information using a link. When clicked, I plan on having more text appear explaining why it is untrue. There are examples below demonstrating this.

Piracy

THIS IS A NEW YEAR

From this point everything is fresh.

I would like to make a new fancy blog on my own website, but then I know I'd get caught up in designing it when I'm actually supposed to be doing work.

So I won't.

I'll just write a big message like this saying that from this point the work will be GOOD.

Title Ideas

Final Wireframe

After experimenting in Photoshop with some of the layout used in the previous wireframes, I found none of them were really very effective. I've created a new one like this which is working much better as a design.

Basic Wireframes

I want a new blog

Stupid crappy Blogger is doing my head in, I need something better!

Considering getting 123-Reg's student offer, it's a bit of a bargain I think...

Second Project - Development

So after looking at the websites of existing photographers I can determine that they generally have simple designs, which makes sense since you wouldn't want to distract from the actual work. The colour schemes seem to include a lot of grey, with the odd splash of colour thrown in. To me this also makes sense since the website will be showcasing a number of photographs which could be made up of various colours, by using blacks, greys and whites you will be sure that none of the colours will clash.

The website for Sean McGrail, Photographer and Film Maker will:

• be simple
• be pretty
• have a grey, black and white colour scheme
• use a splash of red here and there
• include a Flash gallery, slideshow and navigation (this may change)

This has been worked out with the client to work around my project. Not too sure about the flash at the moment, I want to have a slideshow on the main page that cycles through photographs automatically, but as I will also be including a proper gallery I'm not too sure if these are too similar to count as two different elements towards the required three.

Photographers

I've been looking at the websites of existing photographers to get ideas and inspiration. There seems to be a general theme of simplicity in the sites.

Mattstuart.com

This is a really nice website, simplistic clean design, visually effective and includes cool Flash elements. The heading for the website is in Flash and changes as you navigate around the site. In this screenshot of the homepage it says 'Matt Stuart Captures Cops' but on other pages 'Matt Stuart Frames Strangers', 'Matt Stuart Shoots Rabbits' and 'Matt Stuart Exposes Himself' which I rather like. Colours are very basic, using just greys, blacks and whites in the actual design, with brightness only being added through the actual photographs.

Carlwarner.com

The main page here looks nice and simple, but overall I'm not really a fan of this design. When you click the links to the different pages they open in a new window, all of this being Flash-based. I just find this a bit annoying. However, I like the colours that have been used, with minimal amounts of bright elements against a dark grey background. The work is also very good, look at the 'foodscapes'!

Stevenbrooksphotographer.co.uk

This website is a little more decorative than the previous two though is still fairly simple. There is the same dark grey theme used here, along with a few simple flowers framing the content. I really like the use of typography in the headers here. Overall very nice!

Second Project

Been a bit slack on the posts lately!

For our second brief we are required to create a website for an artist or arts organisation which is designed to increase traffic or customers for the client. The site must have a minimum of five pages, include three different Flash elements and a journal page that populated by drawing on a MySQL database using PHP.

This project works out really well for me because my friend recently asked me to create a website for her boyfriend who is a photographer and film maker, so I can kill two birds with one stone. Not real birds.

Ideas and wireframes to follow...

Flash Advert Finished!

I did it! Quite pleased with it really, since to begin with I had no idea where to start!

Flash Banner Project

We're now required to create a Flash banner advertsing a mobile phone, that features animation and interactivity. It's supposed to be for the phone that we own, but everybody has the same one, an iPhone. Haha. I don't however, I have a really basic Nokia that everyone must think is primitive in comparison.

It's a Nokia 2330 and doesn't do a lot but at the moment it's working for me (until I get an iPhone ha).

I think a Flash banner for this phone should focus on its simplicty as a good thing rather than a hindrance.

After some doodling and sketching I've decided upon an idea I'd like to do but to be honest, I don't really know where to begin. I've been looking at some of the user interfaces of old operating systems, specificly Windows 1.0 to 3.1 which compared to the operating systems of today are extremely simple. I would like to create a flash advert that shows the desktop of one of these operating systems, and allows the user to click on the icons and such but with not many options available, demonstrating the simplicty of it. This could then eventually display a message such as "Not all technology should have stayed simple, but the Nokia 2330 should" or something along those lines. As in, it's good to be simple and not over-complicated! After all, not everybody actually needs a phone that can browse the internet or run loads of apps or even play music.

An advert like this could probably never be real because Windows wouldn't let Nokia display their OS in a bad light, even an old one. Another complication is the initial user reaction, as a banner just displaying an old OS could easily be ignored, in the same way the awful fake Windows popups are.

Aside from that, I have no bloody clue how to start the idea in Flash!

Andrew Bradshaw

This is the personal website for Texas designer Andrew Bradshaw, who is creative director for Church Plant Media. He creates elegant, simple designs that are mostly for churches or other religious establishments. This is not a subject that appeals to me at all, but the designs are all very modern and sophisticated and since I'm looking at this from a design point of view I'll try not to let my (non-existent) religious views affect my judgement. Haha.
His personal website is a great example of his work in itself, being clean and sophisticated with a clear layout that draws the user in.

The header uses a dark brown textured background that looks great against the muted shades used in the rest of the design. I really like the use of type in the header as well; I have always been a fan of typography and the contrast of the capitalized serif font against the lowercase sans-serif really appeals to me. The use of colour in the word 'design' helps it to stand out amongst the earthy brown.

The navigation for this website is rather nice, with creative use of hover effects. When the user hovers over the different links they are underlined by a block of colour. There is also differentiation between the portfolio links and the personal links, which are faded out slightly. However, I'm not sure the word 'portfolio' is really necessary as it's quite clear that this is what the links are for and it just looks quite obtrusive.

The use of imagery on the main page is attractive, giving the user a quick view of what the designer's work is like. He has also added faint drop shadows, giving the illusion of 3D and depth.

An element of this website that bugs me a bit is the text 'Web. Simple.' as to me it looks quite irrelevant to the design. It has been connected to the rest of the design by matching the font colour with that of the word 'design' in the header, but the actual font seems out of place. The hand-written style is on-trend in web design at the moment, but here, mixed in with the other various font styles, I think it is a bit too much. I myself would not use this amount of different fonts in a design. However, looking at the rest of the design and the other featured in his portfolio, the diesgner clearly has a solid grasp of typography and how it should be used. This can be seen in the company website, Church Plant Media.

Overall this designer has a nice style, creating modern sophistacted designs with a personal edge. The use of textures throughout his portfolio is noticeable, and this is clearly something he is fond of. The use of type is also significant, an is mostly used very well.

Wild Clothing - Finished

I think I've finished this now. To see the site working go here.

I changed the fonts used, added some hover effects to the navigation and managed to get the footer working properly. The paint splatters are displayed at the bottom of the page no matter how long it gets.

There are still a couple of things that bother me but I don't know what to do about them. The background looks really plain being just white, I tried adding a simple texture to it but it just made it look too busy along with the paint splatters. I don't know if it's just because I've been staring at it for ages, but the design seems a little boring to me now.. I dunno.

Signature Illustration Blog

If you're interested in art or illustration, a great place to check out is the Signature Illustration Blog. They regularly showcase amazingly talented artists and illustrators of all different styles, and also show hand-drawn animations and short lessons that can be useful. It's an excellent place to browse to gain inspiration or simply just pass some time by looking at beautiful paintings.

Wild Clothing Final Design

This is the design I've settled on. I might still change fonts/background colour etc.

Wild Clothing Development

I've tried the wavy navigation design I came up with earlier in Photoshop but I think it looks a bit tacky to be honest. Don't think I'll be using this.

Ana Bagayan

I recently found the website of an amazing artist called Ana Bagayan who has done work for the likes of Rolling Stone, Diesel, Honda and Sony. Her paintings have somewhat sickly-sweet fairy tale like themes, though there is often something dark or surreal lurking in the background. I advise you all to go and look, discover and appreciate.

Final Wireframe

This is the wireframe for my final design, though it's a pretty messy looking one. I've decided to keep the messy pattern for the header and use the same effect on the footer. The wavy navigation just didn't look very good, and I didn't really like the vertical navigation either.

Super cute website

Design studio Meomi have what is possibly the cutest website I've ever seen!

The content is set within what is apparently called the 'cloud house', which is created in Flash and features numerous animated little critters. Various sounds and animations play out when the cursor is hovered over the different areas. I love it and think everyone else should too!

(Very basic) wireframes

This is the first wireframe I came up with. I'm quite liking the wavy navigation thing at the moment but I'm not too sure... As you can see from the picture in my last post the font used on the actual shop is quite curly, and this teamed with the bright red and white (though you can't see that in the picture) makes it quite reminiscent of the Coca Cola logo/design. Maybe this curly navigation make take that a bit too far...

Sticking with the wavy navigation. Thinking about having some kind of messy decorative stuff at the top, like cartoon style explosion lines? Maybe paint splatters?

I think I will stick with the messy pattern on the header. Got rid of the wavy navigation here and stuck the navigation on the left hand side. Still not sure though...

Think I'll go play in Photoshop again.

An actual decision

After some sketching and playing around in Photoshop I've actually come up with a few ideas and made a decision about what to make this website for. I tried a few ideas for The Lounge hairdressers but inspiration wasn't exactly jumping out at me. What worked out a lot better was designing for the shops Wild/Wilder clothing. The shops themselves are painted in a very bright red, with white text and so I think this would work well for the website also.

Note: I didn't take this, can be found here

More to come...

Dotty's Cafe...

I just found out this place is probably closing. Damn economic climate and all that jazz... Guess it would be a bit silly making a website for a place that's closing...

Mini Project - A Website in Two Weeks

For this 'small' project I am required to create a website for a retail environment within the space of two weeks. So basically it's like the project that we had the whole of last term to do in two weeks. Fine by me..

On the day we were set this task I came up with an initial list of places I could create a website for.

Page 45

One of my favourite shops in Nottingham. It's a comic book store that sells every type of graphic novel imaginable. Their website has been under construction for a while.

Wild/Wilder

Two vintage and second hand clothes shops owned by the same people, hence the similar names. They do not currently have a website.

Alley Cafe

A vegetarian cafebar in one of Nottingham's alleyways. They show artwork, have alternative bands and artists on and serve great food. They already have a website designed by Nottingham company Seismik.

The Plough and Harrow

My local pub in Hucknall. Not much to say about it really, they very occasionally put bands on or have other events.

Mayfair Restaurant

A Chinese restaurant located on Mansfield Road. It's bring your own booze too! They do not have a website.

Ice Nine

Hippy/indie/stoner clothes and accessories shop in Hockley. I loved this place when I was younger but don't go in much any more. Their website is under construction.

Homemade

A nice little cafe that serves some good homemade grub. Don't have a website.

The Lounge

A newly opened fashionable hairdressers in Hucknall. Do not have a website, could be an opportunity to approach them about one?

Dotty's Cafe

A vegetarian cafe on Mansfield road that has a 1950's kitsch kind of style. Could be fun designing a website with the same theme. They currently don't have one.

I've looked around at some people's blogs and it seems like some people have the same ideas as me. I originally wanted to create a website for Page 45 but after searching for a bit I believe I came across what is to be their future design. It is styled like a comic book itself and is very good! I don't feel as if I could compete with what they've come up with, especially since I think the comic-book style is what I would have done anyway.

Therefore I think I shall create the site for either The Lounge Hairdressers or Dotty's cafe. I'll play around with some ideas before coming to a decision.

Waterfall and Whirlpool Development Models

The Waterfall model is a software development process that works sequentially. The diagram below illustrates the path taken using this process.

This model originated from the manufacturing and construction industries, where it was usually impossible for people to go back and change areas once they were thought to be finished. It was applied to software development mostly because there were no existing models already being used. The key to this model is that each step is thoroughly completed before the next one is started. With regards to software I imagine this can be quite a problem, especially if it is being developed for a client. Things can often seem a good idea in theory but turn out differently when in comes to testing, or people can simply change their minds about something.

The Whirlpool model is much like the Waterfall model in terms of structure, but unlike the Waterfall the idea is that modifications can be made. This seems much more useful, logical even, when it comes to things like software development or web design.