Refresh Creations Ltd Newsfeed

Mobile Website Design

Tue, 16 Mar 2010 10:27:00 -0500

Slowly evolving from WAP and WHTML monochrome, largely text-based readers to fully-fledged versions of popular browsers supporting the latest flavours of HTML, XHTML and in some instances Javascript and even AJAX, mobile browsing seems to be becoming the way to go, or at least cater for when designing a website.

In some cases it`s not a great idea to simply duplicate everything across from your current site and place it into another shell for a mobile site. User behaviour will vary between a mobile website and a traditional one, however much a phone is now emulating a desktop PC now, the way we use it is different, mainly due to the differences in interface.

Differences between mobile site development and Traditional website development.

One of the difficulties faced when developing a website for mobile phones is the large variance between each mobile phones capabilities. This includes the following criteria:

Screen Resolution
Image Support
Browsers Memory per-page
Levels of CSS Support
Levels of HTML / XHTML Support
T9 / Touch screen / Qwerty Input

The combination of browsers and phones available on the market makes creating a cross-compatible website a great deal trickier than with a standard PC / MAC/ Linux / (Insert OS Here) Box.

Firstly, lets consider resolutions:

Mobile phone resolutions can be expected to anywhere between 240 x 240 pixels to a wide 800 by 480 or a tall 320 x 640 resolution. Content should therefore be broken down to the essentials without over-zealous usage of larger images which could be a deal breaker on your mobile site.

Image Support.

In general it seems that GIFs and JPGs have greater supportability than PNGs So, try to only use those where necessary. Some handy tools for compressing gifs, pngs, and jpegs are detailed below:

PNGCRUSH - A Command line utility for compressing PNG images.
Google Page Speed plug in for Firefox - Great for quick image compression inside web pages.
Imagemagick - Another command line program which can be interfaced with most programming languages to help reduce file sizes.

Of course photoshop and other professional image editing programs have some of this functionality built in using save-for-web features.

Browsers Memory per-page.

Keep your pages simple to render, try to aim for below 20kb per page if possible to help prevent lack of memory errors.

Levels of CSS Support.

CSS Support may or may not be available on your users phone, if it`s available a good contrast between foreground text and backgrounds would probably make sense, bearing in mind that mobile phones may not have as great a bit-depth palette compared to your PC.

Levels of XHTML / HTML Support.

Broken HTML is a big no-no and, beyond WAP there aren`t many official standards for Mobile Browsing. The W3C have a standard in development called XHTML Basic 1.1, full details on this specification are available here: http://www.w3.org/standards/techs/xhtmlmobile#w3c_all

Methods of Input.

Not all phones are touch screen, Not all phones have a handy qwerty keypad on there, some of them will still have only a basic T9 Interface so keep form input minimal where possible, if you have a site search, try breaking it into a couple of drop-down selection boxes or another simple mechanism to help keep navigation and searches quick.

It all boils down to the problem of Mobile Browser Detection which is going to be the main problem facing mobile site developers, thankfully there are web sites which offer services so you can determine which browser / phone your viewer is using, so you can serve up the correct content to the right device. Some of them simply offer a list of unique browser ID`s, others offer a more fully fledged service.

http://detectmobilebrowsers.mobi/ Offer a browser detection subscription service which costs $50.00 per year
http://www.zytrax.com/tech/web/mobile_ids.html Maintain a lengthy list of Mobile Browser ID`s (plus it`s FREE, Hooray!)
http://www.russellbeattie.com/blog/mobile-browser-detection-in-php Some handy PHP Code to help you identify which phones are visiting your site.

Best of luck on your site conversions for mobile phones, if you know of any more handy programs, please contact me at ryan@refreshcreations.co.uk

Third Party Web Apps and Plug-ins

Fri, 12 Mar 2010 04:28:29 -0600

Add This, Add That, Place our Badge on your Blog for enhanced traffic reporting, Google Anal...what? With so many third party plug-ins available to website designers nowadays I thought it best to weigh up the advantages and disadvantages of using these handy website plug-ins.

Advantages of using 3rd Party plug-ins

Many offer specialist functionality, which can be replicated across any site on the internet. Saving you the trouble of spending a large number of hours coding away to replicate the same feat. A personal favourite tool I`ve been using on more recent sites is the "Add This" button after being recommended by Matt from Creative SEO a while ago. This particular tool allows users to quickly bookmark your web-page to either their browsers bookmark list or countless social networking sites. It`s still being updated with new sites today.

To code and maintain such a tool on your own would just be a pain in the ass! Thank goodness someone has done this for us all to use already. An alternative would be to simply use a couple of the main social networking sites and spread them across the site which would be fairly useful anyway although nowhere near as complete a service.

Most tools i`ve come across are designed to be as easy to use as possible, and can even be customized to fit the look of your site, catering for different background colors, custom images or just plain text.

Well designed tools will degrade nicely with a variety of browsers being used, sure they may not display correctly( or maybe not at all) in old browsers or some mobile phones but the tools are only meant for extra functionality, not to be used as the backbone of your websites content (content is, after all, KING)

Even when tools aren`t overly customisable such as a Facebook badge. It`s going to be a simple way of adding functionality without diving into code to a great extent.

Possible disadvantages of 3rd party plug-ins

It`s not all blue skies, shining suns and a nice beach party maybe afterwards. Whilst I doubt much of this applies for the short term it may be handy if you notice oddities on your website(s).

