This is a link (“”The single responsibility principle applied to CSS — CSS Wizardry—CSS, Web Standards, Typography, and Grids by Harry Roberts“”) I’ve deemed interesting, inspiring or useful for others.

Bookmarked on May 02, 2012 at 12:43PM using Delicious and published to this blog with the fantastic ifttt.com.

Visit the bookmarked site: The single responsibility principle applied to CSS — CSS Wizardry—CSS, Web Standards, Typography, and Grids by Harry Roberts

This is a link (“”Style Guide“”) I’ve deemed interesting, inspiring or useful for others.

Bookmarked on March 23, 2012 at 11:11AM using Delicious and published to this blog with the fantastic ifttt.com.

Visit the bookmarked site: Style Guide

This is a link (“”Pears“”) I’ve deemed interesting, inspiring or useful for others.

Bookmarked on March 22, 2012 at 09:18PM using Delicious and published to this blog with the fantastic ifttt.com.

Visit the bookmarked site: Pears

I’ve been using this technique for some time now, but thought I’d share in light of Adobe’s Shadow coming out. Shadow looks fantastic and promises a lot, but at the time of writing it doesn’t support localhost testing, so (at least with my workflow) it’s not nearly as useful as it could be.

To test websites across multiple devices before launching, I do the following:

1. On your Mac, retrieve your web sharing IP address by going to System Preferences > Sharing > Web Sharing. (Look for ‘Your computer’s website is available at this address’). Copy it to your clipboard.
2. In your PC, iDevice (iPhone, iPad, etc) or other device, add your Web Sharing address plus :8888 (i.e. 192.168.33.5:8888). If working properly, you should now see a directory of your sites.
3. In your code editor on your Mac, go to your site’s wp-config WordPress file and paste the Web Sharing address like the example below. Add the code just under define('WP_DEBUG', false);

/***************************************************************************************
		REMOVE THIS BEFORE GO LIVE
************************************************************************************** */
define('WP_HOME','http://192.168.XX.XXX:8888/SITENAME');
define('WP_SITEURL','http://192.168.XX.XXX:8888/SITENAME');

/***************************************************************************************/

This will change the root path of your entire (local) WP site to your web sharing address.

Test away

To test your website, simply enter the Web Sharing address of your local site into any device you wish to test on. The site should render fine on all localhost:8888 devices, as long as you’re over the same local wifi or LAN connection, allowing you to test and refine in real-time to ensure your design functions/looks/acts as it should on your target device.

PS: Always remember to remove or comment out the above lines from your wp-config file before going live.

Update

I can personally attest to the wonderfulness of using CSS Refresh (http://cssrefresh.frebsite.nl/) along with this method. Instant, real-time CSS updates across multiple devices FTW!

This is a link (“”Fashionably flexible responsive web design (full day workshop) // Speaker Deck“”) I’ve deemed interesting, inspiring or useful for others.

Bookmarked on March 09, 2012 at 10:04AM using Delicious and published to this blog with the fantastic ifttt.com.

Visit the bookmarked site: Fashionably flexible responsive web design (full day workshop) // Speaker Deck

This is a link (“”LukeW | Which One: Responsive Design, Device Experiences, or RESS?“”) I’ve deemed interesting, inspiring or useful for others.

Bookmarked on February 29, 2012 at 07:40AM using Delicious and published to this blog with the fantastic ifttt.com.

Visit the bookmarked site: LukeW | Which One: Responsive Design, Device Experiences, or RESS?

This is a link (“”Mobile Web Resources | Mobile Web Best Practices“”) I’ve deemed interesting, inspiring or useful for others.

Bookmarked on February 26, 2012 at 08:15PM using Delicious and published to this blog with the fantastic ifttt.com.

Visit the bookmarked site: Mobile Web Resources | Mobile Web Best Practices

This is a link (“”(Now Responsive) Starbucks Coffee Company“”) I’ve deemed interesting, inspiring or useful for others.

Bookmarked on February 23, 2012 at 05:55PM using Delicious and published to this blog with the fantastic ifttt.com.

Visit the bookmarked site: (Now Responsive) Starbucks Coffee Company

This is a link (“”What Your Product’s Design Says About You – FINCH“”) I’ve deemed interesting, inspiring or useful for others.

Bookmarked on February 21, 2012 at 08:46PM using Delicious and published to this blog with the fantastic ifttt.com.

Visit the bookmarked site: What Your Product’s Design Says About You – FINCH

This is a link (“”Design is Marketing“”) I’ve deemed interesting, inspiring or useful for others.

Bookmarked on February 19, 2012 at 12:34PM using Delicious and published to this blog with the fantastic ifttt.com.

Visit the bookmarked site: Design is Marketing