Learn Responsive Design

Learn how to create responsive designs that adapt to different screen sizes and devices, providing a seamless user experience across all platforms.

All Responsive Design content:

  1. How to Work With Images in Shopify

    How to Work With Images in Shopify

    Tutorial Beginner

    One area of Shopify development which can often cause confusion for new theme developers is images. I believe the main reason for this lies with...

  2. AMP Project: Will it Make Your Sites Faster?

    AMP Project: Will it Make Your Sites Faster?

    Tutorial Beginner

    AMP is an initiative from Google, and has the goal of making mobile sites load faster whilst providing a better experience for users. In this article we’re...

  3. Mobile UI Design for Beginners: Grids

    Mobile UI Design for Beginners: Grids

    Tutorial Beginner

    Grids are the foundation of any interface, and this is no different on mobile. This video tutorial goes through the purpose of grids in general, and then...

  4. New Course: Mobile UI Design for Beginners

    New Course: Mobile UI Design for Beginners

    Tutorial Beginner

    This course provides an introduction to designing mobile interfaces. If you’re new to UI design or creating your first app, it should be a great place to...

  5. Create a Fitness App Design in Affinity Designer

    Create a Fitness App Design in Affinity Designer

    Tutorial Beginner

    In this tutorial I’ll walk you through the process of designing a welcome screen for an iOS fitness application. We’ll be working with Affinity Designer, a...

  6. Finding the Mobile Typography Sweet Spot

    Finding the Mobile Typography Sweet Spot

    Tutorial Beginner

    Let’s get serious about mobile typography; we all know that mobile is massive, and we can also agree that typography is super important within a design....

  7. Adding JavaScript Behavior to Our Skeleton Web Page

    Adding JavaScript Behavior to Our Skeleton Web Page

    Tutorial Intermediate

    So far we’ve built a solid HTML page and applied some styles. This tutorial will focus on adding interactivity to the website through JavaScript.

  8. Adding Styles to Our Skeleton Page Build

    Adding Styles to Our Skeleton Page Build

    Tutorial Beginner

    In this part of our ongoing build process we are going to focus on styling the HTML. This tutorial will have three main sections: Adding the images,...

  9. Comprehensive Guide: When to Use Em vs. Rem

    Comprehensive Guide: When to Use Em vs. Rem

    Tutorial Intermediate

    You may have come to terms with using flexible units of measurement, but you still might not fully understand when to use rems and when to use ems. This...

  10. Designing for the WATCH

    Designing for the WATCH

    Tutorial Beginner

    With the upcoming launch of Apple’s newest and shiniest product, the Apple Watch (err, WATCH) there are many designers out there itching to get a feel for...

  11. Quick Tip: Try Combining EMs and REMs

    Quick Tip: Try Combining EMs and REMs

    Tutorial Intermediate

    At the 2014 CSSConf in Australia, Simurai gave a really amazing presentation called "Styling with Strings" where he goes over quite a few techniques for...

  12. How to Make Responsive, Scrollable Panels with Flexbox

    How to Make Responsive, Scrollable Panels with Flexbox

    Tutorial Intermediate

    If you’ve been keeping up with the work ZURB has been doing with Foundation for Apps you may have noticed most of their demo templates have some pretty nifty...