Jump to content

Should I convert my css to Mobile-first?


hariskar

Recommended Posts

My css is follows Desktop-first design. Should I convert it to Mobile-first? Would there be any advantages? Would it be smaller?

Is there a procedure to find the css parts used from mobile now, keep them and add as media query the desktop parts?

 

Thank you!

 

Here is my css:

*{box-sizing:border-box}
html{overflow-y:scroll;position:relative;height:100%}
header.top{height:92px;width:100%;margin:auto;background-color:#1a3365;border-bottom:2px solid #6e98c2}
header>.container{overflow:visible;white-space:nowrap}
#nav a{color:#d2dce6;display:block;padding:3px 4px;font-weight:bold}
#nav li{margin-left:8px;border:2px solid #6e98c2;border-radius:5px;float:left}
#nav li:hover,#nav li:active,#nav li.selected{background-color:#101f3d;border:2px solid #4b80b4}
#l1{color:#f2f2f2;font-size:19px}
#l2{color:#d2dce6;font-size:14px}
#logoArea{display:inline-block;float:none;vertical-align:top;font-weight:bold;font-family:Arial}
#logoArea>a{white-space:normal}
#logoArea>a div{margin-left:12px}
#nav{list-style:outside none none;overflow:hidden;margin:0;padding:0}
#navArea{display:inline-block;margin:50px 0 0;position:relative;white-space:nowrap}
.container{width:81%;margin:0 auto;max-width:1000px}
aside{height:100%;margin:12px 0 15px 0}
h1{color:#4a6b98;font-size:21px}
h2{font-size:19px}
#block1{height:auto;margin-top:14px}
#block1 ul{height:auto;padding:0;margin:0}
#block1 li{list-style:none;padding:6px;text-align:left;margin:0 6px;border-bottom:1px solid #d9d9d9}
#block1 a{display:block;font-weight:bold}
#block1 a:hover,#block1 a.selected{color:#262626}
#block1 li:first-child{border-top:1px solid #d9d9d9}
#block2,#block3{height:auto;background-color:#ecf1f8;border-top:1px solid #fff;box-shadow:1px 1px 3px rgba(0,0,0,0.2);border-radius:5px;padding:10px;margin-top:20px}
#block2 h2,#block3 h2{margin:0;font-size:18px}
#block2 p,#block3 p,#block2 form{font-size:13px}
body{height:100%;background:#fff;margin:0;padding:0;font-family:"Trebuchet MS",Helvetica,Arial;font-size:15px;color:#404040;line-height:1.5}
body a{text-decoration:none;color:#4a6b98}
footer.col-12{position:relative;bottom:auto;overflow:hidden;min-height:100px;padding-top:0;padding-bottom:0;margin-top:-100px;background-color:#dae4f1;border-top:#6e98c2 2px solid}
footer p{font-size:12px;margin:0;line-height:1.43}
#iso{float:left;margin-right:5px}
#p1,#c{color:#1a3365}
#p2{color:#dae4f1}
ul.topnav li.icon{display:none}
.row::after{content:"";clear:both;display:block}
[class*="col-"]{float:left;padding:15px}
#wrapper{min-height:100%}
aside:after,#content:after{content:"";display:block;padding-bottom:100px}
@media screen and (min-width:1001px){#content{margin:26px 0 15px}
.col-2{width:16.6667%}
.col-3{width:25%}
.col-4{width:33.3333%}
.col-9{width:75%}
.col-12{width:100%}
}
@media screen and (max-width:1000px){aside:after{padding-bottom:15px}
#content h1:first-child{margin:0 auto;display:block}
ul.topnav li:not(:first-child){display:none}
ul.topnav li.icon{float:right;display:inline-block}
#logoArea{display:block;text-align:center}
header.top{height:auto}
#navArea{display:block;height:30px;margin:1em 15px}
[class*="col-"]{width:100%}
#nav li{float:none;margin:0;background-color:#1a3365}
#nav{position:absolute;left:0;right:0}
ul.topnav li.icon{display:inline-block;position:absolute;right:0;top:0}
#nav a{font-size:16px}
#content{margin-top:0}
aside{margin-bottom:0}
.container{width:auto}
ul.topnav.responsive{position:relative}
ul.topnav.responsive li.icon{position:absolute;right:0;top:0}
ul.topnav.responsive li{float:none;display:block;margin:0}
ul.topnav.responsive li a{display:block;text-align:left}
#nav.topnav.responsive>li:not(:first-child):not(:last-child){margin-top:-2px}}
Edited by hariskar
Link to comment
Share on other sites

I recommend you read this book: " Mobile First" by Luke Wroblewski. There are many benefits for thinking adopting mobile first approach. First, it tell you which contents are important and which are not. Basically, when we design for mobile we only focus on the important things. So, you can scale your content based on the importance.

 

It also logical: start from small to big: smart phone then tablet then desktop" not from desktop to small.

  • Like 1
Link to comment
Share on other sites

Mobile first is the preferred approach these days, but it would be good to list the actual reasons rather than just blindly following the crowd.

 

It is also not logical to start from small to big, it is merely conventional. Logic only works if you start off with premises that are true.

 

From my experience, both mobile first and desktop first approaches get you to the same destination with very little difference.

  • Like 1
Link to comment
Share on other sites

If you start from desktop you would setup float: to place element adjacent to each other, then smaller devices you would use float: none; two styling's set for same element

 

Whereas starting from mobile no float required as default give required result, desktop float: left required, one styling required.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...