Master Google’s best APIS

Software is an unique product in that it can
be multiplied with minimal cost. Once the
development has been footed, adding new
installations tends to be an issue of purchasing
extra hardware. Google has used this very
approach to produce a variety of APIs,
providing web designers access to building
blocks used for the realisation of its own
services. Some of them are, fortunately for us,
made available for free: Google willingly foots
the bill in order to tie developers closer to its
own ecosystem.
In addition to the eventual introduction of
monetisation (well-established APIs tend to stop
being free when enough people use them),
Google furthermore profits from the ability to
get its APIs stress-tested by third parties without
needing to pay them for their work.
Another, possibly more sinister, benefit
though involves additional access to customer
data. If a website generates graphs and other
features using Google’s services, then the
search engine can track user movements and
site retention times more efficiently. It would not
surprise us if this data somehow found its way
into search engine rankings. For example, a
scammer with a well-placed but content-poor
website could give himself away via the very
short visit duration.
But let us throw caution to the wind for now
though – in all fairness, the possibilities offered
are far too great for us to simply pass them up.
Look forward to effortlessly creating diagrams
and graphs, handling sign ins automatically,
renting databases on an as-needed basis over
the next few pages in our list of top APIs. If you
can name it, it’s likely that Google already has
you covered.
Making users sign in is a sure-fire way to lose them:
creating a new account is an extraordinary level of
hassle. Many users will simply switch off or close the tab
at the sight of such a page – they want to get content
there and then, without having to wade through
username and password boxes. But by using Google’s
system, we can mitigate
the problem by permitting users
to log in with their already available
Google account.
Getting started with most
Google APIs requires you to sign
up for an account in the Google
Developer’s console (console. Next,
create a project and open the
subsection APIs&auth and click
the Credentials subtab. Then,
create an Auth ID. If you created a
new project, the Developer Console will now ask you to
configure the Consent screen: the information entered
here will be displayed to the users as your app
authenticates. Then, you just have to create a client ID for
a web application – don’t forget to fill out the authorised
URL fields with your testing and deployment URLs in
order to prevent Google from blocking the app. Google
will then reward your efforts by generating a client ID
and a client secret.
In the next step, a test must be hacked up. Its
structure is relatively simple – it loads a script, and runs
an on SignIn-Method when the login process is completed.

New interface and new experience

bbcsite-redesignBBC iPlayer
Article from
There are quite a few user experience
mistakes during the building phase for
a range of devices. These are mainly
due to still thinking from a desktop point
of view, when information can easily be
related and arranged to guide users
through the online experience, or it’s
because the design and build has
become too focused on what is
technically possible and lost sight of what
would be best for the user.
It goes without saying that the navigation
of a website is vital and problems here are
normally caused by the navigation being
The BBC iPlayerwebsite has undergone substantial development over the
past year. This seems to been more of an evolution than a rebuild, and this
approach has led to a very well-considered solution.
The navigation is separated into two, one for global BBC
sites and one for navigatingwithin the iPlayer. This approach
enables users to switch between a range of BBC sites
seamlessly and reduces the amount of navigation items
required within the iPlayer navigation itself. Instead of
showing everything in a collapsible menu as the screen gets
smaller, the iPlayer navigation keeps the key items
immediately available, and even on small screens the
channel menu remains.
The slider section is available on larger screen sizes
including some tablets, it uses draggable touch interactions
as well as hover interactions when using a mouse. This is an
excellent example of the UI that considers specific input and
method support of the device or browser being used.
New interface,
new experience
complicated on desktop layout, and in
turn being extremely difficult to support
on smaller screens.
It is standard practice to switch the
main navigation to a collapsible menu,
but it is a good idea to keep the most
popular top-level links visible for as long
as possible. If the website has multiple
levels of navigation, a slide-in menu works
well and you can leverage swipe
interactions to make it easy to use.
Make sure that a navigation menu
containing lots of images that takes up
more than the screen area is avoided.
This ensures that users can always exit
the navigation easily. Additionally it is
important to keep any navigation icons
aligned with best practice symbols as
much as possible for user familiarity.
It can be infuriating for users when there
is an interactive element such as a slider
that isn’t draggable on a touch screen.
Instead of relying on button controls to
move information around within the UI,
make sure touch interactions are used on
the UI elements themselves. This is much
more intuitive for users and is always the
first thing they will try.
Any elements that have click events
bound to them should use a touch event
when available (for example touchend).
When a click event is triggered on a touch
screen the following events are fired in
order: touchstart, touchmove, touchend
and click. The time diff erence between
touchend and click can be as much as
300ms – this may seem small, but within
a UI it makes a huge difference in how
responsive the UI feels when using it.
When using a desktop computer, a form
with many fields is easy to digest due to
the space permitted by the screen size.
As screens get smaller, forms can get
unwieldy and difficult. This will impact
conversion rates of your forms, which are
core business drivers of websites.
To alleviate these problems forms
should be broken down into smaller,
logical sections and the progress through
the form indicated to set the expectation
with the user. Additional enhancements,
such as field prompting and location
lookups, can make the process easier

Website Design Studio

Welcome to Erika’s Web Design Part of CFD & IP Ltd.
We specialise in producing user-friendly personalised websites using the latest XHTML and CSS standards.

We offer a complete package from photography and graphic design through to website building, maintenance and hosting. We have in-house computer expertise covering a wide area.

Although based in London, we also work for the holiday industry in Cornwall and will accept assignments anywhere.

Please view our portfolio of sample websites and if you have any questions do not hesitate to contact us either through the contact us page or by telephoning 01720 458193.

Erika has a MA (Hons) in Fine Art at Central Saint Martins College of Art & Design in London. In addition to her artistic background, she has a good eye for retailing and marketing, having been a manager at Selfridges on Oxford Street and been heavily involved in visual merchandising.
Sample Websites Here are a selection of websites commissions which have been undertaken. Please roll the mouse over the images to enlarge or click to visit the websites. You will see that the websites are custom built and can reflect your individual requirements.

Classy Cottages This large website has 200 pages. Features include: New Logo & Photographs, Online Booking Form, Rollover Floor Plan, Contact Form, PDF Map, Notice Board and Tariff Database.

Hamar Acrylic This small website has 6 pages. Features include: Design background, Vectorised Logo and a new Map.

Lerryn Cottages This website has 7 pages. Features include: Website Design Graphics, Rollover customer’s photographs, Contact Form, Notice Board and 3 PDFs (Tariff, Map and Directions, Booking Form).
Sample Prices Here are two websites: Pink Cottage and Yellow Gallery with a fixed price. You can also have any other modification at an extra cost

Pink Cottage . . . . . £230 This website layout has been purposely designed for a single self-catering cottage with six pages:

• Design header banner
• Home welcoming
• The cottage
• Photos
• General information
• Notice board with Client Editor Site
& sublinks to 3 PDFs
• Contact pages

Yellow Gallery . . . . . £310 This eleven page website has been designed to display photos or images:

• Design header banner
• Home welcoming page
• Four different gallery webpages
• Total of 33 photos on website with six photos per gallery page
• Two Sublinks
• Contact form page

Design header banner This gives your website an individual look and design combining your company logo, name and colors

Client Editor Site Allows you to change the text on any page of your site. Gives you the freedom to update or change the information you wish to give your clients at the click of a button. With an annual fee of £20 inclusive for the first year.

Photos Each page has a pre-sized photos with the height and width of each photo display in the middle.

Text Boxes The text boxes have a pre-sized number of characters across and lines at the top left side of each text box.
Build Your Own Website An easy way to design your own website within your budget

Simply select from the 24 page layouts below, we will add your content, colour and customized the website to suite your needs.

– Initial website set-up is priced at £70
– Set-up fee includes one year’s hosting, one UK domain name and ten email addresses

Select number of required pages from the drop-down box beneath each image below and the total cost of your website will be calculated in the table on the below.
Estimated Cost Breakdown:
Item Description Quantity £
Website setup fee @ £70 each 1 £70
Web Pages @ £10 each 0 £0
Number of Photos @ £5 each 0 £0
Extra Sublinks @ £5 each 0 £0
Notice Board (Self Editing) @ £40 each 0 £0
Contact Forms @ £20 each 0 £0
Sublinks These can be added within each page; as you can observe in gallery one on the Yellow Gallery Site, the sublinks lead to Studio 1 and Studio 2. There are 6 pre-sized photos on each page but this can be modified depending on individual requirements. If you have any questions, please do not hesitate to contact me, either through the contact us page above or call 01720 458193 or fax 0207 0995399.
Tel: 01720 458193 Fax: 0207 0995399
© Erika’s Studio 2007