How do I make a site mobile and desktop friendly?

Question

I'm working on a website on my Raspberry Pi 3 server and I need to know how to easily make it desktop friendly as well as mobile friendly!

Answer 1

An easy way to do responsive page without any framework, which can run well in desktop and app layouts is to use @media.

In the CSS file, set it into 2 sections,
CSS for desktop and Mobile. You have 2 choices, either use desktop or mobile view first design.

Below is Desktop view first design:

/* desktop CSS outside

@media and screen (max-width: 767px) {
/* mobile CSS in here...
}

In this desktop view first design, work out all the CSS in desktop view first (in main CSS), then fine tune it to mobile view (in @media).

Below is Mobile view first design:

/* mobile CSS outside

@media and screen (min-width: 768px) {
/* desktop CSS in here...
}

In this mobile view first design, work out all the CSS in mobile view first (in main CSS), then fine tune it to desktop view(in @media).

Answer 2

+ design fro mobile first (small sized screen devices)
+ use css media queries for change css layout specifically for biggest sized screen devices

Frameworks as Bootstrap and/or W3.CSS can be helpful in doing thiese tasks, but they aren't so much obvious to take in hands / to master ^^ Good use of them cannot really be done without a minimal css skills :P Anyway, they are powerful to quick develop responsive layouts when you master them, but it could take some times, even if they could spare your time globaly: there's not as much magical in them to transform anybody in skilled webmaster in few minutes...

https://www.w3schools.com/w3css/
https://www.w3schools.com/bootstrap/

You can also google for free responsive templates: you will find a wide choice of ready made layouts to fill in ^^

Answer 3

Have you tried http://getbootstrap.com ?