Surf the Dream A discourse of links and articles from Justin Avery

Tag Archive: Responsive Design

  1. Getting back to podcasting

    Leave a Comment

    You should be very aware that I love a great weekly newsletter. One of my recent favourite newsletters to receive is Paul Jarvis’ Sunday Dispatches where Paul imparts a very useful piece of nerdy knowledge each week.

    The content is around 95% educational and allows you to learn a lot about the web and how to further yourself through emails, podcasts, social etc — I would normally consider myself to be fairly well versed in everything web however there is always at least a small piece of information that I can take from each week.

    The other 5% is still educational but it’s more of a mini pitch to buy into one of Paul’s paid for courses… and while I haven’t ever made a paying jump I’ve seen some of the give away lessons and I’m just waiting for the right course to buy. For all the great stuff you get from these dispatches I’d still be happy if he pitched more.

    But I digress.

    This week the email was all about podcasting. Paul explains how he go into podcasting and how it only takes him 30 minutes to prepare, record, edit and publish his weekly podcast. In my own experience with the Responsive Design Podcast it takes far more time to get everything done.

    Podcast Timings

    My timings for the RWD Podcast work more like this:

    • At least 30 minutes to wrap my head around notes and research as to what I’m going to speak about (longer if I have guests)
    • 30-60 minutes to record the podcast (longer if I have guests)
    • 25 minutes wrangling with Garageband to import the recordings, add the intro track and export to disk
    • 30 minutes to upload the podcast to Simplecast, the site (which pushes it to iTunes)
    • 10 minutes and $70 — 100 to transcribe the podcast
    • 25 minutes to upload the transcript and add pull quotes

    So all in all I was looking at between 2.5 and 3 hours each week to produce the podcast.

    I don’t think this is actually an unreasonable amount of time to dedicate towards podcasting though, after all if you’re writing an article that is going to take 20 minutes or an hour to read you’re going to spend more than 3 hours producing and editing the article.

    On the flip side no one is going to read an hours worth of article — but lots of people will be willing to listen to you for that same time.

    Podcast Costs

    I was initially very lucky to have a sponsor for the podcast at an above the industry standard (Paul suggests that industry standard is $15-25 per thousand listens) however once I started paying for the podcast transcriptions and the hosting I was only breaking even.

    This put me in the position that I was doing a whole bunch of work for no monetary reward, but then of course there are more things to life then doing it for the money. As long as I was breaking even it was still an enjoyable way to help spread the word about what was happening in the world or responsive web design.

    The costs outlined include

    So that’s pretty cheap really as long as you keep your podcasts to a reasonable length, but it can be expensive when you’re weekly podcast averaged 80 minues. The Simple Cast cost also includes hosting of a website for your podcast which is amazing at that price. I was originally with LibSyn however I much prefer Simple Casts UI and capabilities.

    Of course you don’t need transcriptions but I have a good friend who’s second language is English and he said that transcriptions in the past helped him be more confident with the English language and also made it easier to understand strange accents (like Australians).

    So if it’s cheap and easy-ish, why did you stop?

    Good question.

    When I started it was something that I could tack on to the end of my newsletter work on Thursday nights. That work rate took its toll over a time and it wasn’t something I could practically keep up on a weekly basis, or at least over a long period of time.

    Once it moved from a weekly thing to a some-what-bi-weekly-thing I was no longer being consistent and it then became something that was easy to “skip to next week”. One week turns to two months and here we are.

    The plan? Well it’s time to change it up. Rather than provide interviews with leading thinkers in responsive design it’ll be time to talk about all things web and focus on one or two key things each week to expand upon.

    I’ve been reporting on more topics outside the realms of responsive design in the weekly newsletters so now it only makes sense that it also extends to the RWD Podcast as well, after all Responsive Web Design these days is just Web Design.

  2. Responsive Performance

    Leave a Comment

    I’m setting up a new page over on the site looking for some guinea pigs lucky volunteers to start receiving reports and recommendations around their website performance across a variety of the devices and connections.

    Lately I’ve been doing a lot of reviews of site performance and most of the recommendations are being repeated across a variety of different sites. There are so many things that you can do today to shave off 20-50% of your webpage load time that it seems stupid not to do it.

    The idea behind the first few is to test the waters. I want to know if

    • Do the reports make sense?
    • Are you the recommendations easily achieveable
    • What are some of the barriers to get this done?
    • Do the metrics I’m checking link back to your business goals?
    • Can we track the return on investment for the work (although there’s no investment on your part to start with)

    The page should be up over the weekend and then I can start testing the work that I’ve already put together.

  3. Responsive Answers

    Leave a Comment

    The other day I came across a post from Paul Robert Lloyd answering some responsive questions for Net Magazine and I realised that I did the same thing last year, I should share my answers as well. These are from 13th November 2013….

    Aaron JL Hatton @Aaron_JL_Hatton
    @netmag @justinavery whats the best way to do responsive design, CSS or Javascript?

    CSS all the way.

    There are element of Javascript that you can bring to your responsive implementations, although they should be primarily used as a progressive enhancement.

    There are some great js plugins available to assist with your responsive designs including FitText, FitVids, Respond.js, picture fill, element queries, and grunticon to name just a few (and you can find all my favourites at responsive design javascript tools.

    Rachael Knight @Rach_Jenn
    @netmag @justinavery media queries- good or bad?or should we simply sort when we find something that breaks?

    Good? Better? Media Queries are the best, they are the special sauce that makes responsive design…. Responsive!

    Always remember the first media query is the lack of a media query, so build your site mobile first. The chances are that the devices that don’t support media queries will require a mobile first approach anyway. As you expand your viewport watch the content stretch, and then included a breakpoint when the content looks rubbish. Use something like Brad Frosts ISH to help you find those in-between breakpoints.

    E for Or @EforOr
    @netmag @justinavery Breakpoints. RWD shouldn’t cater for specific devices, but iPhone/iPad screen sizes as standard regardless of content?

    You should always let the content dictate your breakpoints. When something looks wrong, add a breakpoint and make it right again.

    Today the most popular widths are the iPhone 5 and iPad, but if you look back 12 months it was the iPhone 4s instead (different dimensions). Who knows what the next most popular screen is or when it will come out, so why try and guess the size and lock yourself into something that will change?

    At the end of the day you should focus on your traffic and find which users are accessing your site of what devices and base your decisions off that. We’ve even prepared an easy to use free google analytics dashboard to help you make that decision with your existing traffic.

  4. A new blog

    Leave a Comment

    After many many months without being to update this site I was finally able to set aside enough time to finish off the migration, moving from Squiz Matrix CMS across to WordPress.

    This is the second move of this blog. It was originally migrated from Blogspot across to Matrix back in 2007 and it served as a playground for me to test new web trends while ensuring that it could all be done within a CMS that I was working with on a day to day basis.

    The site changed over to a new design when responsive design first made it’s splash and I re-designed the site to be more responsive.

    Why the change?

    The main reason for this change is because the version of Matrix I was using was going to take too long to upgrade, and worse of all I needed an outdated version of Java to create any new content (which is why there was such a huge gap between posts).

    Matrix is a super powerful CMS that gives me the power to build a complex site, however this site has come full circle over the past few years to be back to a basic blog where I can publish my thoughts on a variety of topics (mostly the web these days).

    It was moved to WordPress because I have become just a familiar with it as a CMS over the past few years and run several other sites off WordPress. It’s a great tool if you’re requirements aren’t too robust.

    Has anything been lost in the changes?

    Fortunately not.

    In this process I’ve migrated all of the posts from the previous Surf the Dream Matrix site across to an existing WordPress site I had been running for Javery Design. Once that was done I updated all of the Javery Design URL’s to become and set up a series of 301 redirects to hopefully catch any old site links and google indexes.

    What changes are likely next?

    I’m not entirely happy with the look of the site or the layout of the homepage. I prefer the header in this one but there are some issues with the Archive pages and the Search listings which need to be fixed up.

    The footer needs some work as well, I need to put a link to my other side projects – Am I Responsive, RWD Weekly Newsletter and

    I’m happy with things now though, and it means that I’m able to get back into the swing of writing more often.

  5. Infinite Soul Healing

    Leave a Comment

    Infinite soul healing was a site built for a sole trader small business with a very limited budget.

    The client was looking for something light and simple, and above all a website that was easy for them to maintain and create new content. Due to the limited budget the on going hosting costs would have meant that we would we not be able to build the site responsively, and due to the very tight timeframe for the project we decided that a cloud hosted solution was the preferred approach.

    Squarespace 6

    We decided to use Square Space as the CMS for the project. This is the second time that we’ve used the product and we’re very happy with the feature set and the ability to get the client up and running quickly.

    Click below to try out Square Space for yourself.


    The client was keen to show off their studio so we made it the cover background and feature image. The colours we’re chosen from the colour palate which had been part of their print and sign branding.

    Infinite Soul Healing Services Page

    On the smaller screens (pad and smart phone) the background image is removed on the inner pages to ensure the content is the main focus, while it still remains a central part of the home page look.


  6. jResize Plugin, for one window responsive development : Todd Motto: Front-End Web Developer

    Leave a Comment

    jResize is a responsive web development tool, built in jQuery to assist the workflow of developers on responsive projects. There are various tools for responsive development, iframes at different widths embedded in the page, and the tedious resizing of the browser. So here’s a different approach which grabs all your HTML, and resizes it inside the browser when you click the width you want. It’s dead simple.

    Visit Link

  7. Responsive Design Weekly goes crazy!


    As I arrived to work on Tuesday morning my phone lit up with a twitter mention. It was Chris Coyier mentioning the Responsive Web Design newletter that I prepare and send out every Friday.

    At that point I fired up Google Analytics and began to watch the show.

    Chris’s tweet caused the concurrent visitors to go from the usual 1 or 2 up to 150 concurrent users. The comparison between the visitors on that day and any other day makes it look like the analytics were not running at all.

    Lets take a look at the numbers

    If I take the last three days since the tweet and plot it against the same period the week before you see the remarkable increase.

    • Visits have increased by 3566.45%
    • Unique Visitors increased by 3811.02%
    • Pageviews increased by 4873.95%
    • Page visits increased by 35.66%
    • Average visit duration increased by 192.85%
    • Bounce rate decreased by 3692%
    • New visitors increased by 30.20%

    Google Analytics 3 day comparison

    It wasn’t just the visits to the website that went crazy either. The newsletter has been running for 6 months as of tomorrow and in that time I’ve been very lucky to get the subscription rate from 11 for the first week up to 1170 subscribers as of Issue #25. With a single tweet and a link on the CSS Tricks home page that number increased to 2448 subscribers at the time I write this post.

    How lucky was that!

    Now I don’t want to make it seem as though Chris stumbled across the site and listed the himself. I approached Chris directly as part of the Kick Starter rewards to check out the site. I asked that if he liked what I was doing and liked the newsletter content to then feel free to “big it up” (my exact words… big it up).

    So all I need is one tweet?

    Sure, one tweet from someone with 52,000 followers is going to help out…. a LOT. Having said that they really need a reason to post about you in the first place. You shouldn’t expect someone to promote what you’re doing unless they can see some worth for their followers or really dig what you’re doing.

    In the lead up to asking for the “big up” the following had already been done…

    1. The newsletter had been running every week for 25 weeks.
    2. The readership had steadily grown over 25 weeks
    3. Other well known web people in the industry were subscribed and retweeting

    To get the newsletter to that point I have spent 93hs 56m between the hours of 17:30 Thursday afternoon and 03:00 Friday mornings preparing the newsletters. If I were to bill that for a client that equates to $11,340. Within those hours I haven’t taken into consideration the reading and capturing of articles that occur during the week, work on the templates/code, maintaining the server and all the other bits that go into running things on the web.

    Is it worth it?

    The first thing that anyone asks after explaining that is “So how much do you make out of it” shortly followed by “Nothing? Then why do you do it?”.

    There are two reasons behind doing this newsletter. First and foremost is that I love to do it. I’m eager to spend my time reading and researching about responsive design because it is hands down the default way you should be building most websites these days. The more I learn about it the better resource I am for existing clients. The second reason is how I justify the time I spend to my partner. My theory is that if I have two people pitching for a job and one of them has done something like this they’re more likely to get the job.

    So again another…

    … big thank you to Chris for the tweet that pushed things along in an aweful hurry, thanks to the 1250ish people that subscribed to the newsletter in the past 3 days, but most of all thank you to the 1100ish people that continued to join and become a part of the weekly newsletter over the past 26 weeks.

Surf the Dream is a blog that has been running since the mid 2000's when it started on BlogSpot. Over the years it's been rebranded as (now my resume) and (which now redirects back to this site).

I offer consultation services through Simple Things, produce a range of high quality pocket notebooks(including a Solar System Notebook, Space Notebook, and a Guitar Notebook), write about the Universe and run a responsive web design knowledge hub and a RWD Weekly Newsletter.