Author Archive

Browsing around Facebook pages, you’ll notice that there are some pretty pixelated timeline cover images at the moment. There are a couple of reasons for this, but the good news is they can be completely avoided by following a couple of simple steps.

Facebook cover dimensions

The actual size of a Facebook timeline cover image is 851 x 315 pixels. The minimum size Facebook allows is 399 pixels in width. Any images with dimensions outside of the actual size will cause Facebook to resample the image to make it large enough to fit the image container. Of course doubling a low resolution image will cause it to look terrible.  If you create your cover image to the specific dimensions, you’ll avoid having your image resized by Facebook.

Facebook cover image file size

The other factor that comes in to play to maintain a sharp Facebook cover image is the file size of the image that you’re uploading. If you upload a file larger than 50kb, again, Facebook will take over and re-compress it for you. It’s much better to compress the image down to 50kb yourself using Photoshop. Use the ‘export for web and devices’ (CTRL+ALT+SHIFT+S) to get it down to just under 50kb without much noticeable quality loss.

If you follow these steps, you should end up with a sharp cover image for your new Facebook timeline.

A new year always means new design trends come on board, and also means it’s time to say goodbye to some older trends. With smartphones and tablets becoming the most used devices for browsing the internet, considerations which didn’t previously exist are now making their way into web design.

We can accommodate this by using responsive layout, by changing the design elements depending on which device is being used. However, we’re starting to see desktop websites also being designed with ‘touch based’ interfaces in mind.

You may have noticed Google doing some redesigns of their products over the last 6 months. Although it’s not immediately clear, their buttons have all become larger and look more like proper buttons. For example the Gmail desktop interface is definitely more geared towards larger touch-focused button elements.

I think 2012 is the right time to stop being hesitant about utilizing the power off CSS3 in our everyday websites. With the user base for older IE versions decreasing, and more people using CSS3 compatible browsers, there are endless possibilities for using style sheets. Drop shadows, gradients, text shadows and rounded corners. Where previously we would have to go into Photoshop and create complicated images, wrapping div containers and background images to achieve these effects, using CSS3 lets us do these effortlessly with a single line of text.

Dynamic fonts are another area where we can start breaking some boundaries. With Google’s web fonts, there are now hundreds of different font options which previously didn’t exist. This means less compromise when it comes to designing a website, and not having to stick with ‘web-safe’ fonts if something else would suit better.

For me at least, the initial glossiness of ‘Web 2.0’ design is past its prime. The days where every menu bar, every button and image would be coated in gloss no longer seems as cool as it previously did. Although Apple continues to exemplify this design trend in their OS, I think Google is on the right track moving forward with their softer (glossless) gradients.

And finally, I think we can safely lay to rest the idea that having a person walk onto your screen and start talking to you is a good thing. Of course, there are hundreds more design concepts which were never good, but continue to be used, but in the spirit of moving forward in 2012, I think it’s better to forget those entirely.

It’s important to love your site in order to keep it in top condition. However, sometimes it’s the smaller things that can make all the difference when it comes to your users staying interested in what you have to offer. In the wrong hands, a WYSIWYG (what you see is what you get editor) can be detrimental to your content.

Formatting is the key to ensuring a consistent website. The font controls in some CMS editors may cause your site to fall victim bad formatting. In the past, I’ve seen users apply multiple fonts, font sizes and colours to a single article. This is not a good look for your site, and can make it very hard to read the article. To be safe, make sure you allow your website’s premade text styles to take care of the formatting for you. Some safe uses for text formatting are the bold and italic tags. For headings, be sure to use the appropriate heading tags (h1, h2, h3 etc). Your template should also allow for blockquote tags, which can be used for testimonials.

Another element that can be destroyed by CMS editors are images. It’s important to ensure the images used on your site aren’t pixelated and haven’t been stretched. Stretched or pixelated images look horrible, lower the overall appearance of the site and will likely cause your users to bounce. This is commonly caused by a user manually stretching an image using the CMS editor. The proper way around this is not to resize images using your browser. Use Photoshop to resize (or for a free alternative use GIMP to do this) your images, which will provide a properly sized image without any pixilation or distortion.

To ensure you and your users continue to love your site, give it a check and make sure your content is looking sharp. Follow the tips above to avoid any messy formatting, and use your WYSIWYG editor correctly.

Web design trends move quite fast. For example, over the last 3 years our own website has gone through 3 different designs as we’ve evolved as a company. Web design trends come and go, but it’s important that your site follows some basic fundamentals that will ensure it will at least age gracefully.

