As designers we have to be aware of the function of our work and design as much as we care about the aesthetics and visuals. There are a lot of terms for the design of how the site functions and works, from “usability design” to “user experience,” what remains constant is that if we want to become better designers we have to pair these two concepts together.
Using clear and effective design laws as guides we can use proven formulas for better design.
Are you tired of dealing with different screen sizes for your web pages? Well, this information is for you.
I will show you some CSS tricks to help you reorganize a webpage depending on your browser window width.
We will start with a simple HTML 5 skeleton that includes a contents and a navigation section:
<!DOCTYPE html> <html lang="en"> <head> <style> /* we will add our style here on the next step */ </style> </head> <body> <div role="main"> <h1>This is the contents</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Here it is. Start with a conventional item list like the following:
<ul class="hmenu"> <li><a href="">Option 1</a></li> <li><a href="">Option 2</a></li> <li><a href="">Option 3</a></li> <li><a href="">Option 4</a></li> <li><a href="">Option 5</a></li> </ul> Don’t forget to add the class parameter to the ul tag – that will help us do the magic. The previous list is rendered in a regular browser like the following: Now, add the following CSS to your file:
.hmenu { margin: 0; padding: 0; list-style-type: none; list-style-image: none; } .
