Advertisement

Responsive Web Design

  • CSS
    Instant Fluid Videos with Viewport Width UnitsRatio
    123 shares
    Intrinsic ratios are an approach to expanding and contracting elements on a web page, allowing them to be fluid whilst at the same time constraining their proportions. Thierry Koblentz first proposed the idea back in 2009.Read More…
  • Sass
    Simplify Your Media Queries with Sass “Breakpoint”Breakpoint
    318 shares
    In this tutorial you will learn how to simplify the way you write and maintain media queries in Sass. To help us, we’ll be using a mixin library called Breakpoint. In order to follow along, feel free to grab the starter files from GitHub.Read More…
  • Jeet
    New Course: Building Easy Responsive Layouts With JeetJeet
    70 shares
    Ready to create clean, beautiful websites using a grid system favoured by some of the world’s biggest sites? In our new course, Cory Simmons, the creator and maintainer of Jeet, will show you how powerful and easy-to-use Jeet can be.Read More…
  • Shopify
    How They Did It: Shopify - It’s All About the DetailsPreview
    143 shares
    If you haven't ever heard of Shopify before, perhaps you have taken up residence under a rock. Shopify is one of the most popular services for creating e-commerce solutions online, and they've recently redesigned their front-facing site. Today, we're going to take a look at some of the finer details of the redesign, and talk a bit about how the redesign was achieved. Let's dive in!Read More…
  • Responsive Web Design
    How to Build an Off-Canvas Navigation Layout With BootstrapOff canvas
    485 shares
    In this tutorial, I'll show you how to add an off-canvas navigation to Bootstrap with an extension called Jasny Bootstrap by Arnold Daniels.Read More…
  • Sass
    A Simple Responsive Grid, Made Even Better With SassGrid preview
    408 shares
    In this tutorial we're going to build a simple, responsive grid system using CSS. Once we're familiar with how it works, we'll improve it with Sass, learning some core Sass features along the way.Read More…
  • Foundation
    How to Build a Shrinking Fixed Top Bar With FoundationFoundation bar
    158 shares
    A very common trend these days is the use of a fixed navigation, which shrinks to become less intrusive as the user scrolls down the page. In this tutorial, I'm going to show you how you can achieve this by using ZURBs Foundation Top Bar, some custom sass and jQuery. To top it off we'll add a couple of media queries to make our menu responsive. Let's get started!Read More…
  • Responsive Web Design
    Quick Tip: How to Use HTML5 “picture” for Responsive ImagesPreview picture
    864 shares
    Images are notoriously one of the most challenging aspects of responsive web design. Today we'll look at how the element, a solution to the problem of responsive images, can be used right now.Read More…
  • Responsive Web Design
    Building the Responsive Timeline Portfolio PagePortfolio thumb
    314 shares
    During this tutorial we will be building the fantastic Timeline Portfolio as seen in an earlier tutorial by Tomas Laurinavicius. We will be using some responsive techniques as well as CSS3 animations, Sass and a little bit of jQuery.Read More…
  • Foundation
    Build a Top Bar Off-Canvas Navigation With Foundation 5Foundation menu
    179 shares
    Today, we are going to combine ZURB's Foundation 5 Off-Canvas feature with our top bar navigation. The result will be a nice custom navigation for desktop users and a sleek off -canvas menu for tablet and mobile users. Read More…
  • Responsive Web Design
    Quick Tip: Spare a Thought for Vertical Break PointsVertical retina
    184 shares
    I've seen this happen a few times recently, usually on websites with fixed navigation running down the left hand side. They'll have lovely, fluid layouts, which stretch out on wide screens and stack up on smaller devices, but they'll still fall foul of a sneaky break point few people think about. I'm taking about viewport height.Read More…
  • Email Design
    Creating a Simple Responsive HTML EmailEmail new rwd thumb
    232 shares
    In this tutorial I will show you how to create a simple responsive HTML email which will work in every email client, including all the new smartphone mail clients and apps. It uses minimal media queries and a fluid width approach to ensure maximum compatibility.Read More…
Advertisement
Suggested Tuts+ Course
Designing for Mobile eCommerce$15
Advertisement