Thursday, July 19th, 2012

Harry Roberts Talk from Front-Trends conf

Today Harry’s talk from Front-Trends was released on vimeo. I’ve been familiar with Harry’s work for a long time now through his blog, twitter and forums.

I found his talk and reasoning for his methods genuinely inspiring – one of those ‘ah ha’ moments and honestly think the practices will help me build more maintainable websites – too often we’re thinking of how the site should look right now or replicating a PSD rather than thinking how it might change and need to grow.

It’s thinking like this that evolves a really good developer to become a really great developer.

Take a look:

Breaking Good Habits – Harry Roberts from Front-Trends on Vimeo.

Tuesday, April 17th, 2012

Using correct post heading tags on WordPress index/blog template

Generally in the WordPress loop we’ll create one snippet of code which is repeated on a blogs landing page showing your first 5 – 10 post snippets. The loop will output something like the below:

<article>
    <h2>Post Title</h2>
    <p>Post Excerpt…</p>
    <p><a href="">Read Full Article</a></p>
</article>

<article>
    <h2>Post Title</h2>
    <p>Post Excerpt…</p>
    <p><a href="">Read Full Article</a></p>
</article>

<article>
    <h2>Post Title</h2>
    <p>Post Excerpt…</p>
    <p><a href="">Read Full Article</a></p>
</article>

I’ve done this myself many times, but in an ideally world the heading tags would run in sequence: h1, h2, h3, h4, h5 and h6. Generally I’ve not worried too much about this – especially now as with HTML5 we can use more than one heading tag per page so long as it’s wrapped in it’s own article tag – though I have no idea how google views this.

Updating some code this afternoon I decided to make the article tags run in turn of authority and its actually ridiculously easy.

<?php if (have_posts()) :
 $postCount = 0; ?>
 <?php while (have_posts()) : the_post();
 $postCount++; ?>

                <?php if ( $postCount <= 6 ) { 
                    echo ('<h'.$postCount.'>');
                } else {
                    echo ('<p class="article-heading">');
                } ?>

<?php the_title(); ?>

                <?php if ( $postCount <= 6 ) { 
                    echo ('</h'.$postCount.'>');
                } else {
                    echo ('</p>');
                } ?>
<?php the_content('Read more'); ?>
<?php endwhile; ?>
<?php else : ?>
 <?php endif; ?>

All the code above does is count the post as they’re pulled from the database and use the appropriate heading tag ending up with a paragraph tag if we’re showing more than 6.

Job done. Feel free to copy paste and use on your own sites.

 

Thursday, January 5th, 2012

Different meta viewport tags for iPhone and iPad

Coding responsive designs I’ve often wanted to use the viewport meta tag for the iPhone but not for the iPad (or use it differently for the iPad) – today I stumbled across these iPad detection scripts by David Walsh.

Using this we can serve a specific viewport meta tag for the iPad, as I’ve done below.

<?php $isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
if ( $isiPad ) { ?>
<?php // This is an iPad! ?>
    <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1.0;">
<?php    } else { ?>
<?php // Not an iPad ?>
    <meta name="viewport" content="width=device-width; initial-scale=0.65; maximum-scale=1.0;">
<?php } ?>
Friday, July 22nd, 2011

What ‘Responsive Web Design’ means to designers who can’t code.

There’s been a lot of excitement and ho-ha about responsive web design recently and it seems to have been a major talking point at the conferences this year.

Like many web designers and developers I’ve just started experimenting with RWD myself and honestly believe it’s the way forward now we have many screen sizes and devices to cater for.

What is Responsive Web Design

For those of you who don’t already know – responsive web design essentially means coding a website to have a flexible layout which adjusts to suit screen widths and devices accordingly.

This is acheived using CSS media queries and techniques to present a varierty of image sizes.

You can see some great examples of Responsive Web Design in action by visiting one of the sites below or indeed this one (though still some tweaks to make) and resizing your browser window*.

Hicks Design (One of the first examples I came across and still one of the best – check Jon’s redesign blog post from June 2010)
CSS Wizardry
Matt Hamm
David Bushell
Thirst Studios (hot off the press!)

