Mobile optimising your website, using Responsive Web Design, can initially be a daunting experience but anyone who is familiar with CSS will find the process relatively easy.

A common method is to use media queries to serve CSS, based on the browser’s dimensions. iPhones are 320×480, the Samsung S3 is 360×640, the iPad has a resolution of 1024×768 and there are a gazzillion other device sizes in and around this area.

Retina Display

The first thing to consider is document setup. You need to design your mobile version and imagine how it would expand in a liquid layout. What size should you create your document?

Retina display is the term Apple use for the display on their phones and tablets. Usually – the higher the resolution is on a monitor – the smaller things physically get, on screen. (Adjust your monitor to a low setting and you’ll see that everything looks massive). Apple’s devices have a high resolution but a small screen, so they up-scale the images to twice their actual size. You therefore have to make your images twice as big and then set the size with CSS. There are some javascript methods around but this is the basic way.

Your document should therefore be twice as big as it would appear on the phone. Therefore, you should create it at 640px width and any height. It sometimes helps to create it at this size, add guides and then increase the canvas size, this will help if you need to create wide background images or work out how it’s liquid layout would work.

Here is how I created my document:

Future Proof

The thing to remember is to future proof your layout as mobile screen sizes are changing all the time. To do this – you need to implement a liquid layout with a minimum and maximum width. When implementing my mobile friendly site, I decided that anything that has a width over 767px should be fine to display the desktop version of the site. Edit: it’s probably best to have a view for devices between 768 and 960px / full width of your desktop site as when you force the viewport to a certain zoom level you can run into complications.

Media Query

1
2
3
4
5

/* regular desktop styles here */

@media only screen and (max-width : 767px){
   /* mobile styles here */
}

This is the basic code that will allow you to start optimising your site. It basically says that anything with a width less that 768px will use the following styles. You would still set your desktop styles first above the media query and then override anything you need to, within this media query.

min-width & width:auto

This often consists of widths. You’ll probably be needing to give your containing div a min-width of 320px to stop it getting overly squashed, in the off a user has a tiny display.

1
2
3
4
5

div#wrapper{
        min-width:320px;
        max-width:767px;
        width:auto;
    }

As much as possible, widths should be set to auto so your layout expands up to 767px for small tablets, differing screen sizes in portrait view or when people use their phone in landscape view. You can in fact target these separately but with a liquid layout, there’s not much point.

Scaling Background Images

1
2
3
4
5
6
7
8

div#wrapper div#header h1{
        background-image:url(/images/richard-stelmach-logo-mobile.gif);
        background-repeat:no-repeat;
        background-position:top center;
        background-size:320px 409px;
        height:409px;
        margin:0 auto;
    }

As my logo is twice as big to maintain quality, I then had to set it’s size in the CSS to position it correctly in the h1.

Mobile Font Sizes

You can use regular pixel font sizes and they’ll appear at a similar size to normal. Sometimes however, the iPhone will increase the font size of certain elements, especially if their size isn’t defined. To avoid this, use:

1

-webkit-text-size-adjust: none;

Stopping the iPhone from Displaying the Desktop Version

To ensure your mobile version is displayed, add this meta tag within the :

1

<meta name="viewport" content="initial-scale=1, maximum-scale=1" />

Testing

If you don’t have a Mac, the easiest way to test is simply to resize your browser. Once it’s finished it’s useful to test it on devices but so far I don’t know of an easy way to do this, other than using my actual iPhone itself. Opera Mobile Emulator has a variety of Android devices that is a great way to test and as it’s downloadable you can test local files. http://ipadpeek.com/ is useful for testing how your site looks on an iPad though I’m not sure this is accurate.

Conditional Javascript

You may find that some javascript functionality is inappropriate on a mobile. I found that my lightbox gallery didn’t work as well on the phone so simply directed the user to a new page and inserted a back button for the user to go back to the listing page.

1
2
3

if($(window).width() > 767){
//javascript for desktop version here
}

Server Side Device Targeting

Alternatively you could link certain javascript files or exclude content by using the handy PHP script called Mobile Detect.

Conclusion

