Big S Web Design Blog

Ipad issues grocery shopping online with ASDA

Stewart — Mon, 21 Nov 2011 09:07:32 +0000

My experience is usually good when i do my weekly online grocery shop with ASDA. They have a simple layout that is easy to navigate and clear call to actions.

I normal use my Ipad for this type of thing, it means i can relax on the couch and take my time selecting all the nice things I want to eat. This week however I ran into some real issues, everything was going smoothly until my son closed the browser on the Ipad. This should have been a small irritation that would be easily fixed by simply opening the browser back up again. The first thing i noticed once the browser had loaded was that I had been logged out of my shopping session, I thought ok seems fine good security and all of that i will simply log back in and get going, this is where things became problematic.

Ipad in landscape view

Ipad in portrait view

The first issue that i had was in landscape view i could not see what i was inputting into the login field, i managed to resolve this by changing to portrait view. I continued to input my email address then the second issue arouse, how do i enter my password? there was no way that i could see to tab to the next input field. After a few minutes of scratching my head i came to the conclusion that once i hit go it will ask for the missing password so i hit go and the error screen did appear “Sorry we did not recognise the details you entered! Please check and try again.” but it had removed my email address and was still looking for the two fields both user name and password.

After 4 or 5 times round this loop I abandoned my shopping with frustration levels very high. I do understand that no online experience will ever be 100% perfect but this does flag up the importance of testing all functionality on all devices and also making sure there is continued testing as things are always changing.

Come on ASDA development team sort it out and bring my Sunday shopping experience back to a joyful and relaxed one.

Responsive Design within local government

Stewart — Tue, 15 Nov 2011 11:44:47 +0000

Local government websites have came a long way since the dark old days of the poorly managed do it yourself table based layouts of the late 90’s. Now most sites are backed by web professionals and are running great content management systems that help produce some nice results.

I was recently involved in helping South Lanarkshire Council take their reasonably well designed fixed width website which was optimised only for the desktop and make the site adapt and respond to the many different devices that their users are now entering the site on.

Here is a brief outline of how it was built

Delivering a truly device independent website experience, an outline of the raw materials that we used

A flexible, grid-based layout,
Flexible images and media,
Valid HTML 5 and CSS
Media queries

The sizes of devices that had to be considered –

320 x 480 For small screen devices, like phones, held in landscape mode and Ten-inch tablets like the iPad (768×1024) held in portrait mode.

1024 x 768 (iPad – Landscape) and desktop

Wide screen (1200 pixels) For widescreen displays

Design the luxury item

Stewart — Tue, 23 Aug 2011 19:53:49 +0000

Times are hard, businesses are going under left right and centre. For the lucky few still in business money is tight and most of them are looking to cut the fat and tighten their financial belts just to stay in the game.

Design seems to be one of the first things small businesses cut back on, it’s seen as a luxury only relevant for good times or big brands with big budgets. Larger businesses also cut back on this luxury item, preferring to focus budgets on other essential areas of their business.

The Tortoise and the Hare

This type of scenario reminds me of how some people try to keep fit,

Jan – March: Great enthusiasm
Apr – June: Loss of momentum start finding it hard to find time to workout.
July – Aug: Holiday inspiration,
Sep –Dec: Things get very hard, bad weather – low motivation.

Their keep fit routine is a real rollercoaster of activity, making gains then losing them. The point I am trying to make is, rather than going all or nothing and gaining ground then losing it, a far better approach would be to keep up a consistent flow of activity which could be adjusted depending on circumstances. Studies show that companies who cut their marketing and design budgets during a recession fall behind those who didn’t, so when the recovery does come they need to apply more effort to catch up.

Great things come from small beginnings

A strong brand can differentiate you from your competition without drawing you into competing on price, without it dropping your price, quality or something else might be your only option, also businesses that cut back on design could be damaging their reputation and long-term chances of success.

