Posts Tagged “Responsive”

Atomic Classification

I think of modular design as a practice or a philosophy—with Atomic Design being just one way to do it. I’ve found that I’m able to benefit from Atomic Design concepts without always adopting its classification metaphor. A... read more

ShareYourShop.Etsy.com

Paravel was thrilled to collaborate with Etsy and to create shareyourshop.etsy.com—a fun little photo-generating web app that Etsy shop owners can use in their holiday promotions. Etsy provided overall guidance as well as some stellar graphics... read more

Stephen Hay On Prototypes

The cyclical “should designers code” debate wears me out, but Stephen Hay’s post is a great read in and of itself. I like that he gravitates towards the value of prototyping: As designers for the web,[…]... read more

BreakpointTester

I’m loving BreakpointTester. It’s a bookmarklet that scans your CSS/breakpoints and displays them all at once. It shows not images, but actual web pages you can scroll, navigate, and even web inspect. Brilliant! read more

WRKSHOP

I’ll be leading a workshop (for WRKSHOP) on responsive layouts & prototypes in Austin this April 4th. I didn’t feel confident as a web designer until I got comfortable with CSS layouts, so that’s exactly what... read more

M-Dot or RWD

M Dot or RWD. Which is Faster? outlines some great research conducted by Doug Sillars on whether m-dot or responsive sites are faster. Redirects slow m-dot sites from the very start while those sites might turn... read more

CSS Zen Garden #221

There’s a lot to love about Andrew Lohman’s CSS Zen Garden #221 theme, Mid-Century Modern. In addition to the type, color palette, and imagery, I am particularly fond of the layout itself. Each section flows nicely... read more

Device-Agnostic

The more I build for the web, the more the term ‘device-agnostic’ endears itself to me. I used to think it merely dealt with basing responsive breakpoints on content rather than particular devices, but there’s more... read more

Responsive Maps

Most embeddable maps are touch friendly in that you can swipe/scroll to reposition the map within their frame. This is great, but users can get stuck if the embedded map happens to fill a viewport at... read more

Reorganization

Process is often shaped by how teams are organized. In the context of designing for the multi-device web, the high level of iteration and communication required to build a modern website is rendering the assembly line... read more

Type & Touch

As a general rule I gravitate towards larger type not only for relative readability, but also to help with touch targets. Yesterday, Matt Griffin from Bearded posted on the desire to, at times, use a base... read more

SXSW 2013

I’m looking forward to SXSW Interactive 2013, which kicks off this Friday, March 8th. This year there are 2 things I’m particularly excited about. The first is the Dribbble meetup on Saturday, March 9th at 8pm... read more

The Mobile Book

It’s been an honor to contribute a chapter to Smashing Magazine’s The Mobile Book. I had the lead-off position in a series of chapters about responsive web design that was brilliantly followed up by Brad Frost... read more

Where to Start

When making the transition to building responsive websites, the hardest part can be getting started. I get my fair share of questions about how to choose a direction and chart out the first few steps from... read more

Beyond Device Testing

I had always looked at device testing as a straightforward pass/fail endeavor where websites either look and behave as expected or not. I would interact with whichever device—smartphone, tablet, or in-between—only for as long as it... read more

Flexible Foundations

Responsive or not, there’s no reason why we shouldn’t all be designing and building sites on flexible foundations. This concept is nothing new, having been prophetically outlined in Jon Allsopp’s 2000 article, A Dao of Web... read more

Site Updates

I finally updated the site with a handful of changes I’ve been fiddling with over the past few months. It’s one of those complete overhauls that really don’t look much different at a glance, but it... read more

Texas State Lecture

On Wednesday, November 7 at 7:00pm Dave, Reagan, and I will be speaking at Texas State University. We’ll be chatting about Paravel‘s history (embarrassing screenshots guaranteed) as well as our current work with responsive web design.... read more

A New Microsoft.com

This week Microsoft began rolling out its new responsive homepage—one that Paravel helped design & build. Earlier this year Nishant Kothary and I were having lunch at SXSW when he asked if Paravel would be interested... read more

BuildWindows.com

Earlier this week the responsive website for Microsoft’s 2012 Build Conference went live. Happily, our favorite honey badger, Nishant Kothary, enlisted Paravel to assist with design and the front-end responsive code. Check it out! When someone... read more

Fluid Type

Embracing the fluid & flexible aspect of responsive web design was an easy decision, but I’ve been less sure-footed when it comes to balancing that with setting type on the web. From a purely typographic perspective,... read more

A New Typofonderie.com

Today, Paravel launched the new responsive website for Typofonderie. We had a great time with the challenges that arose from building a font-selling, ecommerce-driven, responsive web site. We took extra care to scale things like category... read more

CSS Column Breaks

I’ve been working on a responsive project with lots of content that will need to be updated frequently. Rather than using a more traditional HTML & CSS column/grid approach, I opted for column-count to keep everything... read more

#SB46

When you’re enjoying the Super Bowl this weekend, be sure to check out sb46.twitter.com. Last month, Paravel had the privilege of working with Twitter and Mass Relevance to build the responsive site. You can track TPM... read more

Redefined

To design responsive websites effectively and responsibly, I had to completely redefine the way I view the web. It pains me to admit it, but I wasn’t too keen on responsive web design right out of... read more

New Adventures Workshop

The time for New Adventures is nearly upon us! I’ve been building slides for my talk as well as prepping materials for my workshop on controlling web typography. The plan is to spend some time exploring... read more

Embedded Tweets

Yesterday must have been an exciting day at the Twitter offices. They released lots of new stuff, including a way to embed tweets. I thought I’d test it out in a responsive setting, and it works... read more

On Font-Size

I’ve noticed that just about every year or so I favor larger type for body / paragraph text. A while back I moved from 16px (100%) to 18px (112.5%) and today I decided to increase that... read more

A Responsive Ad Model

Mark Boulton on the challenges we face when incorporating traditional ad spaces into responsive layouts: The template > slot > ad mental model is engrained both in advertisers, planners and web sites. Providing space for ads needs... read more

Netmag: Texturizing Web Type

I recently wrote a tutorial on texturizing web type for .Net magazine (Issue 221). One of my favorite CSS properties for text, mask-image, is covered in-depth from creating a semi-transparent texture in Photoshop to implementing it... read more

CSS Off

Gene Crawford from UnmatchedStyle asked Paravel to design a page for this year’s CSS Off competition. Over 5,000 front-end developers have entered to show off their skills by taking a PSD we designed and coding it... read more

CSS Hyphenation

After reading this Fontdeck Blog post a few of weeks ago, I dropped an exciting new CSS property into the stylesheet for this blog. Wanting to test hyphenation on all my posts and pages, I applied... read more

Content Choreography

The concept of permanently placing content on a web page for a single browsing width or resolution is becoming a thing of the past. Media-queried responsive & adaptive sites afford us the ability to re-architect content... read more

Fit To Scale

My site is now responsive. The more I work with flexible images & grids and media queries, the more I appreciate what can be achieved. Any apprehension I may have had about whether or not a... read more