+ 1

How do I make a site mobile and desktop friendly?

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!

8th Jul 2017, 2:58 AM
Erik Johanson
Erik Johanson - avatar
3 Answers
+ 6
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).
8th Jul 2017, 5:35 AM
Calviղ
Calviղ - avatar
+ 4
+ 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 ^^
8th Jul 2017, 3:48 AM
visph
visph - avatar
+ 1
Have you tried http://getbootstrap.com ?
8th Jul 2017, 1:54 AM
Luca Garrera