If your website’s bounce rate is too high (users arriving at the site and then leaving in under 10 seconds), it’s likely because the users first impression of the site isn’t ideal. When a user reaches the site and leaves so quickly, they haven’t had time to read through what’s on offer. And while the content on the site may be fantastic, if their initial contact with your website doesn’t impress them, they will simply jump to the next site that does.

Websites that were only designed a couple of years ago can already look like they were designed by someone 10 years ago, if they weren’t done properly the first time. Unfortunately, many out-dated methods of web design are still being employed today.

We want to make our users feel comfortable and engaged when they visit our sites, and that cannot be done without a visually aesthetic and easy to use website.

Some common design elements that should be avoided at all costs include:

• Very narrow single column layouts
• Poor colour contrast between the text and background.
• Lack of evenly spaced and/or formatted content
• GIF animations or ‘walk on’ screen videos
• Any use of the Comic Sans font
• Pixelated images, or images that haven’t been properly sized
• Having a mismatched colour palate

If you recognise that you have some of these undesirable elements in your site, it might be time to re-evaluate the way your website has been designed.
At itsimple, we’ve seen firsthand how redesigning a well optimised, but visually tired looking website can boost your enquiries within weeks. So if your website design is lagging behind the competition, or if you’re just after a change, it may be time to look into redesigning your site.

Flash is great technology, and it certainly still has its own uses on the web. At the same time, it needs to be removed from many other places on the web.

If your website is using Flash for an image slideshow, drop down menu, or even to display some page heading text in a fancy font – we need to talk.

Using Flash for these elements has been negated by the introduction of CSS 3 and jQuery, and jQuery Mobile. In the last 12 months alone, the increased support from Adobe and also web browsers for CSS 3 and jQuery has made for some really exciting possibilities when it comes to web design and front end development.

Below are just a few reasons to move away from using Flash on your website:

Long Page Load Times

As a user, Flash on websites can be a real pain. Flash elements generally take a long time to load, as they have to rely on the Flash Player plugin to render the content rather than the browser itself. Using CSS 3 or jQuery provides super lightweight solutions to all your old flash components using far less code and will make the page load much faster. You should find more users staying on your site for longer, rather than leaving when they’re told they need to update their Flash Player to view the site.

Limited Mobile Support

Flash on mobile? Forget about it. iPhones cannot play any Flash, period. Android devices can currently play Flash content. However Adobe recently announced they will be dropping Flash support for mobile devices, which effectively means we will see a further decline in the overall use of Flash on websites.

So what can be used? HTML5 and CSS 3? Certainly. But if we’re looking to replace the need for Flash on mobile, we can go one step further – using jQuery Mobile. jQuery mobile is a very cool framework that allows us to create mobile websites with all the interactive trademarks of a mobile ‘app’. This means screen transitions, swipe navigation, popup dialog boxes and so on. Check out www.itsimple.com.au on your mobile to get an idea of what it’s like.

Non-SEO Friendly Flash Headings

Another use for Flash, which I touched on earlier, is text and page headings. Using Flash to render text is not a great idea, especially from an SEO perspective. Google still has trouble reading Flash properly, and as a general rule, HTML based text is always the best. The reason for websites doing this to begin with, is so they can display non-web standard fonts on their web page. But again, this isn’t the best way to go about doing it.

The better alternative is to use Google Web Fonts. Using this method, fonts are rendered by the browser rather than relying on flash. Because the fonts are stored in Google’s cloud, they can be viewed by anyone, regardless of what fonts are installed on their computer or mobile device. Mobile users and anyone with an out dated Flash player will be able see the site as it was intended, if you use this method.

So while Flash does still contribute to some applications on the web, it’s not something that should be used to implement site features, such as image slideshows or drop down menus.  With the development of CSS 3 and jQuery, there are smarter and more user friendly ways of getting the functionality that we use to have to rely on Flash for.

When it comes to e-commerce websites, there are a few different factors to take into the design. Just like a bricks and mortar store, your online store needs to showcase your products in an attractive manner and let users browse through your offering just as easily as they would in a real store.

Your home page is the first impression, so it needs to grab the user’s attention and communicate your brand positioning, just like if they were walking past your store. Featured products can be put on display show what’s on offer. Or even better, having a large image banner with big bold text with an offer will surely entice anyone landing on your website to check out what’s inside.

