Responsive Email Design 12 Aug 2013 7:25 AM (11 years ago)

Responsive Web Design (RWD) hasn’t looked back since it was introduced to us by Ethan Marcotte in an A List Apart article on Tuesday 25th May 2010, but in that same time frame the way we build email hasn’t changed much. Thankfully, in the last year, the tides are turning as people have started to take what they have learned from their RWD builds and apply a similar approach to designing email.

Before we start, I would like to highlight some statistics in a recent talk from Anna Yeaman so that we know exactly what we’re dealing with:

41% of emails were opened on mobile in 2nd half of 2012.
Only 2% will reopen email on another device.
Email that is not optimised for smaller screens suffer from a 28% lower conversion rate.
And 1/3 of users will unsubscribe if they can’t read your messages on their small screens.

Now that you’ve seen just how important it is to get your email(s) looking their best, lets get started.

The basics

Having built only a couple of HTML emails in my career I decided that I’d document my responsive journey so that other people who are about to tackle this same task have a better starting point. I’m not claiming to have all the answers and I’m not saying that what you’re about to read is the best approach but hopefully it’ll be something which you can take and build upon.

Before starting out, I decided to search for information which would aid me in creating my first responsive email and time and time again I kept returning to this document from Campaign Monitor, which laid out the basic building blocks of what was required.

However, as Campaign Monitor point out on their website, the techniques that I am about to list aren’t universally supported by all mobile email clients. How an email displays can vary radically from inbox to inbox but thankfully for us, Campaign Monitor have pulled together useful tables to show us the differing levels of CSS support across email clients and phones and the current state of support for media queries.

Getting started

Remember, coding an email isn’t like coding a web page, unless it’s a web page from 1994. It will trip you up, but take your time, keep referencing different materials and you will get there.

Doctype

Some email clients are known to strip out the doctype but as Hotmail and Gmail automatically insert the XHTML 1.0 Strict doctype it’s not a bad idea to put it in yourself and avoid any possible conflicts down the line.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Viewport meta tag

Much like building a responsive web page, one of the first steps in getting it to play nicely is to add a specific meta tag in the head of your document. Without this meta tag a mobile browser will assume that you’re viewing the content in a desktop environment and set the viewport at a larger width, thus squeezing everything into the tiny screen of your device.

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

To combat this problem, Apple introduced the viewport meta tag, which allows for five basic states to be passed through it. In the code snippet above, we’re only concerning ourselves with device-width and initial-scale. device-width sets the width of the viewport to the width of the device you are on while initial-scale will ensure that upon page load, your layout will be rendered properly at 1:1 scale with no zooming applied.

Resetting the body

The next thing to do is zero out the paddings and margins on the body, if you don’t the document will render with a white border around the content in iOS mail. We then disable automatic text size adjust on some mobile email clients with -webkit-text-size-adjust and -ms-text-size-adjust, which stops devices from reducing/increasing text sizes based on their defaults.

<body bgcolor="#EAE8E4" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="height: auto; padding:0; margin:0; -webkit-text-size-adjust:none; -ms-text-size-adjust: 100%;">

And finally, we set a background colour.

Building

Layout

Drawing parallels with responsive web design it is often a good idea to employee a mobile first approach when starting out, as this allows you to better place your content, leading with the important stuff and then rework the stacking order if needed, before the design gets unwieldy.

Inline CSS

Unfortunately, even with the introduction of these new responsive techniques we still have to declare our styling for elements inline.

<div style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; display: block; font-size: 15px; color: #4D4D4D; font-weight: lighter; line-height: 120%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

Media queries and CSS

The only place where we stipulate CSS which is not inline, can be found in the <head>. This CSS is located within a media query and uses attribute selectors to help avoid an unusual glitch which appears in Yahoo! Mail.

Distinct class names on these attribute selectors are also being utilised because some of the more obvious names get used in email clients and could result in conflicts with layouts going askew. One final thing to note, is that all declarations must end in !important to ensure that these take precedence over the inline code which is coded into the email.