If the third party plug-ins are made unreliable due to server downtime or unexpectedly large amounts of traffic, the plug-in could slow your site down to a crawl. Most tools rely heavily on Javascript / jQuery as their backbone for working. Using lots of tools on a website can cause a significant delay in page loading times.

Not too much of a problem provided you utilize methods to improve the speed of your website, the Page Speed Tool from Google and Yahoo`s aptly named YSlow are great plug-ins for Firefox which indicate page loading times and displaying areas where your site can improve.

Not all plug-ins are compatible with SSL encryption.

Particularly noticeable in the case of e-commerce sites. This can be a real pain to figure out sometimes, checking the stylesheet, code modules all reference images, javascript, etc correctly, only to find the handy plug-in you`ve added to the site needs to be removed or altered in certain cases. This can usually be prevented through some nice PHP / ASP to check which port your website is using (443 (SSL) or 80 (Unencrypted)) but can prove to be an annoyance.

Some tools, most noticeably the Google Analytics Tracker run nicely in both secure and unsecure environments (Google Analytics even offering asynchronous loading with the loading of the webpage) without causing the dreaded "unsecure elements are being displayed on this page" notification to pop-up and scare users away from your secure area / shopping cart. I really wish this was available with the popular "Add This" service. That and perhaps better debugging in browsers when this occurs would help matters out.

To summarize, third party tools are largely a blessing for your site, just don`t rely too heavily upon them., particularly if page loading times are an issue. If they drop out all of a sudden, visit the makers website to check if it`s still available or perhaps requires an updated code.

I`ve listed a couple of my favourites in this article and below. They`re all FREE which is even better! If you can recommend any others, either contact me via Twitter or e-mail me directly at ryan@refreshcreations.co.uk

Google Analytics - Simply a must for every website, makes tracking visitors and analysing your sites progress really easy.
Google Webmaster Tools - Added by simply uploading a verification File / adding a small meta tag. This works well in tandem with analytics for tracking your websites SERPs, checking for malware, geo-targeting your website and is regularly having new features added to it.
Page Speed - A great Firefox plug-in for web developers. Advises you on changes to make and even, essentially makes some changes for you in terms of saving images in smaller formats, etc.
YSlow - Another tool for analysing loading times of your website.
Add This - As explained in the article, a great, customisable, social bookmarking tool.

Web Hosting Special Offers

Mon, 08 Mar 2010 10:12:23 -0600

To celebrate the launch of the new Refresh Creations website we`ve taken 25% off the price of all our web-hosting packages.

Brook Hosting - Normally £24.95, Now only £18.71
River Hosting - Normally £49.95, now only £37.46
Estuary Hosting - Normally £89.95, now only £67.46
Ocean Hosting - Normally £179.95, now only £134.96

More details on these packages can be found at: http://www.refreshcreations.co.uk/shop/Website%20Hosting-c-1.html.

Please note that the offer is only valid on new purchases and expires on the 31st of March (GMT).

New Refresh Site launched!

Fri, 05 Mar 2010 12:37:48 -0600

It was rather overdue, certainly. But finally the new Refresh Creations site has been launched! A couple of areas are still being populated with some handy content for everyone to have a good look through. From standard blog posts, tutorials on setting up email accounts, using the Refresh CMS and perhaps a beginners guide to hand-coding.

Please post your opinions on the re-design over on our twitter page located here and, join our Facebook group here to keep updated with goings-on here at Refresh Creations.

Quite a short news entry but please have a look through the previous posts for some handy ideas on website design and SEO.

Free Search Engine Optimisation

Sat, 27 Feb 2010 09:57:44 -0600

If you`re part of a business that deals with incoming calls you`ll understand how frustrating it is to keep on receiving spam calls from people trying to sell you everything from double glazing to guaranteed number 1 results on Google.

I personally hate these calls, so here is some FREE advice on search engine optimisation:

1. Write good content

Good website content is really important for your website. Make sure it`s appropriate for both your website and the page you`re editing the content for. Chuck in a few keywords that you may be targeting for higher search engine ranking positions (SERPs) and that alone should help improve your ranking over time.

2. Keep on writing good content

Try to keep your site updated with fresh content. Be that through simply updating pages, a blog / news / events section on the site, the addition of useful site features such as calendars, forums or newsletters or even a whole site re-vamp.

3. Keep site-navigation simple.

Provide means to allow your site viewers to access the content they`re looking for quickly. Through a combination of menus, sub-menus, a site-search function and ideally, a form of site-map. Users should be able to get to the content they want within 3 clicks. Otherwise it may simply become frustrating.

4. Look into Social Networking.

Social networking sites like twitter, linkedin, facebook and myspace, youtube, etc, etc are free to sign up for and can lead to an increase in traffic to your site as well as general reputation for your website. It can prove costly in terms of time spent however, there are utilities out there to help speed things up for posting across networks.

5. Give users what they want.

Does your site have everything users want to view? For example, suppose you own a local take-away. Why not look into having the menu on-line and perhaps looking into on-line booking systems. Maybe even a newsletter or blog to keep your customers informed of any special deals you may have at the time.

6. Review your site from time-to-time.

Peoples tastes change and as new technologies become readily available it may be advised to adapt the website to reflect these new changes. For example mobile browsing has been on the increase for some time and is looking like an upwards trend, developing a mobile friendly version of your site may be a good idea to get one-up on competitors in your area.

Please note, this isn`t meant by any means to be an exhaustive list of SEO advice but some ideas which could prove handy for your site and it`s viewers.