Jamie Schroeter
arrow 
Back To My Portfolio

Responsive Web Design Project

View My Site
This website was a project I did to learn more about responsive web design. I used HTML5 and CSS3 to create the layout and found the content and article pictures from billboard.com. I have an appreciation and passion for graphic design, so I used Illustrator CS6 and Photoshop CS6 to create the Music News logo. On a computer, this website has a two column layout, but as the screen size gets smaller, the content adjusts accordingly. If you decide to visit this demo site, just a heads up - none of the links are built out because this is just a simple one page website to show my knowledge of responsive design.
Through HTML5 and CSS3 I used media queries to set up breakpoints that adjust the content and style of the webpage. As a result, the website layout fits the screen properly - no matter the screen size - while keeping the webpage aesthetically pleasing.

When viewing this project on a tablet, the articles go from two columns down to one column in order for them to be easier to read on the smaller screen. Furthermore, I have made the background color of the articles alternating between dark gray and white, so they are easily distinguishable.

When viewing this project on a mobile device, the layout of the website changes once again! In mobile view, the pictures, article titles and buttons get smaller to make room for the text. I also used a jQuery plugin, called SlickNav, to create the mobile dropdown menu for navigation.