Category Archives: Web

Design meets science

Free image from Morguefile.com

After finishing our first website design project from scratch, there were obviously many questions from the class as a whole. There were several common questions and errors within the class, so we broke into groups and were each assigned a topic area. Our group was assigned defining the “cascading” in CSS and what and how that related to inheritance of styles.

In our initial research, each definition we found lead to more terms needing defined. So we began with a term list and set out to define some of those common terms. We also needed to come up with a short exercise for the class to help understand the terms, so we created a few questions of inheritance as it relates to human genes and blue eyes. Of course it related back to web media and we made a funny example of real life situations. A mom and dad both have blue eyes, but want their baby to have brown eyes  and can do so with a little genetic engineering. It’s all very sci-fi.

Agent = browser = god, or leaving your styling up to the browser’s default styling

Aurthor = designer = mom, or creating your own styles

User = website user = science, or someone else implementing their style on your site (mostly for accessibility purposes)

See, those high school science classes really will be useful in real life.

What I really enjoy about group work within our class is that we usually tackle the project or problem as a whole team. In many other classes, group work is usually divided up into sections and each person does his or her own work and then doesn’t meet again until just before the project is due. It’s hardly considered group work. I’m not sure if this is because our class all works well with each other or it’s more of the nature of the projects themselves. I’m guessing it has a little more to do with our great class dynamic.

Advertisements

I am not a quitter

Our first project in web media 2 is to create a website related to food. The project is more of an exercise in how to put together a website from scratch and we don’t have real clients. We started from the very beginning with research and personas and have now reached the point of building the site. And cue fear.

I realized over the weekend that much of my fear of writing markup for HTML and CSS stems from my math anxiety (self-diagnosed). I have never been terribly good at math and I think there are many parallels between markup and math. They both require logical and practical thinking and the whole solution can quickly go awry if one small step is missed. But with those frustrations, hang-ups and hiccups, the victory of a proper solution is that much sweeter. I had almost reached my quitting threshold when that sweet victory came during class last week. I was troubleshooting and actually understanding what I was doing and why. I am not terribly comfortable in web media, but it’s when I push myself out of my comfort zone that I learn the most. So I will press on!

 

Tagged , ,

Surfing “blind”

Web Media 2 is delving even further into accessibility by having us practice basic computer and web functions with various obstacles to somewhat simulate disabilities and impairments. My first experience was to explore the web via the voice over function on my laptop. I figured it would be easiest to begin with a few sites I knew well, so my first stop was the Whole Foods blog. Overall it was fairly easy to navigate. [I will stop here and note that I attempted to do this with my eyes closed at first, but quickly realized there is a learning curve with remembering the key commands and had to finish my experiment watching what I was doing.] My first frustration was remembering, and then completing, selecting linked text and various links. I’m sure someone who knows the voice over functions well would laugh at me at this point. I also noticed that a date of January 31st read as “January 31 Street,” which was very confusing, and the point where I opened my eyes. I also very quickly realized how poorly I have memorized my keyboard. I simply take for granted that I can peek down at my fingers as I’m typing along.

My second stop was Facebook. I spent all of 3 minutes on that site with voice over because it read every single element on the page: the time each status update was made, if it was made from a mobile device and which kind. All the stuff you don’t really pay attention to on Facebook suddenly was being read aloud. And each image was read as a series of numbers. Not at all helpful in letting someone who couldn’t really see the image know what it was a picture of. The page is just overloaded with information that actually hearing it all made me realize just how cluttered it is. And this exercise also made me realize just how impatient I really am.

 

Tagged ,

Oven mitts

Jdcem, thusa ikAS me tryhing tlo thyows wkfth ove2n mitts on. Im, gfettoing A ,ktt  bkit nbetter.

[Translation]  Dawn. This is me trying to type with oven mitts on. I’m getting a little bit better.

typing with oven mitts

One exercise for web media instructed us to attempt to type with oven mitts to simulate a physical disability. Not only was it almost impossible, just when I thought I was getting better, I got worse. At first I was attempting to type in the traditional manner, but then realized I was going to have to use the one-finger punch method, which was only slightly more accurate and much longer to do. Either way, I am very blessed and thankful to have all 10 of my digits in proper working order!

Tagged ,

Things I have learned in {this semester} so far

drift wood made beautiful by the elements

Things I’ve have learned in my life this far…a few reflections on the past semester.

Be quiet

I can be quite the talker and I am always more than willing to contribute to any classroom conversation. Yet, this semester I realized that my egarness to share may be inhibiting those who are less inclined to speak up in class. My disdain for awkward pauses will always come with a constant inner struggle for me to remain silent and let others speak. I don’t like dead air and feel like someone has to get the conversation started, but I’m working on letting others be that person. This, I feel, will always be an active process for me.

Ask questions (and find the answers)

I don’t know everything and would be hard pressed to meet someone who does. So asking questions is imperative. Yet, sometimes the best answer can be found by myself. Having the ability to find answers is much more important than having all the answers. I’ve found I learn and retain more information by finding the answer myself.

Relationships are important