<style type="text/css">
@media only screen and (max-device-width: 480px) {
table[class=tableContent] {
width:320px !important;
}
img[class="headerImage"] {
width:320px !important;
}
p[class="theDate"] {
display: none !important;
}
}
</style>

The first line of the media query sets the max-device-width at a threshold of 480px, this means that when the viewport is smaller than this size, all code within should be executed. Although we’ve only outlined one particular example, media queries can be quite specific and you can pass any number of values through them.

HTML

The outer container is the one of few places where we set a fixed width and this is only done because we need a fixed width for the desktop experience. You will also notice that a class called tableContent has been added which is what our media query, from above, will be referring to for smaller screens when the media query becomes active.

<table cellspacing="0" cellpadding="0" border="0" align="center" width="700" class="tableContent">
  <tbody>
    <tr>
      <td bgcolor="#FFFFFF">
<Insert your one or two column code below in here>
      </td>
    </tr>
  </tbody>
</table>

The above code snippet shall act as the basis of our email, all further code regardless of whether you opt to go down the route of a one or two column layout will be nested within the emboldened td.

As I touched on earlier, when coding an HTML email, it’s important to stick to principles which have been in place for years. Normally when designing a website we’d employ floats to align the content but we should forgo our usual <div style="float: left;"> method to get the content sitting side by side for <div align="left">. We do this because attributes like align="left" and cellpadding="10" are far more reliable than their CSS equivalents float: left; and padding: 10px.

One Column Layout

<table bgcolor="#FFFFFF" cellspacing="0" cellpadding="0" border="0" width="100%">
  <tbody>
    <tr>
      <td bgcolor="#FFFFFF">
<Content goes here>
      </td>
    </tr>
  </tbody>
</table>

Two Column Layout

<table bgcolor="#FFFFFF" cellspacing="0" cellpadding="0" border="0" width="100%">
  <tbody>
    <tr>
      <td bgcolor="#FFFFFF">

        <table bgcolor="#FFFFFF" width="320" border="0" cellspacing="0" cellpadding="0" align="left">
          <tbody>
            <tr>
              <td bgcolor="#FFFFFF" valign="top">
<Content for the left column>
              </td>
            </tr>
          </tbody>
        </table>

        <table bgcolor="#FFFFFF" width="320" border="0" cellspacing="0" cellpadding="0" align="right">
          <tbody>
            <tr>
              <td bgcolor="#FFFFFF" valign="top">
<Content for the right column>
              </td>
            </tr>
          </tbody>
        </table>

      </td>
    </tr>
  </tbody>
</table>

In the example above I’ve also highlighted three set of widths, the main container which is set to 100% and the inner tables which are aligned left and right have a width of 320px. The reason I have chosen 320 is down to the iPhone viewport being this size and because this seems to have become one of the industry standards for a breakpoint in responsive web design.

When you view the two column layout on a mobile device, the two inner tables will stack with the second table falling underneath the first. This is due to the media query being executed on the table with the class of tableContent which reduced its width from 700 to 320. As long as the container table width is more than, or equal to the combined width of the two columns, both will fit nicely.

If, on the off chance, there’s a table cell between two columns you’d like to hide, you can: use display:none.

Typography and Calls to Action

The smallest size which Apple render fonts on their devices’ is 13px and seeing as we’re building emails which are expected to be viewed on said devices your smallest font should keep in line with these guidelines. For my email I settled on making the body copy 15px and set items such as the disclaimer text at the 13px. Be warned, if you set your font smaller than 13px you run the risk of a device upscaling the text and breaking your layout, if you haven’t declared the text-size-adjust properties from the third step, not to mention the various legibility issues you could cause.

While testing my email I noticed that I was running into a lot of difficulty with <p> tags, so decided to switch these out for tags which don’t inherit any basic styling from the browser or clients. In the end I ended up settling on using a <div> because when I used a <span> I would run into a few clearing issues even after I’d set the display of the span to render as a block element.