Hopefully you can see how usefull this can be in providing one website for all rather than directing to bespoke mobile sites which has been the previous trend.

So what does this mean to designers who can’t code?

Essentially I think it means this:

Learn and learn fast.

Responsive Web Design has made it more important than ever for web designers to understand code.

Without a basic understanding many ‘web designers’ will be left behind as RWD becomes standard for website builds. It will mean more decisions and development time for the developer (who may not understand design) and likely lead to poor results.

Another issue will be how to present designs to clients and RWD makes a strong case for designing in the browser.

Designing 3 or more different layouts in photoshop to present your client will not only be more time consuming but also potentially misleading.

Personally for sometime now I’ve favoured starting in photoshop then quickly moving to html/css before presenting to the client. An approach I’ll continue with responsive design.

Is it important for designers to be able to code? I certainly think so.

Resources

For those of you wanting to learn more on Responsive Web Design here are some resources I think you’ll find useful.

A List Apart – Responsive Web Design
Responsive Web Design
(Printed book – I’m yet to read but heard good reports)
inuit.css (a great starting point for developers)
Techniques for Context Specific Images
(CSS Tricks)
Fluid Grid Calculator (quickly and easily create a custom fluid grid)
Guidelines for responsive webdesign (Smashing Magazine)

*provided you’re not browsing in Internet Explorer 6/7/8**
**Unless the developer has also used respond.js

Wednesday, July 6th, 2011

Animated transitions with Media Queries

I discovered something cool!  ( demo | video )

At least I didn’t know about it until now – maybe you all knew already and no-one told me – why the secrets?

I was thinking about CSS transitions and wondered if they would work within the media-queries in your stylesheet. So I tried it out and guess what. It worked!

Now in our responsive web designs we can also animate the layout changes when a user resizes the browser window, no more rezise, snap, resize, snap.

I tested in Chrome, Firefox 4, Safari 5 and Opera 11 – it worked in all but best in Chrome.

All we need to do is add the appropriate CSS to the elements which change width, height etc in each declaration of that property (anywhere the width & height change in the media-queries).

/* webkit */
-webkit-animation-property: -webkit-width;
-webkit-animation-property: -webkit-height;
-webkit-transition-duration: 1s;

/* firefox 4+ */
-moz-animation-property: -webkit-width;
-moz-animation-property: -webkit-height;
-moz-transition-duration: 1s; 

/* Opera */
-o-animation-property: -webkit-width;
-o-animation-property: -webkit-height;
 -o-transition-duration: 1s;

I uploaded a demo and a video of it in action (just incase you’re unlucky enough to use a non supporting browser).

EDIT:
In my haste I had used : -webkit-width  &  -webkit-height in my CSS for Firefox and Opera which is incorrect. However, it still worked:

… this is because you can literally just have a transition duration and it will transition everything (colour etc) automatically.

Thanks for pointing that out Harry!

Thursday, June 30th, 2011

You should attend the next Web Meet Guildford.

A week ago today I attended the bi-monthly Web Meet Guildford.

Web Meet Guildford Website

For those of you who don’t know:

Web Meet Guildford, aka WMG, aka #WMG was started by Kyanmedia back in November 2010 to bring together people in the web industry in Guildford and surrounding areas for an informal get together to discuss all things ‘web’ over a beer or two.

Typically we meet every 8 weeks or so at the Three Pigeons pub at the top of Guildford High Street, we take over the top floor and there’s a tab behind the bar – so there’s an excuse to come and say hello.

Although I’d intended to visit the previous two meets this was my first. I must admit I was a little apprehensive not knowing anyone – bar a few people I *kind-of* knew through twitter – but hey, there’s only one way to get to know people right?

Within a few minutes of arriving both conversation and real ale were flowing which continued throughout the evening.

I found everyone welcoming, met some very cool fellow ‘web folk’ and enjoyed the evening very much.

If you work in the interweb around the Guildford area you should definitely pop along next time, which I imagine will be late August*. See you there!

* Keep an eye on Web Meet Guildford for the date – or follow the lot of us on twitter.