This semester, I had class with the same people for six hours straight twice a week. And we were all together in another class on the opposite two days of the week. So, to say we’ve become like a family is an understatement. In a fairly competitive program, it would be my first assumption to think we would all become super competitive with each other. Yet quite the opposite has happened. My classmates constantly strive to make their own work stand out and it creates a positiveness throughout and pushes me to be better. We encourage each other, we laugh with each other, sometimes we air our frustrations, but all in all I truly enjoy spending time with my class.

Prepare for the worst

Murphy’s Law says everything that can go wrong will. Every major project I had due first thing Monday morning this semester came with major printing issues. Power outages, technical glitches, tornados; you name it, we encountered it. Finding ways to make projects happen after a tornado whipped through town will certainly make me a designer who can weather the storm…no pun intended.

Face your fears

Web media has been a semester long exercise in facing my fear of all things web design. I always looked at writing markup as some crazy mathematical language that I knew nothing about. But as I worked my way through the semester, I actually found myself enjoying it. And more importantly, understanding it.

While this was one of the more stressful semesters of my career, it was in so many ways one of the best. I know each semester will just continue to exceed my expectations in more ways than I can imagine. At this holiday season, I am beyond thankful for teachers who inspire, classmates who encourage, and being blessed to study something that brings me joy.

Tagged ,

Web Media Wrap Up

Well, we are nearing the end of the semester and I made it through Web Media 1. And without any major breakdowns to boot! I’ve spoken all semester long about my fear of wed design and HTML/CSS. I can’t say that I’m entirely over it, but I certainly can tackle any of the exercises with much more confidence.

However, the last two chapter of the book were a little more difficult and a little more detailed in nature. These are the two that I’ve had the most trouble with and have caused the most frustration. Here was try #1: Yeah, not so pretty.

And here is try #2 with a few corrections and adjustments to my CSS. My disclaimer, as I’ve said before, I intentionally make the colors ugly and usually not too matching so I know which color controls what element.

Overall, I am most proud that I can read the chapters and understand just about all of the content. This time last year, anyone speaking about CSS or HTML would have rendered a deer-in-headlights expression from me. Here are a few more attempts at getting it right.

Tagged , ,

And/or

Forms on the web can be smooth and easy to get through, or they can make me never want to visit your site again. Chapter 19 in our InterAct book covered forms from start to finish. I was very pleased with the section on error messages within forms. I wish there was a way for everyone who has a role in creating forms on the web to read this. It is so important for the user experience to word the error message in a clear manner. There is nothing more frustrating than an error message that tells you nothing. “Your login name and/or password are incorrect.” Well, which one is not right? Are both wrong? “And/or” is rather confusing if telling me I made a mistake. Entering numbers in a form can be equally frustrating. If there is a specific format needed, please tell me.

Forms seem so simple, but there are a lot of elements to include when writing the HTML and CSS for forms. Here are a few screen shots of my forms. They are not pretty, I will certainly admit. But for the sake of education, it is good to admit mistakes and errors.

screen shot

screen shot

Tagged , ,

Happy Blue Beanie Day!

Twitter was filled with blue beanies today in support of web standards. So many great people behind a very important cause. We wouldn’t build a public building without ADA compliance or see a doctor without a medical degree, so the internet should be built with the same attention and academics. It should be available to everyone and increasingly available other than computers. Here’s to a group of amazing web professionals with the same passion and drive to make the Web accessible for all. Hats off (and blue beanies on) to you!

My blue beanie avatar

 

For more information, visit Blue Beanie Day founder Jeffrey Zeldman’s site.

Tagged , ,

A table for web layout is like a 10-year-old prom dress

Chapter 18 in our InterAct book is all about tables and styling tables. One major point author Chris Mills stressed was that tables are only for tabular data, or data that would be best understood and/or read in a table form. Tables are in no way to be used for layout…that’s so very early ‘90s. I loved the comparison Chris made to a bad prom dress that you thought was so beautiful 10 years ago, but wouldn’t be caught dead in now. Yeah, tables for layout are like that.

screen shot of my Christmas list in a table

In playing around with HTML and CSS, this is what my table looks like. It’s just a few days after Thanksgiving ushering in the Christmas season, so I thought my Christmas list would make a great little table…and also give any of you shoppers some ideas for me. Kidding! I am just now coming to the point in the semester that I am actually proud of my ugly little table. I will admit in most of my coding exercises, I choose wildly ugly color combinations, mostly so I can follow what goes where. The colors I’ve chosen are a little rather close to each other limiting contrast and possibly causing limited accessibility for those who may be colorblind. This exercise is just for practice, but if I were designing for a highly public site, I would certainly choose a color scheme that had more contrast than what I’ve shown.

 

Tagged , ,

Images on the Web

Chapter 16 in the InterAct with Web Standards book was a crash course in image formats. Most of these elements I knew, but certainly did not know the roles they played in websites. I also learned a lot of valuable best practices for accessibility. I never thought about images in forms of content versus decoration. Images that convey a lot of information need to take certain steps so those with vision impairments can still understand the important information being conveyed. It’s also important to keep vital information in images at a minimum because search engines do not analyze images. Other things to keep in mind like optimizing your images, choosing appropriate formats and always providing fallback content like alt attributes or longer descriptions on separate pages.

 

Tagged ,