Picture this you decide to go out for a nice meal, you are not sure what restaurant to visit your favourite restaurant or the new restaurant that has just opened up in town, both serve very nice food, hard decision. You start by looking up both their websites to view their menu and opening times etc … times are hard your favourite restaurant decided not to get their site designed and branding up-dated properly, they got a friends brother to do it and the owner decides to take the Art Director lead, much cheaper option. You find that their site is very slow it’s also hard to find what you are looking for, things don’t look that good, poor food photography, hard to read, colour is a bit off and the up-dated branding doesn’t quite look right. On the other hand the new restaurant in town invested in their brand and got professional help, their site looks fantastic, very fast and easy to use, your mouth is watering just browsing through their photos and they also provide a very easy way to book your table and information on parking which you like. Where would you spend your money.

Do your webpages need W3C Validation?

Stewart — Sat, 13 Aug 2011 08:29:54 +0000

One question that seems to arise time and time again from clients is code validation. Most seem to have the understanding that if you have errors on a webpage, the HTML code is bad. Most clients are now very aware of how and what affects their website ranking and users access.

A bit about the W3C – The World Wide Web Consortium (W3C) is the organisation in charge of setting best practices and standards for coding in HTML.

This subject has been a controversial topic among developers and clients for several years. Most professionals agree that properly validated code will help a website rank higher, prevent problems and issues arising if new technologies are developed. For me and other professional web craftsman this is great news, but what are the real advantages of having valid webpages.

Lets start with some arguments against code validation

- extra development time needed which equates to extra cost.
- Expertise and good knowledge of HTML needed
- Googles own homepage has 69 errors on it – so why bother if they don’t

There is also a video by one of Google’s quality engineers about this subject where he explains that Google does not award a site a higher ranked place because it validates.

Now the arguments for code validation

Validation as a debugging tool

While contemporary Web browsers do an increasingly good job of parsing even the worst HTML “tag soup”, some errors are not always caught gracefully. Very often, different software on different platforms will not handle errors in a similar fashion, making it extremely difficult to apply style or layout consistently.

Validation as a future-proof quality check

Checking that a page “displays fine” in several contemporary browsers may be a reasonable insurance that the page will “work” today, but it does not guarantee that it will work tomorrow.

Validation eases maintenance

It is reasonable to consider that standards such as HTML and CSS are a form of “coding style” which is globally agreed upon. Creating Web pages or applications according to a widely accepted coding style makes them easier to maintain, even if the maintenance and evolution is performed by someone else.

Validation is a sign of professionalism

As of today, there is little or no certification for Web professionals, and only few universities teach Web technologies, leaving most Web-smiths to learn by themselves, with varied success. Seasoned, able professionals will take pride in creating Web content using semantic and well-formed markup, separation of style and content, etc. Validation can then be used as a quick check to determine whether the code is the clean work of a seasoned HTML author, or quickly hacked-together tag soup.

For me it all boils down to this, if you adhere and follow web standards you can always be confident of building rock solid web environments, even if as on this website not all your pages validate. On this site we use meta data for some of our mobile stuff that at the moment will not validate, we show 4 errors all from meta tags not validating, which is a bit of a pain because we like valid web pages, but we are confident enough to know that although we don’t get the green tic our sites, are always coded properly and future-proofed.

Bad design decisions disclaimer

Stewart — Tue, 26 Jul 2011 09:43:58 +0000

One of the biggest challenges I have faced as a designer is – how do I stop a client making bad design decisions?

I am sure every designer has faced the same issue at one point in their professional career, after a project has been completed you sit and review it with a sense of uneasiness that the final design and message has been diluted and watered down, sometimes to the point where it no longer solves the original problem, and worst of all it has your name written all over it. This quote always plays in my head, can’t remember who said it but It seems to be my biggest fear if I let bad decisions into the final design -

“The client may pay for the work, but who takes the blame when the client campaign fails miserably because the client did not listen to the advice of the designer?”

I have studied and researched this problem for years. I now think that I might have finally found an answer. Before I get to my answer I feel that I need to show how I came to my conclusion. First I had to investigate the cause – Why It Happens, lots of people have put across their opinion on this but for me I think it boils down to -

