Slideshow of my progressive, online evolution:
From here. The Home page of my very first website comp:
to . . .
As John Allsopp wrote in, A Dao of Web Design,
“[t]he control which designers know is the print medium, and often desire in the web medium, is simply a function of the limitation of the page. We should embrace the fact that the web doesnt have the same constraints, and design for this flexibilty. But first, we must “accept the ebb and flow of things” (Marcotte, 5).
While my very first website comp was centered on creating a solid semantic mark-up with a focus toward structure, this second version of my design concept was hand-coded from the ground up, (once again) and is the product of coding based on responsive, grid-based, design principles, with a nod to Ethan Marcotte, author of Responsive Web Design. You’ll also notice that the design in this version features a bit more personality than the first. All around, not only has the aesthetic end improved, but the content is more robust and the site itself is responsive and flexible.
My intent was to ‘re-envision’ my website design to make it more visually engaging, more interactive and more informative as well as responsive and sustainable across platforms.
So, how exactly did I come closer to this objective, you may ask?
Marcotte talks about a concept called contextual healing. Fascinating? Yes. Challenging? For me, most definitely. Let me explain. In the first comp, I was using pixels to code, mostly. But the problem with using pixels is that they do not afford flexibility and consistency when viewing across a range of browsers and devices. However, the em does. So, what was needed was to convert all the pixels to ems, which involved doing a bit of math (eek!) as I needed to come up with the percentage equivalent. Coding with the em is what transformed my static, fixed website to one that is flexible and responsive.
However, there were no doubt some challenges along the way. For example, although the text was coded to be flexible, my image was not.
The result? Well, you can imagine my embarrassment when it was time for ‘show and tell’ in the classroom and up comes my site, boasting a ridiculously gimungo photo of me–which by the way took up more than three quarters of the screen! However, I have to admit that I was proud to have even gotten the image to properly upload onto the site, which did not come easily. What was necessary to fix this glitch was for me to apply Marcotte’s formula for flexible images, as he discusses in chapter 3, beginning on page 42.
Additionally, one of the first things you’ll be sure to notice is the added navigation bar. It includes links for Home, Resume, Portfolio, Twitter, LinkedIn, and YouTube. I’ve included this particular screenshot above to illustrate how the HTML and CSS code enables the navigation bar to transform in color from turquoise to saffron when a user hovers over any of the offering of links. This makes navigation and functionality more visually engaging and interactive.
The idea behind incorporating a navigation bar designed this way was to have my site give an aesthetic ‘response’ for each action that the user would take. In a way, I wanted my site to ‘talk back,’ in a nuanced, reflexive way–the goal being to emote a positive response in the user.
So why this particular color scheme? That question is a bit harder to articulate; I think a lot of it may be an amalgamation of subconscious knowledge that acknowledges certain things as being ‘iconic’ in some way, signifying something cultural that we identify with. That being said, the closest answer I can give is that I just knew the ‘identity’ I was looking for and it more or less ‘hit me’ as I came across the colors. So it was a matter of finding the exact right colors, and then getting those colors to work together in terms of the way they enhanced the semantics and structure of the site.
This required a lot of experimenting and tweaking–as all of coding seems to! The saffron is very bold, and a bit punchy. It is a very ‘punctuating’ sort of hue, functioning almost like an exclamation mark. So I used the saffron for accents and the turquoise a bit more liberally, as it is easier on the eyes. (As a side, after doing a bit of research on color theory, marketing and advertising, I came across this blog while exploring the meaning of colors in business. Of the color turquoise, the site said, “A company may use turquoise to create a feminine appeal or an old-fashioned 50s retro feel.” I’m not so sure if I agree with this definition, but it does seem to be at once soft yet bold.)
As an active member of the social media community, I added links to my Twitter and LinkedIn spaces. In terms of work I’ve done in visual mediums, I created a remix video for a previous course, Visual Rhetoric and Multimodal Composition, so I included a link to YouTube as well. I have a diverse array of graduate projects which are featured on Issuu, [an online service that allows for realistic and customizable viewing of digitally uploaded material, such as portfolios, books, magazine issues, newspapers, and other print media. It integrates with social networking sites to promote uploaded material] so I’ve included a link to that space as well.
In conclusion, I think the site is certainly still a work in progress, but I do feel confident that it beginning to embody a design that is more representative of my personality and professional identity, and toward a technical end–users will now be able to enjoy the content of my site across browsers and devices.
FUTHARK • Aleph Beta Gimmel Daleth He • ABCDEFG
The official blog of the grad student, gamer, mascot and wino
Currently blogging about web design and a feminist reading of comics
Writer, Christian, SEO/Social Media Marketer, Book Reviewer, Deaf and Loud.
Everybody wants to rule the world
experimenting with HTML and CSS coding
Just another WordPress.com site
Inside Rowan University's Art Department