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: May 6th, 2011 | Author: Foamcow | Filed under: General, Social Comment | Tags: AV, democracy, politics, yes2AV | No Comments »
Can’t believe that the Conservatives have won Gloucester. But then again only around 40% of the electorate bothered to vote here.
What’s wrong with people? I’ll be honest, there was no candidate that really struck me as being worth my cross but I weighed things up and voted for who I wanted to win, knowing that they would not. Did I Waste my vote? Perhaps. But surely one should vote with their convictions rather than try to manipulate the least undesirable result? I voted with my head and heart and a blind faith in the system – just in case miracles happened.
So you get splits like this, for Barnwood, with 5 candidates standing. Resulting in 66% of those that bothered to vote NOT voting for the winner:
Trade Unionists 115 (3.6%)
Cons 1,086 (34.07%)
UKIP 209 (6.55%)
Lib Dem 1,059 (33.22%)
Lab 718 (22.52%)
Or this for Quedgeley Severn Vale, with just 3 candidates standing, in which 60% voted AGAINST the winner.
Lab 477 (25%)
Lib Dem 750 (39%)
Cons 670 (35%)
When you have more than 2 parties the system doesn’t work especially when there is no real difference between the candidates (i.e. they are all as bad as each other). So one candidate gets very slightly more votes than the others and is deemed the winner but in reality they have fairly low overall support.
If no candidate gets over 50% of the support then how is that democratic?
If you support the winning party then great. You got the result you wanted but don’t you still question the fairness of a system in which the majority of people voted against the eventual winner? It’s nothing to do with which party you support. It’s about having a system that represents the majority preference.
Too late now, but if you didn’t bother to vote or voted No in the AV campaign then shame on you.