I decided to spend some time today practicing website design and made some simple HTML/CSS layouts.
For a long time I have felt overwhelmed with the idea of trying to create a website design. It felt like so much had changed, with ‘responsive design’ and having to make layouts work in all kinds of browsers. I didn’t feel confident enough to make a design and was confused on where to start. The thing is, if you don’t try and don’t take the action to try and understand you can’t move forward.
While doing numerous searches on how to convert a website design into a responsive one I found How To Convert a Fixed Width to a Responsive Website by Tim Wright which includes a video on his method. His method includes adding
@media screen and (max-width:700px) and setting specific widths for the smaller layouts. Then modifying the style codes, so the layout can look better in smaller devices. Such as making the navigation in block instead of inline and taking away the floats from the content and sidebar. As well as adding
meta name="viewport" content="width=device-width, initial-scale=1.0 in the header, for the viewport on mobile devices. This was so inspiring, because I thought making a responsive design couldn’t be that easy.
Now, I know that trying this method doesn’t make me an expert or that I understand the whole process 100%, but it was enough for me to try and make a few layouts. They are not perfect, but they are a start and it was fun doing something that I have loved so much.
Lets have a look, shell we?