Another issue I ran into was when I included two divs with different styles (e.g. font sizes) in the same table row, as some mobile clients would only give one precedence and scrap the other. If it is vital to your design to have two visually different items of text then you will have to split them out on to separate table rows.

Calls to Actions

For calls to action (CTAs), which are often seen as the most important part of an email, we should once again adhere to Apples guidelines and make these buttons and tappable areas a minimum of 44 x 44 pixels.

One thing I noticed whilst building CTAs into my email is that padding on a <a href=""> offered up a wide range of problems, some clients rendered the button as you would expect, while some offered up a whole host of different interpretations. To combat this problem, I decided to put the background colour and padding on the parent to give the effect of a button. Although this doesn’t give you as big a hit area, it does give the illusion of one. And after watching people interact with the email, I noticed that the majority of people tried to click on the text of the button which made this problem less of an issue.

<div style="background: #69BF13; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; display: inline-block; font-size: 15px; margin: 0 auto; padding: 20px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;">
<a href="#" style="background: #69BF13; color: #FFFFFF; text-decoration: none;">Centered Button</a>
</div>

Another nice to have, which can be often overlooked, is making these calls to action link to a mobile friendly landing page. There’s no point going to all of this effort when you end up directing your users through to a full blown desktop design.

Imagery

You should always check your email design with the images turned on/off, because it’s wrong to assume that images will be seen by all users.

When serving up images in a responsive environment, the code remains the same whether it’s for a web page or email. In this following code snippet we tell the image contained within its parent to always flow to 100% width of the container. You may also notice that the height is set to auto, which ensures that the image maintains its aspect ratio.


td[class=scaleImage] img {
height:auto !important;
width:100% !important;
}

Retina imagery

Another piece of technology Apple has brought to the market was the retina display, which is available on iPad3 >, iPhone4 > and it’s line of retina notebooks. The key to retina imagery is to create the same image at double its size and then replace the original, smaller sized image, with the retina asset.

Lets say we want to display an image in our email and the design says that its dimensions are 320×320, for our retina displays we should create the same image but at dimensions of 640×640. The reason we create upscaled images is because we then declare it’s old size and because we’re squeezing a larger image into smaller dimensions it ends up giving us a high quality image. There are two ways you can call a retina images in email:

Option One

In this method we pull the old switcheroo and swap out the regular image for the retina asset but as you will notice this is only active when the media query is executed and in this case it is only visible on smaller devices.

@media only screen and (max-device-width: 480px) {
    img[class="scaleImage"] {
        background-image: url(scaleImage-640@2x.png) !important;
        background-size: 320px 320px;
        width: 320px !important;
        height: 320px !important;
    }
}

Option Two

In option two we hide the actual image and display the retina equivalent on it’s parent container, again only active once the media query has been executed.

@media only screen and (max-device-width: 480px) {
    td[class="scaleImage"] {
        background-image: url(scaleImage-640@2x.png) !important;
        background-size: 320px 320px;
        width: 320px !important;
        height: 320px !important;
        }
    td[class="scaleImage"] img { 
        display: none; 
        }
}

Retina only

There is one more solution but it requires a second media query on the page

@media all and (min-device-pixel-ratio : 1.5) {
    img[class="scaleImage"] {
        background-image: url(scaleImage-640@2x.png) !important;
        background-size: 320px 320px;
        width: 320px !important;
        height: 320px !important;
    }
}

Within this media query no breakpoints have been stipulated, only if it meets the minimum creteria of being a machine which has retina capabilities. If it does pass this criteria then the code within will be executed. The good thing about this is that you can abstract all the imagery from the regular media query.

Summary

Although everyone would prefer crisp imagery remember that optimisation is of the upmost importance here. In a recent survey, 3G network connections are currently 40% slower than desktop connections, and 4G/LTE network connections are 12% slower. So don’t be that person who makes their users wait forever downloading a retina image for something which is not necessary.

