Advertisement

Adaptive Blog Theme: Breakpoints

by

This Cyber Monday Tuts+ courses will be reduced to just $3 (usually $15). Don't miss out.

This post is part of a series called Adaptive Blog Theme: From Photoshop to WordPress.
Adaptive Blog Theme: Single Post Details
Adaptive Blog Theme: Session Complete!

At this point in our theme development it's time to look at the adaptive nature of the layout. We're going to examine our breakpoints, tidy up the layout in its various states, deal with the navigation and any images we encounter. Notably, this is the last of the screencasts before we dive into WordPress theming!


Note: When I refer to the word responsive, I often really mean adaptive (sorry, force of habit!) Responsive layouts involve fluid dimensions; ours offers a series of fixed-width layouts for screens wider than 767px, making it technically adaptive.


First Look at the Breakpoints


Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

The Last of the Breakpoints


Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

Adaptive Images


Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube
Advertisement