What would be the best way to make a website with responsive design

Asked

Viewed 175 times

-5

Well, whenever I try to make some site, in html and css (since I’m not very good at design), the site is perfect for me, all right etc...

But when I go to look in another computer, I mean with different resolution, it’s completely unlocked.

What would be the best way to make a site in responsive design, since I already use the % and even so, still getting all unlocked.

Could you give me some examples of html and css techniques?

Thank you.

html css

  • Bootstrap is very interesting. Already used?

  • Have you thought about buying ready layouts? I think the best option for those who do not know about web interface. It’s much easier to edit a responsive layout to stay your way than to do it from scratch.

  • I use bootstrap, it makes me so much easier at this point. But if you want to learn more about CSS Media Queries. I hope I’ve helped.

  • Hey, there, Gonçalo! I marked the question as pending because it does not fit very well in the objectivity that the community search for the site, after all there is a better way to make responsive design, depends a lot on the situation and the project. So much so that the 3 answers that have been put so far only opinions and suggest some very limited solutions, but none answers - and could not answer - such a comprehensive question as this. However, feel free to ask a more specific question or even edit this one to try to make it more objective. Hug!

2 answers

5


A tip to start making responsive, standardized designs is to use the framework Materialize .

They have a very basic initial template and great documentation to learn. Get started here

The site Tableless also features a great responsive design tutorial. Access here

Good luck!

  • 1

    Ta supported, use for a long time and is great.

  • 2

    Leonardo can you add examples here? Otherwise the answer points to links in English and loses the sense of being put here on Sopt. Thanks!

  • Hello Leonardo, the links are interesting, but just a hint: answers that are based only on links are not generally well accepted - although in this specific case you have received some votes in favor. If you only consider the text of the answer, a user who does not know the framework or the Tableless site would be left with no clue!

  • Thanks for the feedback. I will improve the responses and use the links only as references. Thanks again

2

Developing a responsive interface is not such a simple task, because in a responsive layout it will always be necessary to use elements with relative sizes, hide elements, decrease or increase font sizes, images and etc. For this you will also need to know rules CSS3 @media Rule.

See some examples:

div{
  width:80%;
  margin:0 auto;
}
h1{
  color:blue;
}
@media screen and (min-width: 720px) {
    h1 {
        color: red;
        font-size:56px;
    }
    
   
}
@media screen and (max-width: 480px) {
  ul {
    display:none;
    }
   button{
      display:none;
    }
}
<div>
  <h1>REDIMENSIONE O TAMANHO DA TELA</h1>
  <ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
  </ul>
  <button>AÇÃO</button>
</div>

Jsfiddle

To create your own responsive layout you will have enough work to adapt it to all possible screen dimensions, but to facilitate this development there are frameworks like: Bootstrap, Zurb Foundation, Materialize, Google Material Design and among others, which already have specific classes and elements.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.