Copy

Obviously space is at a premium on mobile devices, so it is your job to make sure that the message you are delivering is clear, concise and to the point. Although scrolling isn’t much of an issue on a traditional desktop machine it can become tedious on a mobile device because using your thumb is more taxing than a mouse. It is imperative to keep asking yourself if the customer can easily digest the message you are trying to deliver without having to scroll.

If you feel the need to hide content between a desktop and mobile email, you could use display: none; within a media query but it’s worth asking yourself if you’re willing to hide something from one device is it really worth having at all?

Testing

As if building and testing a regular email wasn’t time consuming enough, adding this extra layer of complexity can and will lead to more issues. Thankfully there are various services available in which to test a whole suite of devices and email clients. Litmus and Email On Acid are second to none when you are looking to previewing your code and similar functionality is available through the likes of Campaign Monitor and MailChimp.

Of course, nothing actually beats testing on actual devices and if you’re lucky enough to be close to a testing suite then you should go out of your way to use that.

Conclusion

Having always worked in environments where I’ve been encouraged to push boundaries and drop support for older versions of browsers and such like, it is still worth noting that responsive email design comes with its fair share of tradeoffs.

Media queries aren’t supported on a few devices and applications, notably Blackberrys and the Gmail app, and in some clients all the header information can be stripped out, meaning no media queries at all. But I’m ok with this, because if the media query doesn’t get executed the email will just render as most people are used to. Think of email media queries as easter eggs.

Thankfully mobile devices and apps are constantly being updated and the life of these are much shorter than that of their desktop counterparts. This means that the technology we need is constantly evolving and our playing field is starting to level out. It’s up to us, the designers and developers, to keep pushing these boundaries in order for the manufacturers to make sure what they are building is constantly being iterated upon and making sure what we are working with isn’t what we were using five years previously.

Demo

If you’re interested in viewing the code for a very basic email template, I’ve thrown together a demo page which can be viewed here. But please note that you’ll only be able to view the media query version on mobile devices.

Useful Links

The post Responsive Email Design appeared first on Jack Osborne.

Fade To Save 11 Jan 2013 8:21 AM (12 years ago)

Although this technique has been around for quite some time I’ve started to see it cropping up in a lot of websites.

The technique I am referring to is when a user saves a particular piece of information and the area turns yellow and fades out to its regular colour, indicating that that particular portion of content has been saved/updated. You might have seen this on sites such as; Facebook, Google, Basecamp and WordPress blogs. To be honest, it’s just about everywhere.

37 signals first brought it to peoples attention back in 2003 with this following blog post. Wow, 2003! I’m writing about a technique that has been easily achievable for ten years… However, this was done with JavaScript and I wanted to see if I could recreate it with only HTML and CSS.

To make it something which is easily recognisable I decided to base my example on one of Facebooks comment modules. Have a look at the demo and see what you think. Unfortunately because the form is hooked up to the div, when you click the button the hash gets appended to the URL. This means that you can only see the background colour of the div change once, until the page gets refreshed again.

Currently I can’t see a way round this problem without the use of some prevent default magic by JavaScript. If you know of a solution to this problem, please feel free to email me and I’ll add your solution into this post and update the example.

Update 03/03/2013: Joao Paulo got in touch with me to offering up two solutions:

Example One: A hack with two buttons.
Example Two: One button, a label, a checkbox and a few span elements inside the label.

Both examples should hopefully be self explanatory but Joao points out that his second example might throw up a few issues

It works good, except for a few seconds – the time you gave the animation – after the page loads. Before that time period ends, you aren’t able to see the animation when you click the “save” button.

This is because I’m putting a cover in front of the animated background during the unwanted animation that happens on each page refresh. Only after it finishes do I remove the cover. Since the cover is there for the first few seconds after a page refresh, you won’t be able to see the animation if you click the save button during that time.