Your category or ’browse’ pages display the different areas of your store, where the customer gets an overview of everything on offer within a certain category. The product snapshots in this area should be well spaced out, and provide a clear image with the product name and price. The thumbnail images used to show your products should be large enough to show the product well so customers want to click through for more information.

Clicking into one of these products is where the customer is going to get more ‘hands on’ with the item. This page is crucial to the shopping experience because depending on the way the product is presented, the customer will either leave it or add it to their cart. The information on this page should be formatted so the customer has no trouble getting an overview of everything they need to know about the item.

Product images are key to how well your products are going to appear online. The thing to keep in mind, whether you’re sourcing images directly from the supplier or taking the photos yourself, is consistency. The images need to all appear the same size, with the same lighting and the same background. If half your products have a pure white background, and the others have been taken against a concrete wall, it’s going to really make all your products looks dodgy.
Navigation is also very important, as we don’t’ want the user to get lost while shopping. Similar to if they were shopping in an actual store. Categories, menu items and a breadcrumb trail should all be clear to the user.

So if you’re thinking about starting an e-commerce website, you should ensure that you make the customer experience as easy as possible.

Designing for mobile websites certainly differs from designing for desktop. There needs to be consideration for the small screen size, how you want your brand to be presented, and how the user is going to be interacting with the mobile site.

There are a few different ways of going about designing for web. One of the more popular ways is to design the mobile site to look like a native app. A native app is an application that is installed from a phone’s App Store, and runs the application on the phone rather than in the browser. Designing a mobile site like this is a safe bet, as this usually includes large buttons and familiar navigation. At the same time, these mobile sites can tend to look quite generic and can also restrict design freedom, especially when it comes to carrying over the look and feel of your main website.

Deciding on which direction your mobile website design should take really depends on its purpose and the way it’s going to be used. A good example of a mobile website following the same design style as an app would be the Westpac mobile website.  This site is very functional and essentially serves the purpose of a mobile app, so having it look and function like an app is quite clever.

