Let's Build: A Consultancy Website - Part 31

Designing and Coding the Hire Me Page

In part 31 I record a very long but thorough screencast of my design for the Hire me page as well as the coding process involved to make it come to life. On this page I made use of the same form plugin for Kirby called Uniform as seen in the previous part of the series.

In this instance I had some issues getting a select field to send the right data through to the email so after a lot of trial and error I decided to omit it from the design. The field itself was a predetermined reason for contact field which would have been a "nice to have" from Alyssa's point of view but ultimately it wasn't immediately necessary. Being as I had a lot of control over the project I was able to make the executive decision to press forward without. In most real-world projects this will never be the case and a workaround must be introduced. Sadly, to save time and headache I opted out of the field entirely.

Needless to say, this page pretty much wraps up the newer pages and content we will be designing and developing the website. The parts to come will show me refactoring some code as well as making this site as responsive as possible. We wanted the experience to be easy no matter the device you use.

Why not mobile-first?

I may be along here but I rarely design from mobile up to desktop. It's really hard for me to add elements to a page rather than subtract like you would designing from Desktop down to mobile. Is it less efficient and more expensive (in terms of performance)? That I'm not entirely sure of but I will say that I do my best to accommodate most screen sizes regardless.

My sass mixins, for instance, utilize this huge collection of breakpoints. Feel free to steal it for your own projects. Combine these with snippets in your code editor of choice and you'll be slinging code extremely fast.

/* Breakpoints: Your widths may vary */
$cap: 1420px;
$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;
    }
}

Notice that I use max-width instead of min-width. This is just how I roll but I realize most use the latter. In custom design, I feel like the code authored also needs to be custom. In that mindset, I tend to think desktop design down to mobile design almost always. In the end, I'd recommend using the method you feel most comfortable with. It will speed up your workflow and allow you to be more efficient if you aren't hesitant writing code. The hardest part of programming is naming things. That alone drives me wild! More on that for a different time...

Download the Source Code for this Project

Source Code

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
• Part 18
• Part 19
• Part 20
• Part 21
• Part 22
• Part 23
• Part 24
• Part 25
• Part 26
• Part 27
• Part 28
• Part 29
• Part 30