This usually won’t be a problem since an user won’t probably click the save button during the first seconds on a page, but it might happen. Even though, and even if there were another way to stop the animation from happening that first time (with pure css), I would go with the “two buttons” solution. This one is just a little too tricky. It might end up interfering with other parts of your css.

If you have any other solutions, I’d love to hear them.

The post Fade To Save appeared first on Jack Osborne.

Resolutions for 2013 31 Dec 2012 8:59 AM (12 years ago)

It’s 4pm on New Years eve and I’ve just realised that I’ve forgot to write my annual review/resolutions. So, I’m just going to start writing franticly with little or no plan and see where it takes me.

If it turns out a horrible mess, I’ll publish it anyway and edit when I have the time.

A round up of 2012

In last years resolution post I decided that I wasn’t setting any goals for myself, I just wanted to be happy and enjoy myself. If I’m being honest that was a bit of a cop out because I was scared of making a list and not achieving everything on it. However, as it turned out 2012 was an absolutely amazing year for me, probably my best, both professionally and personally.

Two thousand and twelve kicked off in amazing style as I attended the wedding of David and Andria Parsons in Dublin, where I was surrounded by a group of people I’m proud to call my friends. Spending New Years away from my family and friends from home was admittedly a little weird but I wouldn’t change any of it. And it tee’d the year up nicely because it set the tone of “do the unexpected”.

After the wedding, January saw me returning to Nottingham for the second New Adventures. February brought in my birthday where I turned twenty five and March saw me fly out to San Francisco for something which can only be described as a whirlwind trip. It helped open my eyes to what I wanted to do with my life, what I needed to do to get there and how much I still have to learn.

Apart from Roberts stag, April was a bit of a nonevent but sometimes you just have to get your head down and work. And May saw me jet out to Munich with my Dad to witness Chelsea winning the Champions League. I’ll never forget those three days.

After May, everything moved up a gear and I can’t believe it’s nearly January once more. June saw me fly out to New York for an interview at Foursquare, then visit my Aunt in Jacksonville, Florida who I hadn’t seen in nearly eight years.

<lovesickpuppy>The week after my arrival home saw me somehow snag a date with a girl I’ve always liked, but was always too scared to talk to, even at the age of twenty; who says these things get easier with age.</lovesickpuppy>. The fact we’ve done so much since then and the fact she came half way around the world to visit me makes me wonder why I didn’t just go up and say something to her years ago. But it is what it is, and we’ve got a lot of lost time to make up for. You are easily the highlight of my year.

The next week saw me accept a position within Foursquare and plan the next stage of my life. If I’m being honest, I never expected myself to be in this position at this stage of my career. It’s a job where I’m continually having to think about what I’m doing, as I’m working with an exceptionally talented bunch of people and one where I’m left counting my blessing every day. I’ll never take this phase of my life for granted, it’s something so very few people will get to experience and one which I’m going to cherish forever.

July and August saw me wrapping up my old job and trying to figure out the plans and things I’d need for my first three month stint in New York. In all honesty, I probably underestimated a lot of things I needed to do before leaving which didn’t really help me when it came to moving out there. But I’ve never really been one for planning and more the type of person who will just jump in at the deep end.

There’s no way I can fit New York into one article, it’s just incredible. Althought it can be an exceptionally lonely place when you’re out there on your own everything about it was more than I ever expected and I’m lucky I got to meet and share it with so many people. Experiencing and living right in the middle of Hurricane Sandy is something I’ll never forget, nor will my co-workers (sorry everyone, I’m still super embarrassed about that!)

November saw me return home from New York and immediately fly out to what I refer to as my second home, for the third time that year, Belfast. Every year I seem to count down to November for Build and I’ll be bitterly disappointed when it comes to it’s conclusion in 2013.

December has seen me continue working remotely, seeing my friends and realise just how lucky I am.

Resolutions for 2013

