Posted: October 12th, 2011 | Author: Foamcow | Filed under: Web Design | | No Comments »
I have seen talk that Responsive Web Design means you are making “My first website” for use on mobile devices. See this (amongst many other discussions) for an interesting discussion on the topic.
Now, please don’t take my words as gospel. I’m just starting out on the RWD road so I may have this totally skewed but it does seem that many folks consider RWD to be the act of stripping down a site to accommodate low bandwidths and small screens. There is some truth to that but I feel there is a much more important reason to be using RWD.
RWD is about serving relevant content, not about getting rid of cruft. After all, if it’s cruft then why is it on the full-blown site in the first place? You can probably get rid of it from there too. Nay, RWD is about looking at what the user of your site needs at the moment they hit it and addressing that need.
Consider why we make print stylesheets. Very handy things for reformatting your content to make it appropriate for printing on an A4 page. It’s quite common to hide the site’s navigation or expand links to show the URL (if you use IE you won’t appreciate this). After all, what’s the use of a clickable link on a piece of paper?
Take that idea of removing useless stuff over to someone browsing a restaurant’s site on a mobile phone. They may well be checking the place out from the comfort of their own home and couldn’t be bothered walking to the “big” computer in the corner. Fair enough – there’s a case there for avoiding large images – then again they may be using their home WiFi anyway. There’s a case for re-arranging the page layout to fit a narrow screen – iPhones zoom pretty well though and it’s never a bother to pinch and slide. But there’s still a case to change the site in some way to reflect these “limitations”.
But now consider if they are out and about. They are visiting the site on their mobile phone over 3G. We, as designers (in the non graphical sense) should be thinking about their reasons for doing this. It’s a restaurant site. They’re on the street. There is every chance they need to either:
a) find the place because they’re meant to be there and can’t find it
b) call the place to tell someone they’re late, not coming, see if a table is available at short notice
c) see what yummies they can get and whether they need to visit a cash point (another great use for mobile!)
So as the site’s designer we can see what information needs to go front and centre and what actions need to be easy to perform. This visitor is probably less interested in reading about the Chef’s time at “Chez Guavara” where he won a Michelin Star for his “Fèves au lard sur du pain cuit servi avec une riche sauce tomate” than they are about seeing what bus they need to catch to be there for their 8pm date with the blonde girl/guy from the dry cleaners.
That’s what I think RWD is about and how we should be thinking about it. RWD is about considering the user’s needs at a given moment.
This is something, like with standards compliant markup, that we should be doing anyway – but until now we haven’t bothered. RWD in this sense is a good idea, let’s embrace it.
Posted: July 29th, 2011 | Author: Foamcow | Filed under: How to, Web Design | | 1 Comment »
I recently put a new ExpressionEngine site live which featured a search facility that returned results based on multiple category selections. To do this without using a third-party add-on such as Super Search I had to create a little work-around. To be honest, I didn’t think much of this as it seemed quite straightforward but a number of people have asked me how I did it so I thought I would share the information here – mainly because I’m likely to forget an need to do it again at some point.
The premise is thus: We have a number of “products” that are assigned categories. Each product can have more than one category.
We want to be able to search for products based on these categories and return results (for the sake of this demo) that exist in multiple categories.
Our search box might look something like this:
Each drop-down in the search represents one of our categories and is set to return the category id when the form is submitted.
Here is our form’s HTML with EE tags inserted…
<form method="post" action="/search-results/">
<select id="roomtypesel" name="cat[]">
<option value="">Room type</option>
{exp:channel:categories channel="products" category_group="1" style="linear"}
<option value="{category_id}">{category_name}</option>
{/exp:channel:categories}
</select>
<select id="flooringtype" name="cat[]">
<option value="">Flooring type</option>
{exp:channel:categories channel="products" category_group="2" style="linear"}
<option value="{category_id}">{category_name}</option>
{/exp:channel:categories}
</select>
<select id="colourtype" name="cat[]">
<option value="">Colour type</option>
{exp:channel:categories channel="products" category_group="3" style="linear"}
<option value="{category_id}">{category_name}</option>
{/exp:channel:categories}
</select>
<input type="submit" value="Find products" />
</form>
So what we have there are a number of select boxes generated by looping through our chosen category groups and outputting each category as an option.
Note that each select has the same name attribute and we have called that ‘cat[]‘.
When the form is submitted the data from it is POSTed to our ‘search-results’ template and by giving each select the same name attribute, and using the ‘[]‘ we pass the category id of each selection along as values within a single array.
On the search-results template we must enable PHP parsing. This allows us to retrieve the values from the POSTed array and do something with them.
The way in which I do the actual search is to grab the values from the array, combine them into a string and then feed that string into a regular ExpressionEngine channels tag. Because we want to find things that exist in ALL the categories we are interested in we join the category IDs together with a ‘&’.
So within our search-results page we add the following code (including a bit of mild sanitation to ensure we are only getting id numbers)
<?php
// Grab the categories selected from the $_POST
// join them with an ampersand - we are searching for AND matches
$cats = "";
foreach($_POST['cat'] as $cat){
// check we are working with a number
if(is_numeric($cat)){
$cats .= $cat."&";
}
}
// strip the last & off the category string
$cats = substr($cats,0,-1);
?>
Then, within our template we can use the ExpressionEngine Channels tag and feed our string into the category parameter to get the entries that match…
{exp:channel:entries channel="products" dynamic="on" category="<?php echo($cats);?>" orderby="price" sort="asc"}
And that’s it!
Posted: April 30th, 2010 | Author: Foamcow | Filed under: Drunken Ranting, Social Comment, Web Design | Tags: adobe, apple, flash, ipad, iphone, pressrelease | 1 Comment »
This week has seen the argument between Apple and Adobe regarding the absence of Flash from the former’s mobile devices take another step towards a public cage fight between Apple’s Steve Jobs and Adobe’s CEO, Shantanu Narayen. In a press release from Cupertino, Jobs outlines the rationale behind Apple’s decision to keep Adobe’s flagship product away from iPhones and iPads – thus cruelly preventing their owners from enjoying the oodles of top quality Flash content that apparently, in the words of Adobe themselves, “makes up most of the web”.
Well, to be perfectly honest, who actually gives a monkey’s?
No, really. Do you own an iPhone or iPad? Do you actually miss being able to access Flash content?
I own an iPhone and I really couldn’t care less. There is nothing that Flash has delivered to me in the last *cough* years that I can’t live without. In fact, I, like many other web professionals would prefer not to live in a web where Flash is the ubiquitous means for delivering animated “rich” content. I don’t go as far as blocking it with a browser add-on, but I certainly filter it subconciously from my browsing experience.
Actually, I tell a lie. I have recently discovered a must have piece of Flash content – Farmville. Then again the last time I logged in, about 3 weeks ago now I think, I simply dug my farm plots to spell the word “crap” then logged out again. Yeah, I couldn’t have done that without Flash.
In the face of fairness, after all some people do seem to care, perhaps Apple should give customers a choice to install Flash or not. That would be fair wouldn’t it? Personally, I would say “yes, customers should have a choice to suffer at the hands of Flash or not”.
But consider the underlying reason for keeping Flash from marching in the iParade – that of protecting the user experience – it makes sense just to exclude it all together. Why? Because Apple make products for “normal” people, not geeks. These “normals” quite possibly have no idea what Flash is, let alone a plugin. They just want to press a button and go. If Flash was included on iProducts it would need to be “on” by default and so subject the victim user to the performance issues, shortened battery life and instability that have all been well documented by other sources.
Flash just doesn’t fit with Apple’s paradigm of “It just works”.
So where do Adobe go from here? For one, they could fix Flash. Why they don’t do this is really puzzling me. Though in reality I think the iBoat left the iHarbour a long time ago and they are not iInvited on the iTrip. Even if Flash was perfect, I think Apple would resist including it – then again, if it was a better product then perhaps Apple’s and Job’s interests would not be in competeing technologies.
I won’t go into “openness” here. Enough people are arguing about that. At the end of the day Flash is proprietary, inefficient and, on the whole, unnecessary. It is irrelevant. We don’t need it anymore.
Posted: May 15th, 2009 | Author: Foamcow | Filed under: Web Design | | 2 Comments »
I sure I’m not alone in getting annoyed by online advertising. I can tolerate the unobtrusive ads such as Adwords, perhaps even a discrete banner ad but increasingly I’m seeing pages plastered with irritating, animated flash ads.
The worst culprits have pages who’s content is all but obliterated by a plethora of fading, folding and otherwise flapping animations all vying to grab my attention so I grab their product. I never have, nor do I think I ever will.
Yes, I could take steps to block these annoyances, but since I work in marketing I can understand the reasoning behind placing ads and I have nothing against online advertising per se. Besides, why should I!
So, my question to you is this; “have you ever bought anything after seeing, and following an online animated ad?”
Please direct your friends to this post. I’d really like to get a reasonable sample size
Posted: May 6th, 2009 | Author: Foamcow | Filed under: Site launches, Web Design | | No Comments »
A site I’ve been working on for a friend which has been dragging on for about 2 years now has finally gone live!
The site is aimed at the creative community and features a job board, a supplier finder, a course finder for prospective students and an online shop selling those gadgets, gizmos and tat that all designers love.
Go take a look over at Creative Family