This is a snippet to get you started with most of the major screen resolutions across most of the major platforms.

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Everybody loves free stuff, right? As a designer I love free fonts, so I thought I’d share some of the latest and greatest free fonts available from around the web. Obviously, because these fonts are free, they are going to be very common, so use them wisely!

Read more →

As more and more of us view websites across more and more platforms, how do web designers create the best possible experience for all these different platforms? The answer, make the site responsive. This means optimising the site so that it changes dynamically depending on screen resolution.

Read more →

I discovered this really handy Google Map marker creator page.

Read more →

These themes are built to resize and realign itself to cater to the different screen sizes of mobile devices, such as smartphones and tablets, i.e. they are responsive.

There don’t seem to be many places which explain a simple way of doing this, so I thought I’d share my quick and dirty method. This tutorial assumes that you have a good understanding of both WordPress and Javascript. I don’t have time to offer support in any way on this method, sorry.

Read more →

Here is a list of decent jQuery and javascript image galleries

Read more →

Here is a list of elegant corporate WordPress themes. They are great as a starting point if you are feeling uninspired about where to take your new website

Read more →

This is a list of useful lightbox scripts which Ash uses in many of the projects in the portfolio

Read more →

Just a selection of very useful Photoshop textures and brushes.

Read more →