If you hadn’t already guessed from reading this post, I won’t be making any plans for this coming year. Last year was so incredible, a large part of me truely believes that even if I complete everything I set out for myself I wouldn’t be able to come close to bettering this one. So, all I will say is that I’ll continue to keep doing what I’m doing and see where it takes me.

I hope everyone gets what they are looking for in 2013.

The post Resolutions for 2013 appeared first on Jack Osborne.

-webkit-box-reflect 3 Oct 2012 3:30 PM (12 years ago)

The Apple website is synonymous for its use of reflections. Go on any page and you will see at least one instance of this effect on the page, it could be on product or a simple module box, it is everywhere. There is no escaping it.

A few months ago—yes this has been sitting as a draft for quite some time—whilst scanning through Twitter, I noticed that someone had posted a link to the Path website, as they had been rolling out a few subtle improvements and upon clicking the link I immediately noticed the “Apple reflection” being used on certain elements. Intrigued to see how they created this I fired up my console and discovered, to my amazement, that it was actually CSS which was being used.

Click to view the effect — Path using something similar to Apples coverflow.

Below is the exact code which, at the time of writing, they are using to achieve this technique.

.moments_book .book-artwork {
  -webkit-box-reflect: below 1px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(50%,transparent),to(rgba(255,255,255,0.5)));
  text-align: center;
  margin-top: 53px;
  margin-bottom: 64px;
}

The above code is all fairly self explanatory with the exception of perhaps the top attribute -webkit-box-reflect. If we break it down it, here is what is happening;

-webkit-box-reflect: <direction> <offset> <mask-box-image>.

<direction>
The direction in which you would like the reflection to appear. As you might expect, it can be stipulated as above, below, left or right.: <offset>
Is a length or percentage which specifies the distance of the reflection from the edge of the element, in the direction which you would like the reflection to appear.: <mask-box-image>
A mask-box-image that can be used to overlay the reflection. If omitted, the reflection has no mask.

It’s probably worth noting that CSS reflections are nothing new, in fact here is an article on the Surfin’ Safari blog, from 2008, which I stumbled across when researching this topic.

It is interesting that reflections haven’t seen as large an uptake as other attributes like border-radius have. One thing is for sure though, box-reflect looks like an amazing feature which will undoubtedly make our jobs a lot easier in the future. Unofrtunately one can only guess as to how long it will take before it is rolled out into the the working draft.

The post -webkit-box-reflect appeared first on Jack Osborne.

Heston Blumenthal 15 Mar 2012 11:44 AM (13 years ago)

On a recent trip I picked up the inflight magazine and found myself reading a question and answer session with Heston Blumenthal, where he spoke about a multitude of things ranging from how he started off and the challenges he faced to his recent escapades.

Half way into the interview, I then stumbled across this quote. Sound familiar?

The benefit of being self-taught was that I thought everything and anything was possible. I didn’t know reasons why things couldn’t be done. But I wouldn’t recommend it to everybody. I think it’s really important to get a sound understanding of classical cooking, really important. You need to know how to bone a chicken, how to fillet a fish, or make a soufflé. If you don’t get training you need to discover it yourself.

I taught myself the classics over the years. I wouldn’t have done it any other way although it made my life really difficult. Had I gone through classical training when I opened the Fat Duck I would have been a lot more organised. I wouldn’t have gone through the first five years, which were so hard. But at the same time I would have been more blinkered.

— Heston Blumenthal speaking to Jane Dunford of British Airways Business Life magazine

The post Heston Blumenthal appeared first on Jack Osborne.

Spindicator 14 Mar 2012 4:27 PM (13 years ago)

spin•di•ca•tor
noun

A loading animation which allows the user to see how much longer they have to wait before progressing to the next stage.

Last week I was tasked with creating a loading animation created entirely in HTML and CSS but unfortunately my first attempt didn’t quite go to plan and I ended up leaving it incomplete. However, not to be beaten I decided to go back and rework my code.