There was some further work required to determine whether the page had been called by an AJAX request. I would recommend this post about detecting AJAX with PHP which I found very useful.

My site took a day to optimise and most of that time was due to some javascript issues when implementing my non-lightbox gallery. For small scale sites, mobile optimisation can be done relatively quickly and easily and with mobile usage increasing constantly, it’s becoming a necessity.

I recently created a logo and a number of promotional images for my friend’s Chrome application, Fuskr. In this post I’d like to outline some of the logic and ideas behind the logo design.

What Does the App Do?

The starting point was to look at what the app did, download it and try it out.

“Create a gallery of images based on one image that contains a number by incrementing and decrementing the images.” – Fuskr app description

The term “Fusker” is also described on Wikipedia which I also read as a part of my research.

I also had a look at Chrome’s app store to see what other people did.

What Should the Logo Design do?

I established the logo design needed to:

• communicate the function of the app
• look modern and professional
• incorporate the image browsing theme
• communicate the cycling / gallery of images
• be easily readable and identifiable
• communicate its message in its simplest form – minimalist

Research, Developing Ideas and the Final Design

Having established this I looked at photo / polaroid icons on various stock photography sites which usually have pretty high quality “web icons”. I realised there was a universal icon for landscape photographs of the mountains/hills. Also, sometimes the green grass and blue sky type icons are used to represent photographs. Given I also wanted to communicate it was an app – I need to incorporate some of the good old rounded corners and shininess to logo.

The research generated a lot of ideas for me to work on and I immediately had a clear direction. I played around with different imagery shapes, initially starting off in black and white (which I often do when creating logos) and aiming to create as simple but effective representation of the message as possible.

Here is a progression of nearly all of my ideas that I developed in Illustrator. Please note that it slightly pains me to share developmental work as often the design will go through some hideous incarnations before reaching a final design that is ready to show to the client!

As you can see – I established the stacked effect fairly early on and most of the work was finding ways to incorporate the photo symbol with the ‘F’. This formed the icon design for the app which would be used at smaller sizes and for the app icon. I then needed to find ways to show the whole “Fuskr” within the icon – I explored different ways but really I had established this early on and then it was just a case of getting the colours, gradients and shininess right. I believed the typeface should be a sans-serif font as I feel sans-serif fonts seem a bit more modern.

What Colour Should it be?

I found the logo worked with many colours which often I feel is a sign of a good logo, hence I often initially work in black and white – and incorporate the colour later. I found that the blue was in danger of looking like Facebook, the black and a bit unfriendly, the orange was okay but I felt the red stood out the most + this shade of red is popular in Summer fashion at the moment. I did in fact look at some fashion sites to find out fashionable colours.

Summary

Once I had finished the design I showed it to my friend+client, he was immediately happy and content with the logo which was great! The project took me roughly 5 hours and I thoroughly enjoyed it. Logo design is one of my favourite forms of design as it allows you to consider the design at a very pure, conceptual level and challenges you to visually communicate a message in one simple graphic.

These are my favourite comic fonts used at the moment on my comics and illustration site mindvomit.co.uk. I thought this list of free comic fonts may be handy for fellow illustrators / designers and comic artistes.

Here are my favourites and links to where you can download them for free:

• Gilles’ Comic Handwriting – great for speech
• Double Feature – I use mainly for ‘mindvomit.co.uk’ sign offs
• Indy Pimp – Headline font or exaggerated speech + I use for the mind vomit logo
• Maybe but not Always – love this thick marker handwriting font – I use mostly for the main title or sign off
• Goudy Stout – great vintage / retro feel to this font – I use for the titles of many of my comics
• Legion Slab – another retro font, I think the term would be woodcut style font, I use this for graphics / ads mostly. It reminds me of early to mid 20th century but I have no idea if this is accurate!
• Dancing Script – a lovely italic script font, again I use this mostly for ads or headlines – it contrasts nicely against Legion Slab or Goudy Stout

For examples of their usage – visit my comic and illustration site, mindvomit.co.uk.

I hope you find it useful and if anyone has any other favourite fonts, please feel free to leave a comment.

