anupsaund

… thoughts from a Web Developer.

Latest Posts

Website Design Trends 2010 / 2011?

Website trends have stabilised over the years thanks to companies such google, wikipedia, amazon and facebook to name a few.

Web developers, designers and users are generally more aware of user interface design – what works and what doesn’t?

Here are a few examples of websites which I have found that seem to follow a ‘trend’.

BBC

BBC

BBC Website

ebuyer

ebuyer

ebuyer Website

xfactor

xfactor

Xfactor Website

Sunday Times

The Sunday Times

The Sunday Times Website

Royal Mail

royalmail

Royal Mail Website

Tesco Direct

tescodirect

Tesco Direct Website

BBC iPlayer

iplayer

BBC iPlayer Website

What do they have in common?

1) Oversized animated header

2) Large typography for website headings

3) Column grid design for the entire website (as used by newspaper editors such as The Sunday Times)

4) Oversized footer section which contains a sitemap

5) Search bar located at the top right

It seems to me that a lot of websites are adopting the oversized footer section of the website as their navigation area. BBC and ITV both have oversized footer sections which contain links through to internal pages. The links are displayed in columns which can be read quickly by the reader (Pacing). Is it easier for the visitor to see links on the footer?

Wikipedia recently completed a usability study which showed that the search bar located at the top right was the most intuitive place that a user would look for when searching a website. (See their explanation here). We can see that the BBC and Sunday Times websites have search bars at the top right of their websites. Does this mean that we should be putting search bars at the top right?

Oversized animated headers seem popular too – as the content of the header changes with a transiation. In a way – this shows the visitor more content during their visit without them having to click anywhere. This has got to be a plus? no? Especially if a visitor only stays for a few seconds. Are oversized, animated headers better than static headings?

Typography on websites have become extremely popular over recent years- especially with designers. I imagine this is because website developers now have the tools available to place designer typography onto websites. Text replacement seems common on some websites as a means of adopting dynamic typography driven by CMS. Is this better practice than using web fonts?

Familiarity

… do I need to say any more?

Most of my google analytics statistics show that the average website visitor will leave a website on the homepage – without ever clicking through onto other pages.

Hmm – maybe I need to make better websites? *gulp*

Saying that – I imagine this is a general issue with all websites with respects to converting visitors. There’s an old analogy I like to use.

We normally have to head out to the grocery store to get bread and milk. Supermarkets place their milk and bread at the back of the store so we have to go past everything else first. If we’re not on our guard we reach the checkout with several items along with the milk.

A good website will “Give them Milk”… – a reason to come back.

Perhaps we need to be giving users familiar design (like the supermarkets do)

What do you think?

Stripslashes in SQL for MYSQL and ORACLE

Problem

Today, I wanted to strip slashes from a comment field using SQL (INSTEAD of using php stripslashes).

Why you ask?

I was working on an application which had not considered stripslashes for formatting output.

So I had a look and realised. Do I change 40,000 lines of code to add Stripslashes, or 1 line at the SQL select statement?

OK, slight exaggeration, but you get what I mean.

Solution

MySQL

Select 
  Replace(field_name, '\\', '' ;)  as stripped_field 
from 
  table; 

Oracle

Select 
  Replace(field_name, '\', '' ;)  as stripped_field 
from 
  table;

PHP EXTRA

If using in PHP add an extra backslash like this;

// strip slashes as part of the SQL select statement
$sql = "Select Replace(field_name, '\\\', '' ;)  as stripped_field from table";

Please get in touch if you know of an easier way to do this, for example, Oracle Functions, or MySQL functions.

Many thanks and happy coding.

I remember the days before ADODB

I remember a time when SQL was written for a database.

Oracle SQL was different to Access SQL

mySQL was different to SQL Server SQL

… then somebody said no, stop, enough is enough.

Sometime in 2009 ADODB was born for PHP. The 1 wrapper for ALL database types. Ah, just what we wanted.

Wait a minute? This is ADO, didn’t microsoft do this in 1996? The short answer is yes. Database abstracting is old in theory, tried out by microsoft, worked to a degree but never fully made it in the world (for whatever reason).

This brings us up to ADODB  – the promise of a database wrapper that will make it through, and iron out the issues that microsofts offering had.

Today I got my hands dirty with ADODB and I liked it. Looks and feels just like any other wrapper such as ADO.

Actually, I think it’s the same same. So so… così così.

One thing for sure. It makes hot swapping between Oracle/MySQL (which is what i’m doing right now) a breeze.

That’s why i’m writing about it.

I like it… how about you?

PRE tags, the quick way to keep formatting

I get asked quite often if there is a way to show CODE on a website, with it’s formatting in place?

The short answer is <pre>

It can output free text (i.e. non server side code) in a pre-formatted way. Yep, PRE = Pre-formatted.

On top of that, Preformatted also renders the php print_r() output in a nicely nested unordered list, which is great for debug purposes;

e.g. 

  echo "<pre>";    print_r($arr);  echo "</pre>"; 

I am sure there are other uses for the <pre> tag too, I have just scratched the surface.

Give it a go – let me know if you find other uses for it.

Thanks.

BCC – Blind Carbon Copy – The forgotten field!

The BCC field can usually be found underneath the CC field.

Sound’s obvious right?

You already know about the field, yes?

Great!

— but not everyone knows about it, or how to use it. I say this because I have had emails sent to me where ALL the contacts have been in the To: field.

This is bad practice because;

1) It violates the data protection act (we didn’t give permission for our email address to be shared)

