How to Design and Code a Product Landing Page - Part 18

In the last part of the "How to Design and Code a Product Landing Page" screencast series, I finished up our desktop view of the design.

Responsive Web Design

If you're new to responsive web design you can essentially think of it as a dynamic width website. So no matter the width of the screen of any device your on, your website contorts in such a way to be both appealing and functional (hopefully).

Responsive web design can be a real challenge because of all the devices out there but there are some trends, tips, and tricks I'll show you in this video.

Think Progressively

To make a site responsive you essentially need to think forward. Forecasting how your design may be presented on a mobile screen or a tablet screen, for instance, will help you make quality design decisions from the start.

As a long time web designer I've been able to grasp the necessary constraints that we designers face today in terms of technical limitations. Browsers, internet speed, legibility, typography and more make all the difference when it comes to creating a sound user experience for those who frequent your website.

Responsive web design used to be a feature but nowadays it's becoming a requirement. Luckily many frameworks, apps, and technologies are already responsive out of the box, though, sometimes you need to code custom solutions for a custom design.

Sass Mixin Snippet

In this video, I go a completely custom route. I start from the header and traverse to the footer and use CSS throughout.

If you're curious about the Sass mixin I use here I pasted it below. Feel free to use it in your own projects.

/* Breakpoints */
$cap: 1920px;
$ml: 970px;
$m: 850px;
$s: 740px;
$xs: 500px;

@mixin breakpoint($point) {
  @if $point == large {
    @media (max-width: $cap) { @content; }
  }
   @else if $point == mediumlarge {
    @media (max-width: $ml) { @content; }
  }
  @else if $point == medium {
    @media (max-width: $m) { @content; }
  }
  @else if $point == small {
    @media (max-width: $s)  { @content; }
  }
  @else if $point == extrasmall {
    @media (max-width: $xs)  { @content; }
  }
  @else if $point == mega {
    @media screen and (min-width: $cap) { @content; }
  }
}

@mixin ipadlandscape {
  @media only screen and(min-device-width : 768px) and(max-device-width : 1024px) and(orientation : landscape) {
    @content;
  }
}

@mixin ipadportrait {
  @media only screen and(min-device-width : 768px) and(max-device-width : 1024px) {
      @content;
    }
}

Putting this snippet to use would then result in me typing the code below:

#myElement {
  padding: 5px;
  @include breakpoint(medium) {
    // On screen widths <= 850px 
    padding: 25px;
  }
}

The Series So Far

• Part 1
• Part 2
• Part 3
• Part 4
• Part 5
• Part 6
• Part 7
• Part 8
• Part 9
• Part 10
• Part 11
• Part 12
• Part 13
• Part 14
• Part 15
• Part 16
• Part 17