iCaniCode
Web coding for intelligent devices
Web-app dev: part 3
May 19th
Step 3: Hiding Navigation
So, as you’ll remember from the last step, we’ve got a bit of an elephant in the room at the moment. A whacking great navigation menu at the top of every page. Which, as you well know – isn’t very app-ish.
But – this is easy to fix.
Firstly, we’re going to create a brand new div within our html file. Let’s give this div an id of “menuButton”, and place it above the “appheader” div within our code. Then, because we want to describe what we’re creating, we’re going to add in a little bit of text that says “Menu”.
Within our html file, this will translate into:
<body> <div id="container"> <div id="menuButton">Menu</div> <div id="appheader">
Next, we’re going to add a bit of style. Now – other tutorials will sing the praise of jQTouch for this bit, as there are a selection of button graphics readily available that the library understands.
We however, are going to use styling within our “touch.css” file to draw the button directly within the users browser.
You’re probably asking yourself “why” at this stage.
Simply put – although we’re designing a site for mobile devices that (generally) have Edge, or 3G data connections – sometimes, our user will be stuck in low signal (GPRS) areas. Seeing as we’re going to be putting our user’s phone / tablet through the mill with some of the other functionality we’ll be adding in later on – we need to keep our filesizes as low as possible, avoid bloated code, and get smart wherever we can.
Or – simply put – our app will suck.
(it’s worth noting that I’m about to contradict myself in a moment or two – but don’t focus on it too much, I’ll explain why after I’ve done it)
So – let’s create a button within our “touch.css” file, and tidy things up a little so it looks good within its surroundings:
#menuButton {
font-weight:bold;
font-size:0.8em;
position:absolute;
display:block;
padding:5px;
margin-top:5px;
margin-left:5px;
border:1px solid #342826;
-webkit-border-radius:6px;
background-image:
-webkit-gradient(linear, left top, left bottom, from(#4863a0), to(#000000));
-moz-linear-gradient(top,#4863a0,#000000);
gradient(linear, left top, left bottom, from(#4863a0), to(#000000));
text-shadow:0 1px 0 #342826;
color:#ffffff;
}
#menuButton a {
text-decoration:none;
color:#ffffff;
}
#appheader h1 {
background-color:#4863a0;
margin:0;
padding:6px 0;
border-bottom:1px solid #342826;
color:#ffffff;
background-image:
-webkit-gradient(linear, left top, left bottom, from(#4863a0), to(#98afc7));
-moz-linear-gradient(top,#4863a0,#98afc7);
gradient(linear, left top, left bottom, from(#4863a0), to(#98afc7));
font-size:1.4em;
font-weight:bold;
text-align:center;
text-decoration:none;
text-shadow:0 1px 0 #342826;
}
And, while we’re in there, let’s fix a rotation problem within the iPhone’s browser, that doesn’t re-draw gradients very well when the page orientation changes:
body {
background-color:#4863a0;
font-family:Helvetica;
color:#342826;
margin:0;
padding:0;
}
Oh, and we’ll restyle our list a little too, so it’s more in keeping with what we’re about to do:
#navigation {
padding-top:0;
padding-bottom:10px;
}
#navigation ul {
list-style:none;
margin-left:10px;
margin-right:10px;
margin-top:-1px;
padding:0;
font-size:1.3em;
font-weight:bold;
}
#navigation ul li a {
background-color:#ffffff;
border:1px solid #342826;
color:#222222;
display:block;
margin-bottom:-1px;
padding:12px 10px;
text-decoration:none;
background-image:
-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#98afc7));
-moz-linear-gradient(top,#ffffff,#98afc7);
}
#navigation ul li:last-child a {
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-bottomleft-radius:10px;
-moz-border-bottomright-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
Notice how we’ve removed the first-child ul li rules, which should give you a clue as to what we’re going to do next.
If you’ve touched anything web development related over the past few years, you will (hopefully) have come across the ‘write less, do more’ javascript library – jQuery.
As someone who likes to achieve ‘complex’ results / effects quickly – jQuery is my library of choice. Not just for its simplicity, but also for its ever-growing (and welcoming) community.
So, because I dip in and out of it quite a bit, I knew from the get go that the next thing we’re going to implement – a dropdown / scrollup menu with an onClick event – could be achieved within a very small amount of code.
Now, let’s go back to our html file and add in a link to the Google hosted minimised file within the <head>:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
We could easily include the minimised version of jQuery as another file for the user to download from our ‘scripts’ directory, but for the moment (while we’re deciding on whether of not we’ll be making use of some other Google tools), this will do the job.
Next, we want to call out to jQuery, and tell it that when our document has loaded, the first thing it should do is hide our navigation div. Then, we want to tell jQuery that our menuButton div is going to house a click function that will control our scroll up / drop down effect (which jQuery defines as ‘slideToggle’).
(here’s the bit where I contradict myself – blink and you’ll miss it)
And we’ll do that, by adding the below code directly underneath the jQuery library <script> link within our html file:
<script type="text/javascript">
$(document).ready(function(){
$('#navigation').hide();
$('#menuButton').click(function() {
$('#navigation').slideToggle(400);
return false;
});
});
</script>
Originally, this function was housed outside of the main page, to keep our code light, and improve performance on some devices.
In practice however – this (irritatingly) caused a bug.
To cut a long story short, our jQuery library loaded, but the separate script (controlling elements within our dom) didn’t work. Our browser knew it was there, and knew what it did, but chose to ignore it.
Our solution – adding in the code directly to the <head> of each page – was simple and effective, but simultaneously ugly and annoying.
Which is why we’ll be revisiting this, a little further down the road.
But anyway, after all of the above, it’s time for a bit of testing to see where we are. Assuming you added the code to our news page to start with, it should now look something like this when it loads:
And, once our menu button is pressed, the navigation div should push down, to look like this:
Which, is a step in the right direction towards our ‘app’ look and feel. And without a graphic in site. Well, yet.
But that’s enough for today. Next time, we’ll play around with some more data, and begin to explore the location-based (GPS / cell-tower positioning) capabilities of our target devices.
End code:
As before, you’ll need your own Google AJAX API key to make the downloadable files work – so remember to signup for one if you haven’t already. After that, you can grab the complete source for the app-so-far and, importantly, make it work. Or, if you’re just interested, you can have a look at the app-so-far here (funky phone needed).
Web-app dev: part 2
May 17th
Step 2: Adding Some RSS
Now we’re going play around with some lubberly AJAX techniques, to give our app some up-to-date news. Just so we have a simple starting point, here’s how the existing WCC app does the job:
Not ugly, but not in keeping with the design we’ve been creating so far. But before I get ahead of myself, let’s have a look at how we’re going to get the News feed into our web app.
I’ve experimented with several different javascript libraries that have RSS / XML repurposing capabilities (such as jQuery), but the best one I’ve come across by far – is the Google AJAX Feed API. It might not be the ‘coolest’ of libraries, but it’s simple, has lots of documentation, plenty of practical examples, and – most importantly – it does the job.
But, if you’ve never used it before, you’re going to have to sign up for an API key before we can carry on.
Got it? Good. Let’s get stuck in.
Now – we’re going to take our original file (which, you probably named “index.html”, if you’re anything like me), make a copy of it in the same directory, and rename the file to “news.html”. We could do something a little bit more dynamic (which would be more in keeping with a true web-app), but lets focus on simplicity for the moment and get funky a little further down the line.
So – in your directory, create yourself a new “scripts” folder. In that new folder, save yourself a blank text file called “wccnews.js”. This is going to do all of the capturing work for us, and (staying true to my previous words) keep our main code nice and light.
Within our main html file, we want to add two script links to the <head>, which are emboldened below.
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="styles/touch.css" type="text/css" media="only screen and (max-width: 480px)" /> <meta name="viewport" content="user-scalable=no, width=device-width" /> <title>In Warwickshire</title> <script type="text/javascript" src="http://www.google.com/jsapi?key=***YOUR_API_KEY_GOES_HERE***"></script> <script type="text/javascript" src="scripts/wccnews.js"></script> </head> <body> <div id="container"> <div id="appheader"> <h1>In Warwickshire</h1> </div> <div id="navigation"> <ul> <li><a href="">News</a></li> <li><a href="">Events</a></li> <li><a href="">Services</a></li> <li><a href="">Information</a></li> <li><a href="">Contact WCC</a></li> </ul> </div> <div id="content"> </div> <div id="appfooter"> <p class="footer">In Warwickshire created by Pete Lancaster 2010</p> </div> </div> </body> </html>
Now we want to edit our blank “wccnews.js” file, and use the feed control method from our chosen library (there are other methods available, but this one will do just what we’re after with minimum effort).
So, to begin, we need the url for our feed, and we need to know where we’re going to put the content that we capture from said feed. And, in case you’re wondering where that might be – remember that “content” div that’s been doing nothing up until now? The below code (line six to be exact) tells the library that the “content” div is where our results need to end up.
google.load("feeds", "1");
function OnLoad() {
var feedControl = new google.feeds.FeedControl(); feedControl.addFeed("http://www.warwickshire.gov.uk/corporate/newsstor.nsf/newsfeed.rss.2.0", "News");
feedControl.setNumEntries(8);
feedControl.draw(document.getElementById("content"));
}
google.setOnLoadCallback(OnLoad);
Beautifully simple isn’t it? And – now that we’ve added a feed into the page – our news.html file should be looking something like this:
Which, is functional, but pretty damn ugly. Happily though, Google have produced a simple little guide to help us with styling our feed. Sadly however, it’s a bit useless at the moment (because it’s missing the most important bit), so we’ll have to rely on some in Google Chrome browser element inspection to get our styling down properly.
So, let’s go back to our “touch.css” file, and add in some extra classes. Actually – quite a few extra classes. Man alive that missing bit would be so useful right around now…
#content {
font-family:Helvetica;
}
.gfc-control {
margin:10px;
border:0;
}
#content a {
color:#222222;
text-decoration:none;
font-weight:bold;
font-size:1em;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
#content .gfc-title {
text-decoration:none;
font-weight:bold;
font-size:1.3em;
border:1px solid #342826;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-moz-border-topleft-radius:10px;
-moz-border-topright-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
outline:0;
outline-color:transparent;
color:#ffffff;
display:block;
text-shadow:0 1px 0 #342826;
text-align:center;
background-image:
-webkit-gradient(linear, left top, left bottom, from(#4863a0), to(#98afc7));
-moz-linear-gradient(top,#4863a0,#98afc7);
gradient(linear, left top, left bottom, from(#4863a0), to(#98afc7));
}
.gf-title {
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
margin:0;
}
.gfc-results {
margin:0;
padding:0;
}
.gf-result {
margin-top:-1px;
border:1px solid #342826;
background-color:white;
background-image:
-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#98afc7));
-moz-linear-gradient(top,#ffffff,#98afc7);
gradient(linear, left top, left bottom, from(#ffffff), to(#98afc7));
display:block;
padding:10px;
}
#content .gfc-resultsHeader {
height:24px;
margin-bottom:0;
}
#content .gfc-result {
margin:0;
border:0;
padding:0;
}
#content .gf-relativePublishedDate {
color:#6f6f6f;
text-shadow:0 1px 0 #ffffff;
font-size:0.8em;
margin:0;
border:0;
}
#content .gf-snippet {
color:#6f6f6f;
text-shadow:0 1px 0 #ffffff;
font-size:0.8em;
margin:0;
border:0;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
So – after quite a bit of extra code, we should now have something that looks a little bit like this:
Which is a good start – but it needs some work. The News items appear as buttons, but currently only hyperlink at the top of each feed entry is ‘pressable’. We’re going to have fix that in a little while, but for now – it’ll do.
So let’s apply the same method to the events feed by creating “events.html”, and “wccevents.js” by copying our existing files, and using the WCC events feed.
But before we do, let’s look at the WCC iPhone equivalent.
Now, I’m going to assume that you’ve learned everything that you need to know for creating the Events section. So, I’ll skip right over that bit, and focus on what we see afterwards.
Looking at page now, we can see why the date range has been hidden from the News and Events sections. Essentially, its inclusion in the Events section would give some slightly confusing information to the end user.
So, let’s go back and amend our “touch.css” file, to hide the post creation date.
#content .gf-relativePublishedDate {
display:none;
}
And after that small change, our News and Events sections should look like this:
Which, in my humble opinion, actually makes them both look better than before. But we’re still missing something important – a simple way for a user to tell which stories / events they’ve already looked at with a glance.
Adding…
#content a:visited {
color:#6f6f6f;
text-shadow:0 1px 0 #ffffff;
}
…should do the trick.
And so, after a simple bit of javascript coding, a splash of RSS and a hefty shot of intermediate-level styling, we’ve added some more functionality to our web-app.
Next however, we’re going to address that elephant in the room. The navigation menu that’s very functional, but more than a little out of place. But that’s not for today 
.
End code:
Instead of adding all of the end code here (because we’ve been creating and changing multiple files) you can view an example (as before, funky phone required) or download the source. You’ll notice I added in some working links now that we’ve got a bit of functionality, and cleaned things up a bit.
Web-app dev: part 1
May 16th
So – something interesting happened in Warwickshire recently. But, it happened pretty quietly.
A little while back, Warwickshire County Council launched an iPhone application. It was a tiny ‘toe in the water’ moment – checking out what the temperature was, and if people might actually be interested in giving it a whirl.
It didn’t do too badly.
But it immediately got people like me thinking about how the app could be reproduced as a cross-platform smartphone web-app.
And then opendata.warwickshire.gov.uk came along, providing all of the original datasets used for the iPhone application to anyone who wanted them, to do anything they liked with them (well, within reason). Shortly followed by a Hack Warwickshire competition.
Enter one Pete with a web-app goal, and several cups of coffee.
And here begins our tale.
Step 1: Styling and Layout
Always do the easy bits first I say – complex things are much more fun. Styling a web-app is pretty simple, so let’s set the look and feel first.
The current iPhone app looks like this:
Nothing wrong with it if you’re a regular iPhone app user, but it’s a little bit bland. Let’s see what we can do with a header, a list, some gradients, and a bit of subtle border-radius usage.
First things first – let’s setup our workspace. We’re going to get down and dirty with HTML5 as we go through this process, so we want to declare our doctype as: <!DOCTYPE HTML>, then add in our usual head and body structure. To avoid any of that potential copyright infringement stuff, we’ll title our web-app ‘In Warwickshire’.
<!DOCTYPE HTML> <html> <head> <title>In Warwickshire</title> </head> <body> </body> </html>
Because we’re designing for a mobile device, we want to think ‘portrait’ as opposed to the traditional desktop ‘landscape’ orientation. So, we’re going to put everything in a container div to make styling easier and help to keep everything in proportion. Before you say it – I know if we were being completely true to HTML5, we wouldn’t need as many divs as you’re about to see – but we do want to add in a little bit of backward compatibility to our finished product.
We want ourselves a header, some navigation that’s independent of the main content (just in case we want to get fruity somewhere down the line), a bit of blurb, and a nice footer. That translates into something like:
<!DOCTYPE HTML> <html> <head> <title>In Warwickshire</title> </head> <body> <div id="container"> <div id="appheader"> </div> <div id="navigation"> </div> <div id="content"> </div> <div id="appfooter"> </div> </div> </body> </html>
Lets keep things fairly similar to the existing structure for the moment, and carry over the News, Events, Services and Info sections into our navigation list. But, because we’re not Warwickshire County Council (and importantly, don’t want anyone to think we are) we’re going to change Contact Us to ‘Contact WCC’.
And let’s add a h1 header that actually says ‘In Warwickshire’ too, and a little footer that says who made it. We’ll worry about the content div in a minute.
<!DOCTYPE HTML> <html> <head> <title>In Warwickshire</title> </head> <body> <div id="container"> <div id="appheader"> <h1>In Warwickshire</h1> </div> <div id="navigation"> <ul> <li>News</li> <li>Events</li> <li>Services</li> <li>Information</li> <li>Contact WCC</li> </ul> </div> <div id="content"> </div> <div id="appfooter"> <p class="footer">In Warwickshire created by Pete Lancaster 2010</p> </div> </div> </body> </html>
And before we begin to style our content, let’s add a little bit of code into the header that will stop any unnecessary scaling.
<!DOCTYPE HTML> <html> <head> <meta name="viewport" content="user-scalable=no, width=device-width" /> <title>In Warwickshire</title> </head> <body> <div id="container"> <div id="appheader"> <h1>In Warwickshire</h1> </div> <div id="navigation"> <ul> <li>News</li> <li>Events</li> <li>Services</li> <li>Information</li> <li>Contact WCC</li> </ul> </div> <div id="content"> </div> <div id="appfooter"> <p class="footer">In Warwickshire created by Pete Lancaster 2010</p> </div> </div> </body> </html>
So – after all that, we should have a page that looks like this:
Now, let’s add a bit of touch-screen device style.
We’ll create a file called “touch.css”, create a folder for it (called ‘styles’ in my case), and link off to it. We could do in-line styling, but that would make the code within the page very bloated very quickly. So, in most (but not all) cases, we want to put separate code in a different directory. And on the end of our link, we want to make the stylesheet resolution-specific (480px width to be exact), so we’re going to add in this bit of code to the <head>:
<link rel="stylesheet" href="styles/touch.css" type="text/css" media="only screen and (max-width: 480px)" />
You’re probably wondering why we’ve made ourselves a resolution-specific link here, as opposed to a more general ‘catchall’ stylesheet. That’s because, after we’re a bit further down the road, we’re going to turn our sights to the iPad and some other mobile devices. But that’s not for today.
Actually – you might also be asking yourself why we’re using 480px as a value. For the answer to that one – see the currently supported Android and iPhone screen resolutions.
So – in our touch.css file, let’s set some global standards:
body {
background-color:#c3fdb8;
font-family:Helvetica;
color:#342826;
margin:0;
padding:0;
}
And make it a bit funky with a dynamically drawn gradient background, and some lists that are ‘pressable’:
body {
background-color:#c3fdb8;
font-family:Helvetica;
color:#342826;
margin:0;
padding:0;
background-image:
-webkit-gradient(linear, left top, left bottom, from(#c3fdb8), to(#338800));
-moz-linear-gradient(top,#c3fdb8,#338800);
gradient(linear, left top, left bottom, from(#c3fdb8), to(#338800));
}
#navigation ul {
list-style:none;
margin:10px;
padding:0;
font-size:1.3em;
font-weight:bold;
}
#navigation ul li a {
background-color:#ffffff;
border:1px solid #342826;
color:#222222;
display:block;
margin-bottom:-1px;
padding:12px 10px;
text-decoration:none;
}
And let’s add some specific styling to the first and last elements within our navigation:
Now, the iPhone and Android web-designers amongst you will have immediately noticed the stack of superfluous border-radius and gradient commands that I’ve added in, seemingly for desktop browsers. As with the width declaration earlier – there is method to my madness.
At the time of writing, Opera Mini, and several other mobile web browsers have made their way over to the iPhone, and the Android browser market is set to explode in the near future. So – why not add some code in now, to future proof your designs for a little later? It’ll save you some time in the long run.
In fact – the super-eagle eyed amongst you will also have noted that the last two border radius declarations are CSS3 original ‘non-browser-specific’ commands – making the assumption that at some point in the future, we won’t have to call out to a particular browser’s capabilities, but just rely on all of their inherent open standards.
But anyway – that probably won’t happen anytime soon (weirdly, since first writing this, I’ve learned that new versions of Opera {a browser I love to hate} are actually doing this – using valid CSS3 as opposed to proprietary commands).
Let’s have a look at where our code has got us so far.
Bit less ugly – but we’ve got to sort out that banner, and give the footer a bit of style. And come to think of it – those list items look a bit boring too, and we might want to do other things with the navigation div later, so we’ll add in another regional property.
body {
background-color:#c3fdb8;
font-family:Helvetica;
color:#342826;
margin:0;
padding:0;
background-image:
-webkit-gradient(linear, left top, left bottom, from(#c3fdb8), to(#338800));
-moz-linear-gradient(top,#c3fdb8,#338800);
gradient(linear, left top, left bottom, from(#c3fdb8), to(#338800));
}
#appheader h1 {
background-color:#4863a0;
margin:0;
padding:10px 0;
border-bottom:1px solid #342826;
color:#ffffff;
background-image:
-webkit-gradient(linear, left top, left bottom, from(#4863a0), to(#98afc7));
-moz-linear-gradient(top,#4863a0,#98afc7);
gradient(linear, left top, left bottom, from(#4863a0), to(#98afc7));
font-size:1.5em;
font-weight:bold;
text-align:center;
text-decoration:none;
text-shadow:0 1px 0 #342826;
}
#navigation {
padding:10px 0;
}
#navigation ul {
list-style:none;
margin:10px;
padding:0;
font-size:1.3em;
font-weight:bold;
}
#navigation ul li a {
background-color:#ffffff;
border:1px solid #342826;
color:#222222;
display:block;
margin-bottom:-1px;
padding:12px 10px;
text-decoration:none;
background-image:
-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#98afc7));
-moz-linear-gradient(top,#ffffff,#98afc7);
}
#navigation ul li:first-child a {
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-moz-border-topleft-radius:10px;
-moz-border-topright-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
}
#navigation ul li:last-child a {
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-bottomleft-radius:10px;
-moz-border-bottomright-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
p.footer {
color:#ffffff;
text-align:center;
font-size:0.8em;
text-decoration:none;
text-shadow:0 1px 0 #342826;
}
And after all of that, we have:
So, the styling is coming along nicely (although it does need a bit of tweaking). We haven’t touched any data yet – or done anything hugely different so far. Next comes the beginning of the fun stuff – repurposing some RSS feeds.
But you’ll have to wait for part 2 to see that 
.
In the meantime, feel free to look over the end code below (you’ll note that I added in some hyperlinks to the original html file, which I missed out above), view a live demo (funky phone needed), or download the example.
End code:
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="styles/touch.css" type="text/css" media="only screen and (max-width: 480px)" /> <meta name="viewport" content="user-scalable=no, width=device-width" /> <title>In Warwickshire</title> </head> <body> <div id="container"> <div id="appheader"> <h1>In Warwickshire</h1> </div> <div id="navigation"> <ul> <li><a href="">News</a></li> <li><a href="">Events</a></li> <li><a href="">Services</a></li> <li><a href="">Information</a></li> <li><a href="">Contact WCC</a></li> </ul> </div> <div id="content"> </div> <div id="appfooter"> <p class="footer">In Warwickshire created by Pete Lancaster 2010</p> </div> </div> </body> </html>
body {
background-color:#c3fdb8;
font-family:Helvetica;
color:#342826;
margin:0;
padding:0;
background-image:
-webkit-gradient(linear, left top, left bottom, from(#c3fdb8), to(#338800));
-moz-linear-gradient(top,#c3fdb8,#338800);
gradient(linear, left top, left bottom, from(#c3fdb8), to(#338800));
}
#appheader h1 {
background-color:#4863a0;
margin:0;
padding:10px 0;
border-bottom:1px solid #342826;
color:#ffffff;
background-image:
-webkit-gradient(linear, left top, left bottom, from(#4863a0), to(#98afc7));
-moz-linear-gradient(top,#4863a0,#98afc7);
gradient(linear, left top, left bottom, from(#4863a0), to(#98afc7));
font-size:1.5em;
font-weight:bold;
text-align:center;
text-decoration:none;
text-shadow:0 1px 0 #342826;
}
#navigation {
padding:10px 0;
}
#navigation ul {
list-style:none;
margin:10px;
padding:0;
font-size:1.3em;
font-weight:bold;
}
#navigation ul li a {
background-color:#ffffff;
border:1px solid #342826;
color:#222222;
display:block;
margin-bottom:-1px;
padding:12px 10px;
text-decoration:none;
background-image:
-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#98afc7));
-moz-linear-gradient(top,#ffffff,#98afc7);
}
#navigation ul li:first-child a {
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-moz-border-topleft-radius:10px;
-moz-border-topright-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
}
#navigation ul li:last-child a {
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-bottomleft-radius:10px;
-moz-border-bottomright-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
p.footer {
color:#ffffff;
text-align:center;
font-size:0.8em;
text-decoration:none;
text-shadow:0 1px 0 #342826;
}
Testing, testing, 1, 2, 3…
May 16th
Hello world!
This blog is going to document different experiments in mobile / iPhone / Android related web design and development. All going well, hopefully I’ll learn a few new tricks, and some of the code I’ll be sharing will prove useful to other people!