Responsive design sizes

Here’s the most popular sizes and max width for design for responsive design:

Desktop            1024×768             Run max 978px
Ipad landscape 1024×690             Run max 978px
Ipad potrait        768×946               Run max 748px
Iphone               320×356               Run max 300px
Iphone 4            320×356 x2           Run max 300px
Samsung          320(x1.5)x451      Run max 300px

Empty div gets bottom border on iPad/iPhone browser

Not sure if anyone else has been battling with this issue?  Let me explain – I built a set of templates that were tested in the usual suspect (IE6-9, FF3+, Safari 5+ Chrome 10+ Opera 10+) and all worked perfect! (albeit I had to use a dreaded IE6 CSS and conditional statement and the dreaded png fix!).

While I was at it I thought I’d just run a quick test on the Ipad/Iphone just to make sure – I honestly thought it would all be fine as I’d tested thoroughly on Safari for Windows and Chrome.  But to my dismay the “top” div I was using to hold a curved background image in and another I was using to hold a logo had strangely suffered from what looked like a 1px white border on the bottom of each div – obviously ruining my design!

Well I wasn’t going to let the Apple posse get one over on me so I turned to the trusty Google to find an answer – and luckily I did!  A single line of “meta” code in the header was all I needed to beat this Apple monster away :)

Here’s the code:

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

In a nutshell you need to tell the Ipad/Iphone not to play with the zoom scale at all – and viola it fixes the issue!

Useful WordPress navigation code

For most of my WordPress websites I tend to use an old but superb plugin called “Fold Page List” – this improves the standard WordPress navigation by showing child pages only when in a particular section! Perfect!

But what if I didn’t want to show the “whole navigation” on the left hand side when I went into section?!?!  Well as far as I can see I needed to create/use something custom.

So a search on Google came up with a few results but nothing really seemed to really do what I wanted, until I came across this post from TammyHart Designs – and it worked out perfect!

Made a few tiny tweaks to make sure the code validated so here’s  my reworked code (kudos to TommyHart for the original start though!):

<?php if ( is_page() ) { ?>
            <?php
                if($post->post_parent)
                    $children = wp_list_pages('title_li=&child_of='.$post->post_parent.'&echo=0'); else
                    $children = wp_list_pages('title_li=&child_of='.$post->ID.'&echo=0');
                    if ($children) { ?>

                    <h2><?php $parent_title = get_the_title($post->post_parent); echo $parent_title; ?></h2>
                    <ul>
                        <?php echo $children; ?>
                    </ul>
            <?php } ?>
        <?php } ?>

Still not perfect as I only want to show grand-children pages when you click on the child page – exactly what Fold Page list does – so looks like I’ll be doing a tweak to that involving the above really soon ;)

My use of Google Chrome Extensions

Well I’ve finally done it!  Yep! I’ve finally made the move to Google Chrome for my default web browser.  I’ve had it installed for a while and used it frequently for checking etc, but always found the need to fall back to Firefox for my day to day browsing.

But with the constant updates and the borwser seeming to get slower and slower each upgrade I’ve taken the plunge – especially now that I can get a load of the add-ons and extras I found so handy with Firefox with Chrome in some form or another.

So here’s a list of some of the more useful Chrome addons that I now utilise!

More to come – but the rest are on my works machine!
Meanwhile I’m also evaluating some of the Google Chrome “Apps” – though not sure about these yet ;)

Email Regular expression

Stuck trying to come up with the perfect regular expression for email validation?!?!  Well look no further – here’s one that I’ve found “perfect” to date!  It seems to cover all the clever variants and funny characters that are accepted in email addresses!

Bet you didn’t know the apostrophe and many other “special” characters are actually valid in an email address.  Here’s a quick low-down on what I know is accepted (if you find out any more let me know!):

  • Uppercase and lowercase English letters (a–z, A–Z)
  • Digits 0 to 9
  • Characters # $ % & ' * + - / = ? ^ _ ` { | } ~
  • Character . (dot, period, full stop) provided that it is not the first or last character, and provided also that it does not appear two or more times consecutively (e.g. craig..cartwright@example.com).

So here’s the useful reg expression:

/^[\.\#\$\%\&\'\*\+\-\/\=\?\^\_\`\{\|\}\~0-9A-Za-z]+\@[A-Za-z0-9\-\_\.]+\.[A-Za-z]{2,4}$/

Hope this helps!

 

Some nice “responive web design” examples

Full blog entry coming shortly (if I ever get enough time!)

But in the meantime here’s some nice examples:

And some boiler plates and templates:

 

Testing Testing

Hello everyone…. just a quick test

Hoping to add more useful (well I think so) here soon including film reviews, CMS and web information, car info and ummmm any other daft crap floating around I like and hope you may like!