Lack of trust - The client feels that they need to micro manage every decision within the project
Fear - Very closely related to lack of trust but comes into play even if the client rates the designer highly, “the panic effect” example – midway through the design process someone shows the client a rival site or they get some negative feed back.

I know there is a lot more to this and this article goes into this in more detail – Why Design-By-Committee Should Die but for me if a client is not sure of my ability the design process will not work, I have to say this is more common within larger organisations where one person or a department hires and trusts the designers decisions but other people and departments within the business may not.

This is how I think this can be fixed

First of all don’t work with bad clients, make sure your clients understand and know the value of great design. – How to spot bad design clients

Clear Objectives - I always get the main objectives clear from the start and make sure everyone involved with the project is very clear on what they are.
Concept feedback - If more than 2-3 people are involved in the design decisions I apply a filter/hierarchy on all feedback on the project. Makes evaluation designs easier.
- A. Stake holders – most important
- B. Users – very important
- C. Dev team – important
- D. People outside the team – not that important
- E. People’s mothers, wives, grannies etc…. – not important at all.
I ask good questions / no more personal opinions - We need to stop asking people what they think! Instead of asking “What do you think?” which often elicits a long-winded emotional response. Ask questions that require the participant to consider objective factors, i.e. “Does the design meet our stated business goals?”. I always challenge personal opinions by asking questions that dig deeper and expose the core of the issue. Determining whether or not the opinion is valid and relevant to the objectives.
Use Real World Testing - “how do we know if a design decision is working or not working” – Involve the user in everything you do! From start to finish
- 1. Meet with users
- 2. User testing groups
- 3. Conduct user a to b testing on all our big design decisions
- 4. Involve user in design process.

Please note - Sometimes even the best clients can have an off day and so can you, designers are not always correct, sometimes the clients wisdom and experience about their product gives them the extra bit of insight to find the best solution. It’s all about a two-way flow of respect. On a final note if you do all the above and you come across the situation of “The head of products wants a pink button” and the only logic behind it is they like it, you can use this -

Bad design decisions disclaimer

“We/I did not follow the advice of the designer and made our/my own design decisions and we/I take full responsibility for how this will effect the website and will refrain from using the designers name when challenged about why bad design decisions where made and why the site now is not working the way it should.”

I have found that even after you have pulled out the big guns of a Bad design decisions disclaimer, this still will not deter the determined ego of some people, it will on the other hand give you the evidence and reassurance that you need when in six months time the inevitable questions are asked “who hired that designer, that pink button looks ridiculous and the stats show no one is using it”

Someone Ripped off our old Website’s Design

Stewart — Thu, 14 Jul 2011 11:18:17 +0000

We Look through our Google Analytics reports every day so when I noticed some strange page titles for our website, I had to investigate. It turns out that someone liked our old design that much they decided to make their own version.

Don’t get me wrong i am all for copying and creative license, as Picasso said “Good Artists Borrow, Great Artists Steal”.

The way we look at this type of thing is every artist borrows, steals and is influenced by other people’s work. “Imitation is the sincerest form of flattery” and people who do not apply their own creative flavour will always be just not as good as the original a bit like the supermarkets own brands of coke, looks ok and tastes not bad but as coke have said for years there is nothing like the real thing.

Spot the difference -

Our old original design

The other design

Web development for the PS3

Charlie — Mon, 20 Jun 2011 08:45:50 +0000

The PS3 uses the NetFront browser. Developing for this is like web development in the days when ie5.5 or ie6 were the dominant browsers. Some things I have picked up that might help someone when developing for PS3:

