Portfolio School Project: Responsive
What is Mobile First Responsive Design? Like it sounds, you develop a website for a mobile device first, expand out to a tablet then a desktop. That process of viewing a website seamlessly with the same experience is Responsive Design. Designing for mobile first allows for the limitations of mobile devices and also converts better and easier to larger views. Lets face it, while I enjoy using the internet on my desktop with two screens, mobile phone use has grown exponentially. Most people now get there info on a phone not a desktop computer.
What are Responsive grids?
A Responsive Grid system utilizes classes in the html div structure and css to create many columns on a page. It changes the width of a div or many divs to achieve columns. Using a “1 of 2” for two columns, up to a “1 of 12” for 12 columns on a single page. For the break down of different screen sizes you will use “@media size” media queries. Grids are fun to play with and have many uses in web design. Maybe you have two equally important sections on a page and don’t want one of them at the bottom of the page. Set up two columns so they are side by side, that way both headings can be seen.
Try a portfolio page
Grids also make for a great portfolio page of images. You could link to a page lets say “Trees” with five images across, but you know in mobile view it will be in one .
This is a basic Grid system, single page website, that highlights how the columns collapses down when viewed on a smaller screen.
School Project: Responsive
This was one of my earlier projects working with responsive design. It is a simple, clean and open design. I didn’t want the site to be busy but did want the aggressive red to balance that simplicity.