These CSS loading animations are nothing new, I remember seeing my first one back in 2010, but it doesn’t hurt to test yourself by creating these sorts of things.

Here’s a quick rundown:

Set up your containing div and spans within as child elements.
Target each span using nth-of-type to rotate, translate and animate.
Define and apply keyframes to animate the spans

If you’re interested in seeing the final result then feel free to check out my demo but please make sure you are using a modern browser.

spindicator demo.

The post Spindicator appeared first on Jack Osborne.

Using Media Queries to check your designs in the browser 5 Feb 2012 6:08 AM (13 years ago)

A company I used to work for were extremely anal when it came to creating websites that rendered the same across browsers. And as we all know, this can be an extremely painful process.

However, I’m not here to write about that, because we all know that is nonsense. What I’m going to write about is the process that I used to undertake in order to compare my coded design to that of the visual and the steps that I used to take before I started to code.

Before I typed in that opening line of <div id="wrapper"> into my framework, I would insert something akin to

<div id="mock">
<img src="mock-up.png" />
</div>

This div would then be positioned absolutely, with a z-index and a set with a level of opacity. The reason I set the div/image to be slightly transparent was to allow me to see if my code was going off course or if it was remaining similar to that of the .jpg/.png.

Setting up this div with an image didn’t take very long but it became somewhat tedious having to do it for every page within that project, not to mention for every single project. And it became ever more irksome when you had to go back through the code and remove them all when you had signed off the project with the client.

This weekend, before I started work on a new project, I downloaded my framework and I was about to stick in my usual code snippet. However, having recently returned from New Adventures with the mantra of “try new things and if it doesn’t work, who cares” stuck in my head, I decided to opt for a different route.

I think it’s safe to say that 2011 was the year of the media query, you couldn’t escape from it. Everyone seemed to be writing about it but everyone seemed to be writing about the same thing. Of late, I had been wondering what else was achievable and decided to see if it was possible to take this technology and somehow integrate it into my old process.

In essence what I’m about to show you isn’t a million miles away from what I outlined right at the start, it’s just a method which tidies everything up, keeps everything together and is much more manageable.

@media screen and (max-width: 1200px) {	
	#wrapper {opacity: 0.4;}
	body {background: url('mock-up.png') no-repeat center top;}	
}

For this media query I’ve set the max-width of the viewport to be somewhat of a standard size for many laptops/desktop machines, however you can tweak this value if you are on a machine with a smaller viewport.

The above code above will basically render the image to an opacity of 0.4 within the #wrapper tag when you pull the viewport to a size smaller than 1200px but if you resize the browser to a width greater than 1200px it will simply disappear.

The nice thing about this code, is that you can turn the background image on and off as you please by simply resizing the viewport. Hurrah! No need to comment out specific bits of html. And to delete it completely, you just have to remove that one line from your CSS file, you no longer have to delve into every template and remove the code I mentioned at the start.

Another nice touch regarding this method is that because it’s being controlled by CSS you can also switch different visual mock-ups, for different pages

@media screen and (max-width: 1200px) {	
	#wrapper {opacity: 0.4;}
	body#about {background: url('about-mock-up.png') no-repeat center top;}	
}

And different designs for different viewports

@media screen and (max-width: 320px) {	
	#wrapper {opacity: 0.4;}
	body#about {background: url('about-mock-up-iphone.png') no-repeat center top;}	
}

If you’re interested in seeing a very basic demo of what this would looks like, click on the link below. Remember, resize the browser to witness the image appear/disappear.

Demo | Using Media Queries to check your designs in the browser

The post Using Media Queries to check your designs in the browser appeared first on Jack Osborne.

Modal Windows with HTML and CSS 8 Jan 2012 11:51 AM (13 years ago)

Recently I was asked to implement a modal/pop-up window into a clients project. These types of interaction are nothing new and have been readily available with a little help from our good old friends HTML, CSS and JavaScript.