2) Looks unprofessional

3) Opens us up to spam!

Whenever I get an email like this, it is usually because the person sending it is inexperienced/hasn’t had the training in proper use of email. So for those who use the BCC field correctly well done. For everyone else, please learn.

For MASS email, please enter ALL your to contacts into the BCC field, and then add your own address to the TO field. This way, ALL emails will appear to be sent to yourself, with blind carbon copies going off to everyone else.

Happy emailing.

In Sky Design – Website Launch

“I’ve opened up a web design business”

After many years of freelance web development, I decided to bite the bullet and “open up shop”.

In Sky Design is an association of designers and developers working together to create user friendly websites. We offer web design, graphic design and web application development; for start up business and established businesses who need internet solutions.

Please take a look at www.inskydesign.co.uk

We have set packages along with a price guide to show what our customers most commonly ask for.

If you can’t find it on the website, no problem, please ask.

Vista Compatibility Mode

Here’s a nice neat trick to get Windows XP application to work in VISTA.

[HKEY_CURRENT_USER\Software\Microsoft\Windows NT\CurrentVersion\AppCompatFlags\Layers]"$path"="WINXPSP2"

Replace $path with the absolute path to your program;

i.e.

c:\\program files\\myapp\\myapp.exe

Make sure you add double back slashes.

Stop the Microsoft Office 2007 Logo / toolbar / ribbon from blinking / flashing

The Issue Microsoft Office 2007 has a wonderful new interface with ribbons, which other developers are adopting as a windows standard. However, when office is installed and used for the first time, the Microsoft Logo (shown below) flashes until the user clicks it.

Microsoft Flashing Logo

So what’s the problem?

I have been using the Microsoft Access 2007 object in Visual Basic at work, and attempting to open an instance of Access as hidden. The issue comes up when we distributing the application that we have created.

When the user installs Access 2007 – Run Time Edition, and then runs our application, the Access Window pops up, with the flashing logo.

How do I stop it from flashing?

This is the million dollar question that I’ve been trying so hard to find the answer to.

- Brielfly, I ran a registry comparison tool (RegFormApp) to see what happens when the user clicks on the microsoft logo in an office program.

The program showed that the following registry key was being updated.

 [HKEY_CURRENT_USER\Software\Microsoft\Office\12.0\Common\General]
"OfficeMenuDiscovered"=dword:00000001

Okay, for those of you who use windows registry edit, follow the following steps;

How to change the setting

1) Navigate through the tree menu on the left, until you get to the right place.

2) Double click on “OfficeMenuDiscovered”.

3) Change the setting from 0 to 1. Click OK to save the changes.

The .REG File Method
Stick the following into notepad, and then save the file as a .reg extention.

[HKEY_CURRENT_USER\Software\Microsoft\Office\12.0\Common\General]
"OfficeMenuDiscovered"=dword:00000001

This will make it into a Registry update file that you can use in installers, etc, to get the setting set!

All I can say is that it’s been a journey.

I hope this post saves you a lot of time and effort in your developments.

Internet Explorer 7 – Accessibility Options

These settings are a web developers worst nightmare…. what happens if a web browser ignores the website FONTS? or worst still the STYLESHEETS?

Well – i guess if the website is built with accessibilty in mind, then there is no problem;

The page will render correct, no matter what browser or platform… but… if you have to use absolute positioning, and specific font sizes… then please please bear these settings in mind.

IE7 Accessibility Options

Tools | Internet Options | Accessibility.

Happy coding people!

Split a Price (FLOAT) into Pounds (£) and Pence (p)

Whilst working on an E-commerce website, written in PHP i came across and issue where i had a price stored in a table as a float.

I wanted to split the pounds, and pence into two variables to make it easier to work with, but then save the results back into 1 field. So this is what i did.

http://uk2.php.net/manual/en/function.explode.php#63110

//If you want to split a price (float) into pounds and pence.
//or dollors and cents etc etc.

$price = "6.20";

$split = explode(".", $price);
$pound = $split[0]; // piece1
$pence = $split[1]; // piece2

echo "&pound $pound . $pence\n";</span></code>

Enjoy :)