Guiding Styles With Responsiveness

Well, I’m back at full throttle again, coding into the wee hours of the morning and putting in double-digit hour days. Seeing the design I create come together, and then creating a style guide to go on top of it has got me going. Now, I have a real sense of how this is application is going to function together, down to the animations that occur during navigation. It’s going to be challenging to accomplish on the web, but I’ve always been optimistic about my abilities.

So, the style guide is a document I put together to ensure consistency in my design, but also can be used for 3rd parties that might be creating advertising or something down the line. I found it really helpful in planning out the fonts and the website elements, which should make writing the CSS a bit easier.

I used the mockup Illustrator designs that I had been working on recently to create the style guide. It was really important for me to design all of the responsive layouts–phone, tablet, laptop, desktop, and tv–in order to ensure my design is consistent and functional at every moment. It will be critical that the end-users have an instant familiarity and understanding of the site when switching across devices. I also found that designing for “mobile-first” definitely helped. Focusing on mobile first forced me to design only for the basic and core content that the user needs. Then, for the subsequent screens, I progressively enhanced the core content while retaining the simplicity.

Today, I started re-coding (again). I moved all of my current files into a directory called ‘alpha’, as I begin work on what I intend to be releasing as a public beta. I have this really interesting navigation pattern that I haven’t really seen on any websites or in any apps before. It’s kind of like an accordion effect with the headers becoming sticky and stackable at the top and bottom of the screen. Hard to explain, but it feels natural and allows secondary content to be tucked away until needed, opening up space to let the primary content breath.

Okay, back to writing the mobile and general CSS rules.