However, other websites may benefit from a non-typical app looking design. For example, our own website is a recent example that I would like to use (http://www.itsimple.com.au). We decided to avoid the typical app looking mobile site, while still keeping easy to use navigation.  This allowed us to maintain the integrity of our desktop website design, while still keeping some functionality that an app would provide.

Because mobile networks are often slow, your mobile site needs to load fast. This can be improved at a design level. By using smart repeating images/gradients and optimizing the exported images for web, you’re giving users the best chance to load your site quickly.

While a mobile version of your website serves is an essential addition to your online presence, it is important to ensure the design and user experience reflects the nature of your brand, and the intended purpose of your mobile website.

With QR codes starting to become mainstream in Australia, it’s important that we recognize the capabilities and variety of ways they can be utilized. I recently came across this website which I’ve found very helpful to generate QR codes. It allows us more opportunities when it comes to the ways we use QR codes.

The range of formats this website allows users to generate is unparalleled. From simple URL links to business cards (vCard format), iTunes app store links and even a Wi-Fi automated hotspot login. This gives us the freedom to use QR codes in more creative ways.

For example, adding a QR code with an embedded vCard on your printed business cards provides a good talking point, and also allows your potential clients to easily add you to their phone.

It gives the ability to export the QR code in a range of image formats. This includes the option to save the QR code as a vector image. This is great when you’re incorporating a QR code with a print medium, such as a business card, brochure or poster.

The ability to add branding to a QR code is invaluable. However, getting the balance between how much of the QR code you can cover with another image can be tricky. If it covers a crucial part of the code, it will become unreadable. The tool provided on this website allows you to position your logo over the QR code, while telling you when it becomes unreadable.

Adding tracking to a QR code is a great way of measuring how effective your QR code has been. This can be done by applying analytics code on the URL which the QR code links to. From here we can see important data, such as what date and times are the highest sources of traffic.

Utilizing these new capabilities with QR codes allows us to really think outside the box, and truly provide a unique expierence for users who interact with them.

We posted late last year about the benefits of QR codes. We wanted to make them more accessible and practical for you to use.

ITSimple have developed a QR Code Generator which is now available to use on our website. It’s powered by Google’s Chart API, which has been integrated as an easy to use interface that anyone can use. Simply enter your website in the input box, select the image size and hit ‘generate’. This will create a unique QR code that links to your website. Anyone who has a QR code reader app on their phone can simply hover their camera over the image, and they will be instantly directed to your website.

This is a great way to point potential customers to your website. You can print your QR code on your next set of business cards, or use it for one of its many other applications.

So check out our QR Code Generator, and let us know what you think!

Yesterday, Chris and I attended the Melbourne Adobe Refresh 2011 conference. The main focus was creating and delivering content to multiple devices. Smart phones, tablets, notebooks, televisions and larger desktop screens.

Adobe took us through the expected trends in mobile, internet, bandwidth and screen resolutions. Within the next 2-3 years, mobile internet users will exceed desktop internet users, this trend will not slow down once that happens. If there was one message to take away from the day overall, it’s that we need to think mobile first.

Multi-device Multi-screen
Adobe completely realize the challenge of creating content to be optimized for all devices. Which is why they have been making it a huge focus while developing the Adobe CS collection. In addition to HTML5 updates to Dreamweaver, creating and delivering content to a wide range of devices has been made much easier by using Adobe AIR. Instead of programming an application in multiple languages to suit every device, Adobe AIR can publish an application coded in one language to all devices, without changing any of the original code.

There was an impressive demo shown where a Samsung tablet device was running a car game. They then ran a separate application, which acted as a controller for the car, on an Android Phone and an iPhone. All 3 devices interacted with each other seamlessly via Wi-Fi. They then proceeded to run the same car game on a TV with AIR installed. The significant thing about this was that the source code was exactly the same for all of these devices, but exported using AIR to format the application for each device.

Developing apps for Smartphones
Adobe now gives developers access to generic features of most smartphones by using built in API’s in Flash Professional. Developers can manipulate features such as mutli touch (pinch/zoom), swipe, the accelerometer (x,y,z axis), GeoLocation using GPS (fine) or Wi-Fi (coarse), even the camera and microphone. Using Adobe AIR makes publishing these application for all phones much simpler.

AIR apps can be used on Android, iPhone, iPad, Blackberry PlayBook, TV, PC, Mac and Linux and other devices. Apple currently allows AIR applications in its app store, after their back flip on previously banning any AIR apps. Adobe is very confident that this will remain the same. One final tip that I found important was to always include a splash screen/loading image to show to the end user while the app loads, rather than be presented with a blank white screen.

HTML5 and Open Web
The next big thing on the web is certainly HTML5, and Adobe Dreamweaver CS5 has been updated to allow for HTML5 and CSS3 code completion based on the current web standards. A feature that I wasn’t aware of was using a .svg (scalable vector graphics) file embedded into a HTML5 document. Because the ‘image’ is actually a text file, colours can be manipulated using javascript.

They also gave some big hints that jQuery is going to be something they’re going to focus on in future updates. One of the quotes they used was “If you’re using jQuery, keep using jQuery. Watch this space.”  HTML5/CSS3 media detection was another impressive feature, and something that is going to be essential in delivering content to different devices. Developers can create different CSS layouts for different devices depending on the screen size. To accompany this, by downloading an update from Adobe labs, developers can utilize multi-screen live view to see what their site looks like in real time on multiple screen sizes. The live preview is a WebKit browser, which is the rendering engine currently used by all smartphones.

Adobe Digital Publishing Solution
This section showed how InDesign can be used to create interactive magazines/eBooks. They showcased how layout, typography and interactivity transferred over from print to a mobile platform. Adobe have made it easy to embed touch controls such as swipe to control dynamic content such as image slideshows. InDesign can also include components from live websites, such as a Twitter feed. Another impressive feature was embedding video, which can be played inline while embedded in the document or made full screen. The magazine can then be distributed via Adobe’s cloud server to any device with the Adobe Viewer app installed.

Sneek Peeks
Each member of the Adobe panel showed us secret projects they have been developing for possible future Adobe CS releases.

.FLA to HTML5 Animation Converter. This was an amazing preview, dragging a .fla animation file into this application outputs HTML5 animation to replicate the flash file.

3D Flash Capabilities. This was a demo of a zombie horde game with really impressive 3D, built in flash using the Molehill API.

Vector to Bitmap on the fly. In Flash, this allowed you to scale your vector images while essentially keeping them in a bitmap form for mobile device applications.

Touch screen paint mixer. As a possible extention to Photoshop, a demo was shown on a tablet where you could mix colours using the touch screen.

Code snippets. Built in pieces of code to help design oriented users feel more comfortable using Actionscript. For example, a piece of code can be dragged onto a movie clip to make it a button.

Wrapping Up
Adobe has really impressed us with their commitment to helping designers and developers create content for multiple devices. The next couple of years are going to be very interesting for everyone in the industry. We love the challenge, and I know we’ve already started learning how to utilize some of the great features and ideas that were shown yesterday, and we’re very exited about it!