Reputation: 53

Positioning for a responsive experience

I know a decent amount of HTML, CSS, Jquery, and PHP. But when it comes to making a responsive web page I'm really new to it. So basically in my basic web page called 'colors.html' i have 4 divs. The 4 colors are yellow, blue, red, and green. So understanding what a responsive web page is supposed to be i did all my positioning and heights and widths in %'s. All my positioning is placed within a body that is relative, and all the elements inside it are absolute. It looks like it works fine, and i set a min-width to the all the divs so that when a user resizes the browser window it doesn't all scramble together. Am i doing this correctly or is there a much better way to do this?

<!doctype html>
<html>
<head>
    <title> Test </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" rel="stylesheet" href="colors.css">
</head>

<body> 
    <div id="red"></div>
    <div id="green"></div>
    <div id="blue"></div>
    <div id="yellow"></div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">    </script>
        <script>    
            $('#red').click(function() {
                alert('Red');
            })

            $('#green').click(function() {
                alert('Green');
            })

            $('#blue').click(function() {
                alert('Blue');
            })

            $('#yellow').click(function() {
                alert('Yellow');
            })
        </script>
</body>
</html>

body {
margin: 0;
position: relative;
}

#blue {
position: absolute;
width: 20%;
height: 10%;
background-color: blue;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto;
cursor: pointer;
border-radius: 5px;
left: 3%;
top: 5%;
min-width: 150px;
}

#yellow {
position: absolute;
width: 20%;
height: 10%;
background-color: yellow;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto;
cursor: pointer;
border-radius: 5px;
left: 3%;
top: 20%;
min-width: 150px;
}

#red {
position: absolute;
width: 20%;
height: 10%;
background-color: red;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto;
cursor: pointer;
border-radius: 5px;
right: 3%;
top: 5%;
min-width: 150px;
}

#green {
position: absolute;
width: 20%;
height: 10%;
background-color: green;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto;
cursor: pointer;
border-radius: 5px;
right: 3%;
top: 20%;
min-width: 150px;
}

Upvotes: 4

Answers (2)

tao

Reputation: 90048

The biggest problem of your concept, in my opinion, is that position: absolute is commonly used to render items out of the normal flow of the page. They are rendered above the page. This is how you place a drop-down menu, a tooltip, a modal window, a drawer that slides over the content or a mega-menu.

Placing all your content outside the normal flow just because you can is not particularly useful, since you don't actually need the functionality of placing elements outside the flow. You don't have a flow!.

When you start thinking about a layout you shouldn't think about CSS at all. All you should ask yourself is: how will my page be rendered on different sizes and proportions of screens?:

huge screens, with width so big all your paragraphs would be rendered as 1 liners (> 75em)
large screens: desktops, large laptops (62em > 74.9em)
medium devices: laptops/tablets (48em > 61.9em)
small devices most smartphones, tablets (34em > 47.9em)
very small screens (up to 33.9em)

After you come up with some display rules for various screen sizes and proportions, you should write them in order, from small to large or from large to small:

Example (large to small):

// CSS for very large screens

@media (max-height: 74.9em) {
    // CSS overrides for large screens
}

@media (max-height: 61.9em) {
    // CSS overrides for medium screens
}

@media (max-height: 47.9em) {
    // CSS overrides for small screens
}

@media (max-height: 33.9em) {
    // CSS overrides for very small screens
}

Another good practice is to aim to write as little code as possible. For example, instead of writing the same properties for each color, like you did, it would be better to make a class that holds all the common properties of your colors and apply it to all color divs.

.color {
    position: absolute;
    width: 20%;
    color: white;
    text-align: center;
    font-size: 150%;
    font-family: Roboto, sans-serif;
    cursor: pointer;
    border-radius: 5px;
    min-width: 150px;
}

and than write in each #{color} {...} the specific properties for that particular div.

Keep in mind that, before using it, you should load a font-family, like Roboto to make sure it renders on all devices even if it's not installed.

@import url(https://fonts.googleapis.com/css?family=Roboto);

You should also specify a generic font-family type, just in case there is an error downloading the font file, so the browser renders the page as close to the original as possible.

Other than that, the only advice I have is: always test your CSS on all screen sizes and in at least 3 major browsers before going live.

Best of luck!

Good luck!

Upvotes: 1

Milos Savic

Reputation: 15

You can use Media Rule to make responsive for each resolutions... it may be a litte bit too much work. but it will do work for u...

for example:

make new .css file call it whatever u want to. responsive.css You will use all your tagst (div, ul, li, etc)... include it in ur html file in to tag...

well, for ecample you have:

#blue {
position: absolute;
width: 20%;
height: 10%;
background-color: blue;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto;
cursor: pointer;
border-radius: 5px;
left: 3%;
top: 5%;
min-width: 150px;
}

in Media Rule tag it will look like:

@media screen and (max-width: 699px) and (min-width: 520px) {
  #blue {
    position: absolute;
    width: 20%;
    height: 10%;
    background-color: blue;
    color: white;
    text-align: center;
    font-size: 150%;
    font-family: Roboto;
    cursor: pointer;
    border-radius: 5px;
    left: 3%;
    top: 5%;
    min-width: 150px;
  }
  
  #red {
  }
  
  .div {
  }
  
}

@media screen and (max-width: 1000px) and (min-width: 700px) {
}

so u have to do it for each tag... dor a desctop, table, phone screen.

@media screen and (max-width: 1680px){
}

@media screen and (max-width: 1600px) {
}

@media screen and (max-width: 1440px) {
}

@media screen and (max-width: 1400px) {
}

@media screen and (max-width: 1366px) {
}

@media screen and (max-width: 1360px) {
}

@media screen and (max-width: 1280px) {
}

@media screen and (max-width: 1152px) {
}

@media screen and (max-width: 1024px) {
}

until 480px or lower. i don't know how small screen do u need.

Hope this will help you :)

Upvotes: 1

Positioning for a responsive experience

Answers (2)

Related Questions