Responsive CSS Tricks

Here are a few useful css tricks to remember when building responsive design sites from web designer wall

Embedded Link

5 Useful CSS Tricks for Responsive Design
Making the design to be responsive is very easy as shown in my Responsive Design in 3 Steps tutorial, but maintaining the elements to look aesthetically balanced on all breakpoint layouts is an art. T…

Posted in blog | Tagged , , | Leave a comment

Picture element of srcset attribute?

Bruce details the reasons and story behind the srcset attribute which is now introduced as an alternative to the picture element. Some aspects of the attribute are nice (like the fact that it's an attribute and not a new element, so it's creating up new elements with for problems. It's adapting currently used elements to be more future-friendly), but some aspects are weird – like the totally foreign syntax (where did that come from?). There is also some worry that the elements that are proposed and introduced by the community get nowhere, but then a when someone at apple makes a proposal it gets new immediate support from the group. Anyways, either way I think one of these solutions (or a variant) should help alleviate much of the pain behind responsive images. At least the discussion is happening, no?

Embedded Link

HTML5 adaptive images: end of round one | HTML5 Doctor
Those web authors in the W3C Resposive Images Community Group soldiered on in frustration that they were they being ignored because the problem itself wasn't seen as a problem. Then this week, Edw…

Posted in blog | Tagged , , , | Leave a comment

SVG Preloader with Raphael JS

Here's a very creative use of using a newly available technology. Using svg graphics which are very lightweight, for a website preloader. I like the animation used as well.

Embedded Link

Make a stylish preloader with SVG | Tutorial | .net magazine
Many sites neglect users with slow connections. Ian Culshaw explains how to use SVG library Raphaël to create a preloader that’ll hold the users' attention while pages load

Posted in blog | Tagged , , , , | Leave a comment

CSS3 Button/Icon set

I've been secretly hoping to see a few of these pop up once the whole icon font idea spread through the nets. I really like this idea and it's a very nice implementation too! I only see some quality issues on a couple of the icons (such as youtube), but it's awesome and I hope to see it in use for the sake of consistency!

Embedded Link

Zocial Button Set: 72 CSS3 Buttons
The idea behind this project was to produce a consistent set of buttons that could be used for the range of social actions frequently taken in Web applications. These actions are often important goals for users, such as connecting third-party accounts or sharing content to third-party platforms, so their appearance has to be attractive and clear.
The standard buttons provided by third parties (such as Facebook, Twitter and SoundCloud) vary in size, style and interactivity. A consistent button…

Posted in blog | Tagged , , , | Leave a comment

Abstract visuals from satellites amaze me

Abstract visuals from satellites amaze me

Embedded Link

Crop Circles in the Desert : Image of the Day
Over the course of 25 years, farms have sprouted in the Arabian Desert, fueled by deep and old groundwater.

Posted in blog | Tagged , , , | Leave a comment

Lego: Imagine

Have a look to see if you can guess which popular characters have been immortalised into minimalist Lego.

Embedded Link

Firedog creative agency | Imagine a world made of Lego | The Firedog Blog and Thinking space – A creative london agency
Just stumbled across this lovely print campaign for Lego by German ad agency Jung von Matt. The campaign is called Imagine and its clear to see why, it's a

Posted in blog | Tagged , , | Leave a comment

SCSS Use case for functions and variables

Erskine Design shows a very nice use case for using SCSS and calculating properties with functions and variables.

Embedded Link

Calculating EMs with SCSS | Erskine Labs
A blog by the folks at Erskine Design

Posted in blog | Tagged , , , | Leave a comment

Application Cache Gotchas

A great writeup from Jake Archibald about the downfalls and downfalls to Application Cache. Having just attempted to building a mobile site using application cache, I remember hitting almost all of these gotchas and realizing that Application Cache wasn't all it made itself to seem. I resorted to actually making a mobile app rather than deal with the manifest file and it's counter-intuitive caching. This article would have helped immensely and I can't tell you how entertaining it is to read anything by Jake.

Embedded Link

A List Apart: Articles: Application Cache is a Douchebag
Good morning! Over in “castle Lanyrd” we recently launched our mobile site, which caches data on events you're attending for viewing offline. I've boiled the offline bits down to a simple demo…

Posted in blog | Tagged , , , , , | Leave a comment

QueryPosts WordPress reference database

QueryPosts WordPress reference database

Embedded Link

QueryPosts.com: A New Resource for WordPress Developers
If you spend any time coding plugins or themes for WordPress, you know the value of a good reference for WordPress API functions. That's why you should go take a look at QueryPosts right now, and book…

Posted in blog | Tagged , , , , | Leave a comment

Google Maps Game Cube

Here's a very cool interactive google maps game called Cube. You move a ball by tilting the cube to get to a certain destination and avoid obstacles. Much like that labrynth game with a marble in a wooden box. Very nice 3D animations and fast performance. The eye in london actually rotates like a feris wheel! It integrates features of google maps to show off bike lanes, subways and traffic!

Embedded Link

Cube – A game about Google Maps
Play your way through a cubic Google Maps world. Travel through New York, Tokyo and many other cities and learn all about the great features of Google Maps.

Posted in blog | Tagged , | Leave a comment
  • Recent Posts

    Touch Specific Media Queries in CSS4

    Proposals in the works for new media queries specific to touch enabled devices. Examples include pointer, which will differentiate wether the device has a fine or coarse pointer (finger vs mouse) and hover, which would say if the device supports hover states. I can see this being helpful and useful for building mobile friendly sites [...]

    Responsive Image Dispute and Tourists – Analogy

    Jason explains the root of the problem and why no one has been able to devise a solution that makes everyone happy yet. The browsers (in their awesome drive to make browsing faster) are prefetching images and developers want to only use one image based on criteria the browser doesn't know until the layout is [...]

    Google Moog Keyboard Synthesizer Detailed

    This post on creativejs picks apart how this doodlue was made. Nice they they are able to support HTML5 audio even if it is only supported on chrome and the rest fall back to – you guessed it – flash. Embedded Link Google Moog synth tear-down Yesterday we featured Google's web-based analogue synth Moog tribute [...]

    Synth Emulator on Google Japan Doodle Today

    Synth Emulator on Google Japan Doodle Today Embedded Link Moog 自分のオリジナル曲を創って、 #moogdoodle で共有しよう。

    WordPress updates plugin directory

    New additions to the plugin directory include: favorites, incorporating support forums into it's own tab for each plugin as well as support stats being displayed! Great! I think we also need the ability to give plugins ratings and reviews (bonus points if it can be done from within a wordpress admin dashboard when installing plugins). [...]

    Short Head

    Use zipf's short head to tune your website rather than redesign the whole thing. To make a website successful it needs to meet the needs of the users. Find out what those needs are by using the short head philosophy to equate most searched things as the biggest needs of the users. Use personas to [...]

    Img Set?

    Great article at a list apart discusing the state of the industry regarding responsive images. This picks apart the set attribute of the img element from a surprisingly objective view coming from someone so close to the picture element. Insightful discussion about the principle behind the proposals than the actual solution too. If the working [...]

    Triudo

    A mesmerizing animated triangle-ish shape form. Embedded Link triduo triduo

    Git – the paradigm shift

    A great developer story about the differences on what Git is vs other version control and what Git is not. This is how we should learn it. I heard over and over that it was distributed, but never grasped what that meant, so here are a few links and explanations that will help unlearn version [...]

    Tweening Lib comes to Javascript!

    I'm very excited to share the news that the tween library from GreenSock (hands down the best tweening library I used in flash) is not ported for use in javascript! This will be great! I missed that simple syntax from as3 when animating javascript, and now I can have my cake and eat it too. [...]

  • Recent Comments

    Bruce Brownlee

    Bruce Brownlee

    Ah IE6. I'd have 2 more years of sleep without IE6. Margin doubling, no properties,...
    versaena

    versaena

    how to give color at runtime…… thank you
    Mobile Websites

    Mobile Websites

    I disagree, mobile websites are the future – desktop websites and mobile websites...
    Matt Fasick

    Matt Fasick

    That's cool. I like the ripple effect as well.
    Nico

    Nico

    hi! really great job guy! very impressive.. just a question… do u have a solution to do a refresh...
    Evan Mullins

    Evan Mullins

    Agreed! I've just seen some people get pretty heated about separating all functionality...