You are viewing our Forum Archives. To view or take place in current topics click here.
[tutorial] how to make a responsive design from scratch
Posted:
[tutorial] how to make a responsive design from scratchPosted:
Status: Offline
Joined: Dec 28, 201310Year Member
Posts: 85
Reputation Power: 3
Status: Offline
Joined: Dec 28, 201310Year Member
Posts: 85
Reputation Power: 3
right firstly we will be using media queries these are like a Boolean or a variable,
basically it will ask the browser how many pixels it is displaying and obviously it return the value.
now i will give you some basic explanation on what you will need to do but i shall not be giving you website code to just copy and paste as i believe you do not learn anything from that.
right what you will want to do is plan out what you want your website to look like on each device (ipad,android phones, mini smartphones, iphones, laptop/desktop , smaller screens).
Right here is some basic screen sizes for each.
credits due to [ Register or Signin to view external links. ]
after you have designed what you would like your site to look like then i would get the empty shell down (divs with background colors, not actual content) and do your css for each off the media queries after i would advise you do your colors, content and really make it look like your designs do.(tweak css if needed).
after all this is done re-size your browser to the appropriate size and it will respond to the design you made.
**tip**
if you are wanting it to adjust to web browsers size frequently then i recommend doing an site with a container with 1050 pix and auto margin it, from there you can work down the browsers size adjust what width's and heights you need to.
=====================================================================================
=====================================================================================
please leave a comment as i have tried my best with this tutorial
basically it will ask the browser how many pixels it is displaying and obviously it return the value.
now i will give you some basic explanation on what you will need to do but i shall not be giving you website code to just copy and paste as i believe you do not learn anything from that.
right what you will want to do is plan out what you want your website to look like on each device (ipad,android phones, mini smartphones, iphones, laptop/desktop , smaller screens).
Right here is some basic screen sizes for each.
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
credits due to [ Register or Signin to view external links. ]
after you have designed what you would like your site to look like then i would get the empty shell down (divs with background colors, not actual content) and do your css for each off the media queries after i would advise you do your colors, content and really make it look like your designs do.(tweak css if needed).
after all this is done re-size your browser to the appropriate size and it will respond to the design you made.
**tip**
if you are wanting it to adjust to web browsers size frequently then i recommend doing an site with a container with 1050 pix and auto margin it, from there you can work down the browsers size adjust what width's and heights you need to.
=====================================================================================
sorry if this is a poor tutorial, this is because my English is terrible
=====================================================================================
please leave a comment as i have tried my best with this tutorial
You are viewing our Forum Archives. To view or take place in current topics click here.