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

Tag Archive: Responsive Web Design

  1. 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.



    Design

    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.

    Specifics

  2. Disable preloading on HTML5 Videos

    1 Comment

    We’re currently building a small mobile web application for a client and they want to run videos for desktop and pad versions of the site, however they have chosen to leave this off the mobile versions.

    The site is being built responsively, which means that the same code/content will be used for every device and everything will be served on the same URL.

    Hiding content from a mobile device is something which I recommend against because you are making an assumption that the mobile user is not able or does not want to watch/view the content because they’re on a mobile device. With mobile devices being used on the bus, on the couch and out and about it is difficult to say when it is suitable to show/hide certain content. If you are considering doing something like this I would urge you to question whether or not the content is suitable at all (i.e. there is no mobile context).

    What I believe vs what the client wants

    Obviously two different things and for better or worse the video is going to be hidden.

    Unfortunately a lot of the current browsers do a lot of prefetching of resources. This means that images and video that are set to display: none; will still be downloaded and therefore a burden to the “mobile user”.

    So how do we provide a suitable experience for both types of users without discriminating against either one.

    preload

    The preload attribute informs the browser whether or not the video data should begin downloading as soon as the video tag is loaded. It gets even better than that, you can chose how much preloading is done with the options auto, metadata, and none.

    • ‘auto’: Start loading the video immediately (if the browser agrees). Some mobile devices like iPhones and iPads will not preload the video in order to protect their users’ bandwidth. This is why the value is called ‘auto’ and not something more final like ‘true’.
    • ‘metadata’: Load only the meta data of the video, which includes information like the duration and dimensions of the video.
    • ‘none’: Don’t preload any of the video data. This will wait until the user clicks play to begin downloading.

    In this case I’ve gone with loading the metadata of the video, small enough not to worry the mobile devices but enough to provide the larger devices more information about the content.

    <video preload="metadata" ....>

  3. Responsive Design Podcast in the UK

    Leave a Comment

    Today has been a very long day thanks to a rather strange series of events.

    For those of you that aren’t aware I’ve been curating a responsive design weekly newsletter for the past 15 weeks and I’ve proudly watched the subscriber rate start at a meare 11 and grow more than 800 (as of today).

    In that time I’ve been very lucky to have the support of a couple of known rwd celebrities. YAY for them.

    Two weeks ago I received an email from the British Tech Network who were looking for a guest speaker for a podcast on Responsive Design and someone suggested they get in touch with the curator of RWD Weekly. It turns out that while in London I worked with the organiser of the podcast and from there on it was all roses and raspberry cakes.

    Five of us joined on a skype call at 8pm London/0430am Darwin time and talked about all things responsive design.

    I’m keen to hear how my tired Australian accent came across with English and Scottish discussion members…. and I hope I didn’t sound too bad (or say anything stupid really).

  4. Should You Keep Ideas To Yourself? by ZURB

    Leave a Comment

    If you don’t know who Zurb is then I highly recommend that you head over to their website and check out the Foundation 3.0.

    Today they posted about sharing ideas…

    Ah, the age-old question: Should you keep ideas to yourself? It’s one that many of us have grappled with at least once in our lives, so why don’t we bring it to the forefront and have an honest discussion about it?

    Matthias Wagner wrote a post on this very topic – and while he brings up a lot of great points, we’re pretty sure that you have your own approach to sharing ideas.

    His take:

    The more you talk about an idea the less exciting it will become to yourself, because people will tell you how great it is and that will give you appreciation for something you haven’t even done yet’ and why do it if you already got all the kudos!?! If you start talking about your idea to others they will start giving you feedback’ and no matter how great the others are, the result is that your idea will average out’ you loose the pureness and rawness. Your arrow suddenly becomes a circle!

    I’ve had an idea for a while now and I’ve been working on it off and on for a few months. From this article I’m going to give it one week on prototype work and then release to the world under an alpha release to get some feedback.

    Will someone steal the idea and do it better? Well I’m hoping they won’t be able to provide anything better than what is there and if they do then I’m going to learn something new myself. Win win.

    Below are a couple of images that I’ve sketched out that will be going into the new mystery project.

    20120712-160304.jpg

    20120712-160321.jpg

  5. Stop Mobile Safari from Zooming when rotating device

    Leave a Comment

    When ever you are testing responsive design sites across multiple devices you need rotate the device. Sometimes doing this means that you’re layout/design is zoomed in more than the normal size.

    To get around this just include the following in the head.

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    simple….

  6. SEO and Mobile vs Responsive Web Design

    Leave a Comment

    At the moment I’m monitoring mentions about “Responsive Web Design” on google alerts to continue to post the relevant content on Responsive Web Designs and compile it for a new website I’m building that contains a series of resources on #RWD.

    This morning I came across this article, For Mobile SEO Ask “What Do Mobile Searchers Need?”, and couldn’t help but post a comment.

    An interesting article with some good points, however you don’t seem to have looked into every aspect of the problem.

    First off, I agree that ideally an adaptive approach is best for anyone with an online presence. By adaptive I mean you have both mobile and responsive sites for the potential customer to access.

    Unfortunately sometimes maintaing multiple sites with multiple content is difficult. I’ve worked for some very good CMS providers that allow content to be shared between the full and mobile dedicated sites, however it is still a reasonably large overhead for website owners to steer down only one path.

    Of course if you’re in the top 100 forbes companies then sure go for it, but for the smaller businesses it is sometimes just out of their reach.

    Having said that you’re article seems to focus largely on the use of mobile with search, however you don’t cover the context of the mobile search. Were they on the bus, in the car, sitting on the couch, lying in bed, passing time on the toilet? Each location offers a different context as to the type of content that the user is looking to get.

    It’s not enough to just direct mobile users to a cut down version of the site. Doing this is punishing users for using mobile devices.

    As I mentioned above ideally you have two sites running, your full website and a cut down, fast loading, transaction focussed mobile site that contains the option to return to your full website (and remember the selection). And what happens when they arrive on the full website? That’s right, it responds to the best possible layout for the canvas that it is being viewed on.

    A question for you:

    At the end of the day is it better to have a site with great onsite SEO, or is it better to have a site that gets tonnes of linkbacks because it provides an awesome experience?

    There is a lot of thought that needs to go into your online strategy, especially when it comes to implementing a growing trend of web design and layouts.

    If you’re thinking about updating your website design, or looking to make your existing design responsive then get in touch and we can work out the best possible solution for your online presence.

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 justinavery.me (now my resume) and JaveryDesign.com (which now redirects back to this site).

I offer consultation services through Simple Things, produce a range of educational pocket notebooks, write about the Universe and run a responsive design and a RWD Weekly Newsletter