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?
This was the first design that I experimented with. I always loved using border-radius and so I used it in the navigation and sidebar. It’s just a very basic two column design with a bit of blue colours mixed in. There could be improvements in how it looks on the tablet design and I may make some modifications later, so that it looks more like the mobile one (especially the navigation).
In the second design I wanted to make one that had a navigation that stretched right across the full width of the browser/device. In the desktop preview, the menu has gone a little bit wonky. This is another basic two column with red a main colour.
In this design I started to have a bit more fun. I used a rounded frame on the desktop and also added a texture to the background elements. You can’t see from the preview image but I also added a fun little section as a comment mockup. I found comfort in the colour blue again.
This design is the simplest, but is probably my favourite. I used two tones, black and white on a two column layout and added some Google Fonts to make it more interesting. The title is also blocked in, which I thought added a nice bit of contrast. I was using my iMac on the design which has a large screen and can see from the preview on the desktop, that the sidebar should probably have a smaller title size.
I think it’s important to note that I do have a basic understanding of HTML/CSS, and it’s mainly some of the newer elements like @media and things like sass that I am not used too and made me feel hesitant to experiment. I wanted to try and make something from scratch without using a framework. Because I am weird. Now, maybe next time I can work on taking things a bit further and see where it leads.
- HTML/CSS was hand coded in Expresso
- Designs hosted on Github / Kyaowl
- Validated with W3C Markup Validator and W3C CSS Validator
- Checked responsive design with Responsinator
- Layout mockup images from Multi Device Website Mockup Generator
- When was the last time you created a website design?
- What do you use to code your designs?
- Do you like to use a framework (such as Bootstrap, Foundation, etc)?
- How many columns do you do? (1, 2, 3, 1000 )