September 17, 2017
•Last updated November 5, 2023
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
The Series So Far
Categories
Collection
Part of the Let's Build: A Consultancy Website collection
