Responsive- Photo Composition Site

What is Responsive Design, and what makes it work?

Responsive Design allows websites to adjust to any screen size in an appealing and balanced way. Different devices support different screen sizes, and the original website that was designed for a desk top rarely looks good- or is even readable- on other screen sizes. In order to achieve responsive design, something called a media query is used. A media query is a CSS code that over-rides pre-existing code. It uses specific breakpoints for when to change the layout and position of objects on the screen. These break points are based upon the size of the screen, so when the break point is reached, the website changes its layout design. Different media queries are used to represent specific breakpoints.

media query for tablet sizes

Without responsive design

This is what my Photo Composition site looked like on a smart phone before adding responsive design. It looked a little different before, but I didn't save the original. As you can tell, the text is very small and the main is very stretched. In addition, the menu does not hold all the link text.

Responsive design on a mobile phone

After adding responsive design, the menu panel was moved to the bottom to allow more space for the text at the top. It is a lot cleaner and a lot easier to read. I did this by adding a mobile style as the media query.






'

Responsive design on a tablet

Using the tablet style as seen above, I created the layout for my website that would look good on a medium- sized screen. I added in percentages to allow the main to shrink to the size of the screen so that no information would be cut off. The menu panel is still on the right side because there is enough space for it to fit well.

Responsive design on a desk top

I did not have to change anything for my desk top web site because it was the original layout. This was the longest website that we have created so far in web design. There is a home page and 13 other pages describing the secrets to photo composition. I researched each topic listed in the menu panel, found pictures, and designed the website. If you want to learn about photography and see a responsive site, click the links below.

Check out my responsive site here

Check out my original site here