1 - There seems to be a scrollbar that appears all of the time and the best way to get rid of this is to add the attribute scroll=”no” to the body tag
2 -The html star hack works for targeting the browser (* html)
3 -JavaScript events are set up with attachEvent and removed with detachEvent. So if you want you events to work cross browser I suggest using something like John Resigs cross browser addEvent function
4 -If you want to use a JavaScript library I found that BBC glow works well. The JQuery ready function would not fire, admittedly I did not spend much time trying to get to the bottom of this but I have found Glow to offer everything I required.
5 - Absolutely positioned elements dont seem to receive focus when you tab with the dpad
6 -If you want to align you site vertically in the middle of the screen then you will need JavaScript. I took the route of hiding the site, positioning it and then showing it as this prevents an FOUC
7 -I worked with a fixed width and height but there is scope to make your site fluid. However remember that users can be viewing you site on 52inch TV’s so you will probably need hi res images which can be bandwidth hungry to download
8 -Sony told a work colleague of mine that playstation owners tend to take a while to update so build and test for a the browser version that is a year old.
9 -The browser cache can be quite aggressive and I often found that even when I cleared the cache in the setting the HTML would not change. The best way to sort this is to attach a query string to the URL
10 -CSS sprites and transparent pngs work fine

Mobile website development tips

Charlie — Sun, 12 Jun 2011 08:50:21 +0000

Some of the things we have found useful and helpful as we develop mobile websites:

Keep it relative – Use percentages for horizontal widths and em’s for vertical padding and margins. I have found this to be the most consistent way of getting results without pixels.
Let it breath – I like to keep a gap at the sides of my sites to help them breath, to achieve this I create content thats 96% width and give it 2% left margin. This way if there are any rounding bugs (which there often are with percentage based layouts) the not defining of the right margin give you some room to breath.
For spacing items out e.g. navigation or form input boxes, Use padding top and padding bottom as line-height dosen’t render in Opera mini
If you compress your CSS with google closure be aware that it dosent like media queries that define a specific the media type. You need to leave out the media type which makes it default to all. So use @media (max-device-width:320px), instead of @media screen and (max-decice-width:320px)
When using google maps I found that the markers need to be customised and made bigger to handle the iphone4 retina display. Otherwise the physical click was appearing above the marker. Also when creating markers the iphone didn’t seem to like using sprite images
Not all phones with Android 2.2 support flash due to the phones hardware capabilities. Here are the phones that do
When testing in multiple devices use a URL shortening service like bit.ly, it saves a lot of typing

Where are all the decent PHP CMSes?

Stewart — Fri, 03 Jun 2011 10:22:02 +0000

I’ve been recently asked to check out some CMSes for someone, and try to find a recommendation. What I’ve been finding hasn’t really been encouraging. Out of the several CMSes I’ve tried, they’ve all failed for various reasons. I admit that I might be looking at this from a slightly different perspective than most – that of admining it and coding against it, rather than as a user – but it’s still rather disappointing.

Silverstripe is what I used first – but the forms (including the login to the admin) kept failing to render. In the end, I got sick of debugging it and started my hunt.
Next up was Concrete5, which I heard mentioned recently. There were one hundred and fifty-five strict warnings in the front page of the installer. Bye bye.
Next, CMS Made Simple. Its installer wanted E_STRICT and E_DEPRECATED removed from error reporting. At this point some folk might have continued; but that was enough for me not to consider it. I didn’t have enough confidence in the code that I wanted to continue. It lost more points for the tarball not extracting into a subdirectory, which resulted in my document root being filled with nonsense.
Joomla!… well, my last experience of it wasn’t pleasant – I couldn’t work out how the code was structured. It’s also overkill for the requirements of this site.
I would love to go for Habari, but the site isn’t a blog, so it doesn’t really fit the use case. It’s still the top of the list just now, though.
I could do what everyone else does and run WordPress – but, again, the site isn’t a blog, and I’d rather try something different.

I didn’t consider Drupal or eZ Publish, which again I believed to be massive overkill for what is required of the site. What’s going on? This is what PHP is supposed to be good at. Where are the simple, lightweight CMSes with modern code? Notices, strict and deprecation warnings should be considered errors when developing – this doesn’t seem to be the case with many of the above projects.