I had high hopes for the Wacom Inkling, of course I was dubious that it would accurately convert my drawings into a digital form just by using a sensor and special pen but the demo and marketing of the product looked so damn good and Wacom have a great reputation for their graphic tablets. Before I begin I will say that I read all the tips on how to use the inkling, tried different settings and even different types of paper.

As you can see above, the results speak for themselves. Okay, it doesn’t look aweful but there are many descrapancies between the original drawing and the inkling version mainly in the form of lines being in the wrong position. As I draw comics, the accuracy of the lines is pretty crucial, so really even minor differences can be quite bad.

But it gets worse:

Here you can see how badly it can misplace lines to the point where it becomes unusable. I found the best method is still drawing, scanning and auto-tracing in illustrator to clean the drawing up a bit.

Also, as you’re limited to just the ball point pen – it can be restrictive in comic drawing where I often like to use a variety of pen sizes to alter the thickness of lines or use a brush tip pen.

One of the things I liked about the inkling is vectorising the image by taking it into Illustrator and I thought I would then be able to adapt the points / anchors on the lines to do things like change expressions or move body parts – you can after all, create layers with the inkling. However, this resulted in far too many points on the lines to be able to do this – probably one of the reasons the lines often appear jittery or scrambled.

I found I got better results when drawing large images in the centre of the page but this isn’t very flexible.

Finally, if you don’t make a mark for a certain number of seconds the pen goes into standby – you could probably notice this if the green light stops flashing (which it does when you make a mark), but when you’re focussed on drawing it’s easy to miss this, which can often result in this:

Conclusion

The Wacom Inkling is too temperamental, it will often misplace lines and distort the image. Even when drawing in a way that the inkling prefers you can still run into problems and the whole experience becomes more time consuming than using a good old scanner. I hope that the product develops and future editions become usable but in the mean time I would definitely recommend avoiding this product.

Long live the scanner!

View the Wacom Inkling vs Scanner comic here

For the last seven months I have been creating comics and publishing them on my tumblr blog – mindvomit.co.uk. In my first month I received around 240 unique visitors and in my last month (November 2011) I received 58,828, a 24411% increase in traffic! However, this was mainly due my Narwhal – The Baddest Mother F*cker in the Ocean post that was unusually popular, generating 56,015 unique visits. If we take an average month like October – the percentage increase in traffic is 174%, which I think is still pretty good.

I want to share my finding and tips to promoting comics (or any other content really) via social media.

Submit your content to all of the major social media sites

Persist in submitting your content to all of the major sites – for a while I received no Stumbleupon views at all and then I had over 96 thousand. Especially with stumbleupon you have to gain link juice by submitting links and also stumbling other people’s link within the same category, also try following similar people, in time you should see this pay off.

One thing I’ve learned is that one post may do amazing on one site and rubbish on another. With my Narwhal post it gained 96k views on stumbleupon but on reddit.com it gained 4 up votes and 3 down votes so only received 137 visits! Other times reddit.com has got me more visits so it pays to submit to different sites.

Which Sites Generate the Most Traffic

In my experience stumbleupon has the biggest potential to generate visits, reddit.com is also good for comics – be sure to submit to the webcomic category – for stumbleupon I have focussed on ‘humor’, ‘webcomic’ and ‘cartoons’.

As you can see on an average month, reddit usually gets me the most traffic:

<

Focus on Niche Tags and Categories

Make use of the tags but don’t go overboard, it’s best to focus on just a few key and relevant categories and try and get noticed in that area.

Google labs indicates cartoon and comic being the most popular keywords: http://www.google.com/trends?q=webcomic%2C+comic%2C+cartoon

But then again it will be harder to get noticed in this area so webcomic is also useful!

Like other people’s stuff and interact

Liking other people’s work, especially on tumblr.com will atleast ensure you appear in their timeline and they may check out your work and potentially like/follow you in return – it’s common sense. Also engaging with users and effectively networking helps build brand loyalty.

Use Campaigns

