My First Responsive Site
Just this week, VoteVoiceOU.com launched. The project is a promotional site for a party running for Student Senate at Ohio University. I used the opportunity to learn more about how to design and then implement a responsive site. I’ll just list a couple of the things that stuck out most in my mind while building the site.
Here are a couple things I found very interesting:
Percentages: working with your layout, giving max-widths for container divs and then giving elements within different percentages helped when scaling the size of the window you’d view the site through (browser, iPhone, iPad, any kind of device). For example I really liked the mobile menu on Stuff and Nonsense that I also found through mediaqueri.es. Looking at how they used percentages, I was able to build the internal mobile menu for the Platform page
Hide (and Seek): When resizing the browser, it was important to think of how the user would interact with different devices with certain viewport sizes. On the Platform page, two different internal menus were designed to select which part of the platform you want to look at- one for desktop and one for mobile. When the viewport reaches a certain size, the desktop menu (appearing on the side) is hidden through CSS and the mobile version (appearing at the top) is shown (via CSS and jQuery depending on how far the user has scrolled from the top)
Up in the Clouds: After my partner on the project, Amrit Saini, showed me this Pure CSS3 Animated Clouds Background, I really wanted to implement the same animation on our homepage to go along with the illustrations of rolling hills and some of OU’s campus buildings. After looking at the code, I was able to modify the shapes of the clouds to go along with the style of my illustrations and then tweak the animation code to my liking.
Candidates Page: credit to the slick interface for viewing candidates goes to Amrit Saini. I initially saw this style on Mojotech’s people page and thought it would be a great way to organize Voice’s members. A two by two grid, the system allows you to click on a candidate and causes their frame to expand, revealing their bio. After Amrit showed me what he had put together, I thought he had just copied and pasted Mojotech’s code, but he actually hand coded the jQuery to enable its functionality. I was then able to go into the CSS to style the elements and set up media queries to make all of the candidate section responsive.
Learn as you go.
Throughout my first couple years in web development, there has been a lot of trial and error. The program that I’m in at school focuses on the design and storytelling of projects, but leaves much of the technical side of front-end coding/development to us. At first, I thought that this was a major disadvantage, but what I’ve learned is that learning by messing up a lot of code is the best way to go.
I started this project with some inspiration from UX London, I site I found on Media Queries, for the header and navigation. Looking at the UX London site as well as some others from mediaquer.ies helped me understand some basic practices and breakpoints for responsive sites. Also, I used Treehouse videos on responsive design to get me started.
The inspector in Google Chrome and Firebug in Firefox became my best friends for this project. Using those tools, it’s really easy to look at the HTML and CSS used to build sites and are also great for designing or modifying designs in-browser.
Whenever I’m working on a project that gives me some creative freedom, I like to not just build an end product, but use the opportunity to learn and try new things that I haven’t done before. This project let me take a swing at responsive design. Not only that, but I had some fun working on molding cloud objects in CSS and then animating them.