Help Coding For Mobile!

[marrimola]

Hello! I've been playing around with code for a few days and I've found it to be really fun, but I was wondering what helps make a code mobile-friendly. I've only ever worked with my laptop, so I know for a fact that any codes that I've made public aren't very accessible for mobile-users.

What size of layout works best for mobile? What features are better suited for mobile?

If anyone has any answers, I'd really appreciate it!

 

[CloudySkyLoftyMoon]

There are two big components to making designs mobile compatible and those are dimensions and flexbox.


Dimensions are essentially knowing the sizes of various screens and what works better on them. Mobile screens tend to want dimensions that are around 200px or so and as a result, many people choose to choose a mobile-first approach where there code uses a small amount of space even on laptops.


That is probably the easiest way to go about it since you simply don't take large screens into account. However, if you're willing to fiddle around a bit you can use other dimensions and scaling units such as percentages, view-width/view-height, as well as certain...css functions.

To provide a brief overview:

Percentage​

These units calculate their size based on the size of their 'parent', the parent being whichever div/border container is directly above them.

e.g.
Here I've created a blue box that's 200px by 200px and the gray box inside it has the height and width set to 50%. The dimensions of the gray box are 100px by 100px because the percentage unit looks towards the immediate parent.

50%

View Width/View Height​

The view width and view height units are similar to the percentage unit except it instead looks at the 'view port', which is usually the size of your browser window and takes a percentage of that.

So 10vw means 10% of the view width of whatever device/browser is being used to view that code.

E.g.

This box is 20vh by 20vw, if you're on a laptop or desktop you should see the size of the box change as you resize your browser window.

View width & view Height

CSS Functions​

There are a ton of useful functions which can be used to do on-the fly calculations on dimensions. This include clamp(), calc(), min(), max(), and many more. These are definitely on the more advanced end, but many of the fancier designs you'll see around will use some of them to handle resizing div boxes and all.

clamp() allows you to create scaling dimensions, it accepts a lower bound, a preferred range, and an upper bound.

example:

I've set the width of the div box below to clamp(200px, 50vw, 800px)

Clamp

This means the box will try to be 50% of the width of the browser window but it will not grow above 800px (the upper bound) nor will it shrink below 200px (the lower bound).


You can view it as three attributes rolled into one:
min-width: 200px
width: 50vw
max-width: 800px

The minimum width of the div box is 200px, the maximum width is 800px and the preferred with is 50vw.

Flexbox​

This is the big one. Flexbox is a neat thing that allows div elements to automatically resize themselves within the available space. Honestly, it deserves a post onto itself to explain and I feel like I've already dumped a lot of info here so I'll hold off

 

[marrimola]

There are two big components to making designs mobile compatible and those are dimensions and flexbox.


Dimensions are essentially knowing the sizes of various screens and what works better on them. Mobile screens tend to want dimensions that are around 200px or so and as a result, many people choose to choose a mobile-first approach where there code uses a small amount of space even on laptops.


That is probably the easiest way to go about it since you simply don't take large screens into account. However, if you're willing to fiddle around a bit you can use other dimensions and scaling units such as percentages, view-width/view-height, as well as certain...css functions.

To provide a brief overview:

Percentage​

These units calculate their size based on the size of their 'parent', the parent being whichever div/border container is directly above them.

e.g.
Here I've created a blue box that's 200px by 200px and the gray box inside it has the height and width set to 50%. The dimensions of the gray box are 100px by 100px because the percentage unit looks towards the immediate parent.

50%

View Width/View Height​

The view width and view height units are similar to the percentage unit except it instead looks at the 'view port', which is usually the size of your browser window and takes a percentage of that.

So 10vw means 10% of the view width of whatever device/browser is being used to view that code.

E.g.

This box is 20vh by 20vw, if you're on a laptop or desktop you should see the size of the box change as you resize your browser window.

View width & view Height

CSS Functions​

There are a ton of useful functions which can be used to do on-the fly calculations on dimensions. This include clamp(), calc(), min(), max(), and many more. These are definitely on the more advanced end, but many of the fancier designs you'll see around will use some of them to handle resizing div boxes and all.

clamp() allows you to create scaling dimensions, it accepts a lower bound, a preferred range, and an upper bound.

example:

I've set the width of the div box below to clamp(200px, 50vw, 800px)

Clamp

This means the box will try to be 50% of the width of the browser window but it will not grow above 800px (the upper bound) nor will it shrink below 200px (the lower bound).


You can view it as three attributes rolled into one:
min-width: 200px
width: 50vw
max-width: 800px

The minimum width of the div box is 200px, the maximum width is 800px and the preferred with is 50vw.

Flexbox​

This is the big one. Flexbox is a neat thing that allows div elements to automatically resize themselves within the available space. Honestly, it deserves a post onto itself to explain and I feel like I've already dumped a lot of info here so I'll hold off

Thank you so much! This gives me a lot of stuff to experiment with. I don't know if I'm quite ready for Flexbox yet but I'll try everything else mentioned and see how it goes ^^