To gain more tumblr followers I ran a campaign where I offered to draw the user’s tumblr profile pic for free in return. Not only did this allow me to draw some interesting and fun content for my site – it also did draw quite a few extra people in, helping me increase my tumblr follower count.

Social Media Uses

• Twitter: I use this to keep people up to date when I post a new comic, it also allows me to interact with my users – building customer loyalty. If someone retweets me it also helps brand awareness.
• Stumbleupon.com: Like other people’s stuff, follow people and then submit your own work to generate more visits to your site.
• Reddit.com: submit your content to a niche category to generate visits to your site
• Google+ & Facbeook:I haven’t put much time into either of these as focucs on driving traffic to my tumblr blog (where I also gain followers), but both are really for enabling people to follow your work and interacting with users. I do have a facebook like button on my site which I think does help people share my content – which is always good for the viral advertising action.
• Digg.com – I have had no luck with this thus far – but I imagine like stumbleupon.com you have to put the time in – digging / following other users.

The overall purpose of Social Media is basically promotion, building brand awareness and customer loyalty.

I hope you have found these tips useful and informative, feel free to ask questions or check out my comic site at mindvomit.co.uk.

• Don’t burn out – it’s good to build up a lot of posts in your drafts so you don’t run out material. If you post everything within a few days, gain popularity but then don’t post anything for a few weeks it may damage all your earlier efforts!
• Post regularly – post regularly and at similar times so people know when to expect new material. Scheduling posts can help with this. If you have enough content, 2 or 3 posts a week is a good rate. I post once a week which probably isn’t ideal but does mean each post is higher quality and I don’t run out of posts.
• What’s the best time to post? I’m not sure I’ve mastered this but logically the consensus seems to be in the morning before work/education, lunchtime and after common working hours when people get home – 5.30 to 7.00. I read somewhere that the peak traffic times for tumblr at 6 to 9 but there doesn’t seem to be any concrete facts.
• Follow people who post similar things – common sense says they may check out your blog and follow you if you’re posting similar stuff to theirs.
• Like lots of things similar to your blog – again, this may hook people in to check out your site.
• Choose a good theme and keep it simple – there’s shed loads of themes but some people bastardise them or choose aweful themes. Basic and simple is best.
• Another method is to reblog other people’s content – this means you can blog more often and also hooks the person in who you’ve reblogged. The only problem with this method is that it clutters up your own homepage if people come to look at your original content. This has put me off following lots of people even though their material is good, they reblog a lot of sh*t!
• Submit your posts to online news sites etc like reddit.com, digg.com etc. The odd post may be hit and result in new followers and lots of visits!
• Use google analytics

I’ve also added a domain name to my tumblr blog, which I may write another blog post about but for now, please take a look at my site: http://mindvomit.co.uk, I’ve recently designed a logo/emblem to place on my comics:

On tumblr, it’s really simple, just customise your theme, go to the theme tab and add some custom HTML. Where you see all the tags, add the following code above or below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

{block:Posts}
{block:Photo}
<meta property="og:image" content="{PhotoURL-500}" />
<meta property="og:image" content="{PhotoURL-400}" />
<meta property="og:image" content="{PhotoURL-250}" />
<meta property="og:image" content="{PhotoURL-100}" />
<meta property="og:image" content="{PhotoURL-75sq}" />
<meta property="og:image" content="{PhotoURL-HighRes}" />
<meta property="og:url" content="{Permalink}" />
<meta property="og:title" content="{Title} - {Name}" />
<meta property="og:type" content="article" />
<meta property="og:description" content="{MetaDescription}" />
{/block:Photo}
{/block:Posts}

In this case I’ve only applied it to the photo type posts as this is the only content i’m interested in generating ‘likes’. You’ll also need to add a Facebook Like button to your posts, some themes give you this option or you add it into the code yourself.

You’ll also notice that I’ve added multiple image items, this is fine by Facebook as you’re effectively listing all the images related to that post.

To see the generated HTML in action, visit one of my posts on my tumblr site and press ctrl+U to view the source.

It is possible to add your facebook username and app ID but when testing it, it always said it had a problem with the domain, even though I had added the URL of my site in the options, if anyone knows a solution to this, please let me know!