Posted on Tuesday, 16th March 2010 - 4:27 pm by Refresh Creations Ltd
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.
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.
Posted on Friday, 12th March 2010 - 11:28 am by Refresh Creations Ltd
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.
Posted on Friday, 5th March 2010 - 7:37 pm by Refresh Creations Ltd
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.
Posted on Saturday, 27th February 2010 - 4:57 pm by Refresh Creations Ltd
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.