UI Designer, CSS3 and PHP John Holt

Atlanta, Georgia, United States

Yearly Stats: $0 Earned |

Responosive Web Design

I did this example for the Morrison Agency in Atlanta, creating break points for Good2Grow.com

Break points in RWD are browser widths that have a media query declaration to change the layout once the browser is within the declared range. Here I have the page changing from its base 960px layout once it is being viewed at 768px.

On average, every responsive site will have a minimum of two break points. These being for tablets and mobile devices. Unlike the desktop, tablet and mobile are based on the screen sizes of the iPhone and iPad because they are the most popular devices in both mobile and tablet devices. Whether or not this is a best practice is a conversation for later.

There has been some discussion lately about the term “breakpoints.” Mark Boulton and Ben Callahan think we should call them “optimization points,” and Jeremy Keith distinguishes between breakpoints and “tweakpoints.” In this article, I’ve been focusing on breakpoints — i.e. major changes in the layout when the content asks for more or less space. And now I introduce yet another term: break ranges.

I’ll start with the small screen. One theory of Oliver Reichenstein, a theory I really like, is that font size doesn’t depend on screen size; it depends on the distance between our eyes and the device we’re using. We tend to hold our phones closer to our head than our laptops, so this might warrant smaller fonts.

Sometimes, a single column is enough. Content-focused websites, such as blogs, could very well do with a one-column layout. But multiple columns on big screens are actually a good idea in many situations. You might want to show some navigation, or perhaps you’ve found some widgets that actually make sense. You could very well choose to show these next to the main content.

$15 / Hour
$25 minimum budget