Jim Lynch Codes
  • Blog
  • About Jim

Writings about one coder's stories & experiences.

A Very Nice Way of Supporting Vastly Different Browser Experiences For Desktop, Tablet, and Mobile Devices.

11/24/2018

0 Comments

 
Although I was hired as the "AWS Lambda expert", I've been helping out on the frontend JavaScript side of things because, eh, they need it. Lol. In this post I'm going to describe the approach that I introduced at my current job which is working quite nicely...

Setting Up The Less Variables

The key here in making the code very nice and easy to read / work with is the less variables. Although regular css does have "custom properties" nowadays, we were already using the Less preprocessor so I figured I'd define them as less variables (and shoutout to all the Sass users out there. The advice in this post will work equally well if you are using sass or less). So, what we want to do first is set up our "device width breakpoints", ie. the screen width at which point your site changes from one device layout to another. In this example situation let's suppose that we want to display the mobile phone layout for any screen with a width less than 768px. We'll show the view for a tablet-optimized site for screens between 768px and 1024px, and then we'll use css styles for a desktop layout on anything wider than 1024px.
@desktop-min-width:  1024px;
@phone-max-width:    768px;

@desktop:            ~"only screen and (min-width: @{desktop-min-width})";
@tablet:             ~"only screen and (min-width: @{phone-max-width}) and (max-width: @{desktop-min-width}";
@phone:              ~"only screen and (max-width: @{phone-max-width})";
The variables above may seem a bit scary and foreign with the tildas and quotes, but it's really just a way of escaping strings in less.

Using The Less Variables

When you set up your variables in the way I've shown above, all you need to do is put "@media", the device specific variable, and some curly braces anywhere in your less file, and the stuff inside of those curly braces will only we executed if it's running in a window that corresponds to the device size. I think it will make a lot more sense if we just look at an example (Note- the highlighting may look a bit weird because my code highlighter doesn't recognize less so it's trying to highlight it as regular css and showing syntax errors, but rest assured that this is legitimate less code that will work!).
body {

  display: relative;

  @media @phone {
    background-color: deeppink;
  }

  @media @tablet, @desktop {
    background-color: #0000FF;
  }

}
In the less code above I'm styling the body tag from our html markup. I'm setting "display: relative;" outside of the @media tags so it will be applied always, regardless of the browser window width. Then we use the @media query, followed by the @phone less variable, and what happens in the end is that when the browser is small the body has a pink background. Then, when you stretch the screen to to a width of 769px (or more) the background turns blue. I have the example with @tablet and @desktop to show that if you want to apply the exact same styles for two or more devices sizes then you are able to avoid duplication by separating them by commas.

Anonymous Shoutout

Disclaimer- I didn't come up with this myself. I wanted to find a nice, readable way to manage our css and still support these vastly different three designs for a site being built at work. I stumbled across this method in a stack overflow answer, changed some things to fit the specs of our specific situation, and have been liking it a lot ever since I integrated it. Unfortunately, I can't find the original SO post anymore, but still I must give a shoutout to that generous soul who original dropped the knowledge into my proverbial cereal bowl of coding knowledge (wait, what?).

You Should Use It Bc, Well, It's ​Awesome

I always said that this site was, "a place for people to obtain the wisdom of Jim", and in this post you're getting some serious wisdom! :) The things I've showed you here are pretty basic and fundamental, but this could be the foundations of how you think about your site across different devices, different screens. Along with proper centering and using css units that adjust to the window, this could be critical to having a good "responsive design". All you have to do is take this knowledge and run with it. So go forth, and use these tips to make your site even more awesome! ;) 
0 Comments

Your comment will be posted after it is approved.


Leave a Reply.

    ​Author

    Picture
    The posts on this site are written and maintained by Jim Lynch. About Jim...
    Follow @JimLynchCodes
    Follow @JimLynchCodes

    Categories

    All
    Actionscript 3
    Angular
    AngularJS
    Automated Testing
    AWS Lambda
    Behavior Driven Development
    Blockchain
    Blogging
    Business Building
    C#
    C / C++
    ClojureScript / Clojure
    Coding
    Community Service
    CS Philosophy
    Css / Scss
    Dev Ops
    Firebase
    Fitness
    Flash
    Front End
    Functional Programming
    Git
    Go Lang
    Haskell
    Illustrations
    Investing
    Java
    Javascript
    Lean
    Life
    Linux
    Logic Pro
    Music
    Node.js
    Planning
    Productivity
    Professionalism
    Python
    React
    Redux / Ngrx
    Refactoring
    Reusable Components
    Rust
    Security
    Serverless
    Shell Scripting
    Swift
    Test Driven Development
    Things
    TypeScript
    Useful Sites
    Useful Tools
    Video
    Website Development
    WebStorm
    Writing

    Archives

    August 2021
    February 2021
    January 2021
    October 2020
    September 2020
    May 2020
    April 2020
    February 2020
    January 2020
    December 2019
    October 2019
    September 2019
    August 2019
    July 2019
    June 2019
    May 2019
    April 2019
    March 2019
    February 2019
    January 2019
    December 2018
    November 2018
    October 2018
    September 2018
    August 2018
    June 2018
    May 2018
    April 2018
    March 2018
    February 2018
    January 2018
    December 2017
    November 2017
    October 2017
    September 2017
    August 2017
    July 2017
    May 2017
    April 2017
    March 2017
    February 2017
    January 2017
    December 2016
    November 2016
    October 2016
    September 2016
    August 2016
    July 2016
    June 2016
    May 2016
    April 2016
    March 2016
    February 2016
    January 2016
    December 2015
    November 2015
    October 2015

    RSS Feed

  • Blog
  • About Jim
JimLynchCodes © 2021