However, I wondered if it would be possible to create this without the use of JavaScript. Obviously there are plenty of packages out there such as fancybox and thickbox, so this has been created purely as an experiment and not something which should be released into the wild, due to it not working well in older browsers. It’s also worth noting that this isn’t going to be the cleanest or best implementation as it was thrown together in the space of a few hours but for a first attempt, I’m pretty happy with it.

The code is fairly simplistic and the all CSS needed for this, barring the reset, is located within the <head>. So open a modern browser and have a look at my take on a modal window created with HTML and CSS.

The post Modal Windows with HTML and CSS appeared first on Jack Osborne.

Resolutions for 2012 3 Jan 2012 6:21 AM (13 years ago)

In what is becoming traditional for this blog, it’s time to post my resolutions for the coming year. If you fancy a nosey then feel free to have a peak at my previous posts; 2009, 2010 & 2011.

In my resolutions post for 2011 I came to realise that setting myself a certain amount of goals was a waste of time, as no matter how many I achieved I would always beat myself up regarding the ones I hadn’t managed. Therefore I decided to set myself three fairly generic but important goals; speak at an event, stay in a job and create a personal project. Thankfully I can say that I managed all three, as well as packing in a heap of other stuff.

A round-up of 2011

The first two weeks of the year started with me finishing up at Hobo, which was the first job I secured after leaving University. I’d spent two and half years there and made some life long friends and mentors. Saying it was a difficult to leave would be an understatement but to progress sometimes you need to make decisions you don’t really want to. Thankfully, we still get to have beers regularly.

Since leaving I joined and left one company and have joined a second. I often find myself wondering if the reason I’ve never been able to settle is down to the fact that my first job might have been my best one. Who knows, the hunt continues.

2011 also seen me beat my conference record by taking in five; New Adventures, Design It Build It, Web Directions @media (where the HTML5 Doctors had a booth), The Highland Fling (which I spoke at) and Build. I was also lucky enough to take in a few great local meet-ups like Glasgow Refresh and standards.Next.

Throughout the year I have met many incredible people, people that I’m glad I’m able to call my friends. Thankfully this tradition continued right up to The Bells when I attended Andria and David Parsons wedding in the ever beautiful city of Dublin. It had been nearly four years since my last visit there and I was glad to see that it still held that certain magic that captivated me the first time. I can’t imagine a better way for my year to have ended. Surrounded by good friends, good conversation, good food and good Guinness.

Resolutions for 2012

If the truth be told, I’m not too sure what to do for my resolutions this year. I like the fact that I left myself fairly vague yet important goals for 2011. And I think that will be the route I take again this year. Therefore I’ll set myself the continuing task of making something useful, staying in employment, continuing to write and doing something amazing.

The reason I’ve done this is because I realised as you get older it’s not what you do that makes you happy, it’s the friends you make and the friends you keep. These are the things which make life enjoyable. And in 2012 I want just that.

The post Resolutions for 2012 appeared first on Jack Osborne.

Good, Fast, Cheap. 19 Aug 2011 9:05 AM (13 years ago)

A few months ago I attended a Long Lunch talk in Glasgow by Hans Wolbers, of Dutch design agency Lava. I throughly enjoyed it but haven’t been able to get one of his slides out my mind. Hans said that when he goes into a meeting with a new client, one of the first things he does is show them a slide which contains three interlinked circles.

Within each circle is a phrase but he tells the client that they can only ever choose two of the three circles/phrases as the remaining one is always unachievable, due to their selections. The three choices are; good, fast and cheap.

So if the client wants their project to be good and fast it certainly won’t be cheap or if they want their project to be fast and cheap it won’t be good. I think by now, you will have got the general idea of how this works.

I had certainly never heard of this before but after some research it would appear that it’s been around for quite some time and is actually part of something called the project triangle. Regardless of this, I thought I would share it just in case some of you hadn’t heard of it either.

The post Good, Fast, Cheap. appeared first on Jack Osborne.

Jack Osborne View RSS