Search

#WDDS17 Design Journal

html5 • css • web standards

Here we go again

In the first half of the semester, we worked on our resume webpage. When I was trying to divide my content into two columns, I could not figure out how to get them separate for the life of me. I followed all the coding from class, the book, and I even tried to research other ways to float different columns. After three amazing hours of going through all of the coding of the HTML and the CSS, I realized that I spelled the word “statement” wrong. Instead, I wrote “statment”.

ms-hQuKzh.gif

Because of this minuscule error, the coding did not match up or connect, which is why it was not working. After slamming my head against my desk for about an hour, I then realized how important it is to proofread, spell correctly, and use all the proper punctuation.

However, this time around, I could not figure out why my navigation bar would not line up horizontally like it was supposed to. I followed the coding we were given in class, and still nothing. This is what I typed in my css:

Screen Shot 2017-04-20 at 1.21.58 PM.png

Everything looked good to me. I checked the HTML as well, and everything looked fine. I looked over it for about 15 minutes and could not figure it out. I finally asked Professor Wolff for help, and even he could not figure it out at first. But then, there it was.Screen Shot 2017-04-20 at 1.03.47 PM.png

Have you found the error yet? Because it looked perfectly fine to me.

Screen Shot 2017-04-20 at 1.03.47 PM.png

How about now? Do you see it?

Screen Shot 2017-04-20 at 1.26.31 PM.png

That’s right folks, that’s all it was. Two quotation marks. These quotation marks can make or break you in this sick world. If you ever come across a horrible tragedy and don’t know how to fix it, try adding quotation marks because it will probably solve all of your problems for no reason at all.

In both of these cases, sometimes it really just takes a fresh set of eyes to see something that you can’t see. If you are at a complete loss and have no idea why some line of coding isn’t working, either take a break and step away from it for awhile, or ask a friend to look over it for you. Do not read it for three hours until you realize you spelled “statement” wrong and then bash your head into your desk.

SO THEN, once I finally figured out how to make my navigation bar in line, I hated the way it looked.

ms-upysGX.gif

It had no spacing in between the navigation options on the toolbar. It was not cute.Screen Shot 2017-04-20 at 1.09.09 PM.png

I tried out some different things, including word spacing(???) and other display types and nothing was working. Then it finally occurred to me that we went over the calculations and grid system for a reason. I forgot about padding!!!! Screen Shot 2017-04-20 at 1.14.36 PM.pngScreen Shot 2017-04-20 at 1.14.33 PM.png

Once I added in padding, I FINALLY got the look that I desired. I will probably change the spacing at least 400 times, but at least now I know how to do it. Padding and quotation marks thought they could beat me, but they were wrong. I emerged victorious and cannot wait for my next head banging dilemma with coding!!!

ms-4HGn9y.gif

Advertisements

Usability & Accessibility

This week we are learning about “Usability and Accessibility” in creating and developing web sites and content. The main goal of the Web Accessibility Initiative (WAI) is to create a Web that enables all people, including those with disabilities to have equal full participation when using the Web. Providing equal access and opportunity to all persons using the Web is a basic human right. Accessibility includes people with disabilities, older people as well as people that reside in developing countries and remote areas. There are guidelines such as Web Content Accessibility Guidelines (WCAG) 2.0 that provides various recommendations for creating and devaluing Web content that is accessible for all. This includes those with disabilities, learning disabilities, blindness, deafness, speech disabilities and any other disability or limitation.

Clearly it makes sense to design a site with these guidelines in place as re-working the web-site later to accommodate these features can be time consuming and costly. Many of the techniques are obvious, while others are subtle; however, they can make a huge difference for one with a disability.  The alternate use of text for images (alt text) are useful for the blind who use screen readers to read the words or those who have lower bandwidth an turn off images to increase speeds.  Allowing for text alternatives of non-text content will enable transformation to large print, braille or speech.  The reverse is also needed for those that are deaf or have hearing difficulties; providing a text version of the audio information is required and is an inexpensive way to provide transcripts for audio files. Individuals with disabilities or impacts to fine motor skills can benefit from a web site that does not require a mouse; keyboard functionality can accomplish this in addition to speech input availability.

In searching various web sites for accessibility, I found that Unilever has a very useable and accessible web site. Unilever follows W3C’s Web Content Accessibility Guidelines (WCAG). Images include relevant text content. They support tab-based keyboard navigation and supports voice recognition software. Text re-sizing and page-zooming allows increasing the size of the page. Color schemes can be overridden by the user. Unilever actually has a page on accessibility and highlights the key features that support accessibility.

Screen Shot 2017-04-19 at 10.59.18 PM.png

Waitrose is an online service for groceries and other online shopping services. Waitrose has an Accessibility statement as follows: “Waitrose is committed to providing a web site that is inclusive and available for all user groups including the disabled, the visually impaired and those with motor deficiencies and cognitive disabilities”.  Waitrose complies with key accessibility guidelines of the World-Wide Web Consortium (W3C). Users can also use their own screen reading software that works well on waitrose.com. They also provide a helpful section on the website that helps the user adjust settings for usability and accessibility.

Screen Shot 2017-04-19 at 11.00.05 PM

Human Centered Design and Layouts

This entire course is focused on the concept of “Human Centered Design.” At first, I had no idea what this concept was or why it was such an essential part of the Web Design and Development course.

When we first started talking about the need to make sites applicable for web, tablet, and phone views, I was clueless to say the least. It had never occured to me that each type of technology needed sites to be formatted accordingly, but after looking at a few, it was very easy to see why this is essential to a well-planned, human centered deisgn.

Keep in mind that the column count is the same (12) for all of the following:

Phone layouts are more likely to be simplified since their space tends to be more limited. They often include more white space so that there are not too many distractions for the reader. Since the content width of this layout is limited to 312 px, it is important to use the space wisely and effectively. Also, keep in mind that the cell (24 px) and gutter (2 px) widths are smaller for this platform. Avoid too much clutter and fonts that are hard to read on a smaller screen. The phone layout is vertical as opposed to horizontal, which is also an important factor to consider when coding the structure of the site. This means that what ever is positioned at the top will be the primary focus.

Tablet layouts are something that I am still pretty unfamiliar with, so I am trying to get the hang of them! I do not have a tablet of my own (nor does anyone in my family) so it is a little harder for me to try to gauge the spacing needed to have a successful structure. The size is not as restricted for tablets, so the options are more plentiful for this platform. However, even though you have more flexibility to add more content or images, it is important to incorporate white space so that the viewer is not overwhlemed. For this size, the content width is 758 px. This layout is horizontal, making it easier to spread content and boxes accross the entire page. Still, what is placed at the top will be the main focus, but the viewer has more space for their eyes to wander on the tablet view.

And finally, we have arrived at web layouts. These are probably the most time consuming layouts to work on. This platform gives you a ton of space to convey a message and express your creativity a little more. With a content width of 1180 px, it is important to make the best use out of the space. More eccentric fonts, patterns, and images tend to work better on a layout like this since the space is not as condensed, making it easier to distinguish sections. This platform gives you the opportunity to play around with edges, borders, and larger headers. The gutters (20px) and cell (80px) widths are much bigger on this grid size.

IMG_2740.JPGAs this semester comes to a close, I can confidently say that I now understand why human centered design and layouts are such imperative aspects in web coding. Not only do these grids enable you to make the content and sections appear appealing to the viewer, but helps guide them to certain sections or locations by making the areas more accessible. Simplicity usually helps make the guidance easier, since white space can attract attention to a certain area. With technology constantly changing, it is important to adapt your site accordingly in order to create the most effective message possible!

 

 

 

Learning about easy solutions

While learning about the influence of whitespace and the comprehension of content on a website, I’m finding it interesting how the proper balance of whitespace and text can make or break the success of a website. I automatically assumed that the aspects of successful websites that make them appealing were color schemes, fonts, and size of fonts. These are aspects that are obviously important, but I never thought about how doing something as simple as adding whitespace makes it significantly easier to comprehend.

In my website I focused heavily on the color scheme and fonts. After messing around with different options I was originally really happy with how it turned out in the end. Once we started researching websites that we liked and were also about what we want to do, I realized there was something about mine that didn’t look right. I Untitledrealized that while I really liked the different fonts I used and the colors,  It suddenly began to look a little crammed but I couldn’t figure out what I had to do to make it look less crammed. Once I realized that the few websites I looked had a lot more space between the words and sections of text, I figured out I need to somehow space everything out more. One website that stood out to me was K Sports and entertainment: As you can see here there is a lot more space even between eachK sportsparagraph within a section, then even more space separating the different sections as you scroll down. By seeing this example I realized how much of a difference a little extra space does in viewing a website as easy to follow, read, and take in the information.

Although I knew that I needed to create more space, I didn’t know exactly how to change aspects of my page to make this possible.  When thinking about solutions I initially thought that maybe a little bigger text and a little more space in between each line would help with some of the clutter. After reading about white space and how much of an impact it can make with the comprehension of a website, I realized that that was what made the K Sports and Entertainment site so aesthetically pleasing. Whitespace is such a simple concept but it amazed me how it makes such a drastic difference in how a website in interpreted. I originally thought my problem would be a little more complicated with having to go back and re-size everything. This would of taken up a lot more time with experimenting with different sizes and space in between that looked proportionate. Now I know that the size of the font might be ok, and creating larger space in between each line and sections, might do the trick.   In the past I would of thought doing this would of looked funny and awkward, but now I’m learning that it might be the solution of how to make my website look more appealing to read.

First Impressions

This week we learned a lot about crafting a design persona for our websites. While we may not think about it often when we are on the web every website we go on has its own unique personality, just like people. As we get closer and closer to finalizing our websites, we are now all asking ourselves what our own design personas will be. This task can be very daunting if you don’t have a clear vision.

 giphy

As the saying goes, “You never get a second chance to make a good first impression.” Having an engaging personality will make readers want to stay. On the reverse side, a dull one won’t keep anyone around.

When it comes to narrowing in on a concrete vision for one’s own personal brand can be difficult. Like most people, I feel that my personality changes depending on who I am with. Even though the change is not drastic, the personality I have with my friends won’t be the same as the one I have when I’m at work. Which brings me to my first tip when narrowing in on a design persona, think about your audience and the impression you would like to make on them.

Once you’ve picked out an audience, you need to think about your identity in conjunction with them.

Even national brands struggle with their identities. In my food marketing classes, we learned a tool that can be helpful for large brands to identify their persona, but I think this tool would actually still work on a personal level.

It starts by taking a step back and describing each the brand as if they were a person.

So, in my class we said if Kraft Mac and cheese was a person they might be a young, energetic boy, who likes playing outside. He would probably be wearing a blue baseball hat with an orange tee shirt. Once we brainstormed the Kraft Persona, we made sure all of our marketing campaigns aligned with this boy we created.

As I type this I realize it sounds crazy, but I am actually going somewhere with this!

 giphy (1)

Ok so, most of us are using our websites as a resume/portfolio with the aim of getting a job. This tool could also be applied to our future jobs. For example, I would like my website to appeal to public relations firms. I could apply this tool to PR. If PR was a person, what would they be like? When I think about PR as a person, I think they probably drink a lot of coffee, constantly read the news. I think they seem laidback but are always working on something.

Obviously, there many different personalities and types of people working in public relations. But I am planning on letting this tool guide me as I develop my own personal persona. I did find an interesting article, Crafting A Digital Persona, that does a much better job at explaining this if you’re interested learning more.

So good luck everyone! I hope some of this is helpful as you continue to develop your design personas as well.

 giphy (3)

 

Emotional Design and Typography

As we return from our three week hiatus from Web Design, we begin to embark on the journey of our second project. Right now, before we begin actually creating our own webpage and portfolio’s we are learning some important fundamentals. The two main concepts we are exploring is the idea of “Designing for Emotion” and the importance of Web Typography.

I don’t know about you guys, but I had no idea a website could have “personality”, and the font the designer chooses is a crucial decision. After reading and talking about these two ideas this week, I am beginning to understand why these two concepts are so important to Web Design. When it comes to emotional design there are some things you need to keep in mind. In order for a users needs to be met an interface needs to be three things. First, an interface must be functional. I know for me personally if a site is not functional I don’t spend much time browsing on the page. Second, the interface must be reliable. This is simple in the fact that, if the site keeps crashing or exiting out then you won’t use the webpage. The last basic is that an interface must be usable. I love when a site is easy to navigate and perform tasks on. Always makes me feel smart, efficient, and accomplished. Below is a site that is not functional or usable.headhunter.jpg

The design the company chose was very misleading. Users commented that they were unsure if they wanted to take them boating or cut their hair. The menu bar was disorganized and hard to read due to the icon and font, size, and color. If I was researching sites to get my hair done, and came across “Head Hunter Hair Styling” I would not follow through and make an appointment due to their disorganized web presence.

We talked about the importance of your site having craft and personality. This idea of having both craft and personality lets users see the humans at the other end of the connection. I realized that typography can make or break a webpage. There is a big importance behind the idea of “readability”. Readability combines the emotional impact of design (or lack thereof) with the amount of effort it presumably takes to read. As a web designer, each decision you make could potentially effect a readers understanding, causing them to lose interest and leave the site. Typography is one of your greatest design assets. The font you choose to use is also how you are choosing to deliver the message. We have a long way to go before we are able to fully understand “the language of type”, but as we embark on this second project try and take the time to learn the language. By learning this new language it has the potential to “take your typography from mere words on a page to something that resonates.”

Aspire with little re-wire

We need to get our confidence back. I feel as though this class feels like they should be master coders by now, but that’s not true.

Css-tricks.com is a great resource. This site not only provides forums for you to discuss issues you might be having with CSS, it provides various tips and tricks that others are discovering simultaneously. You get inspiration to go further still (that’s the Magis) and discover tricks from simple ——————-> difficult.

I spent some time dillying and dallying all around the site trying to find something to write about and I came across the “Snippets” section of css-tricks. It’s a fun section where you can basically browse  random fun bits people have discovered through their trails with CSS. One very simple trick that I discovered was an inner shadow css code. I was excited to find this because it essentially works the same way that the alternate color boxes work in our resume only it’s used for shadowing…observe.

This is a copy of my digital resume BEFORE the new CSS code was put in alongside the code itself:
screen-shot-2017-03-02-at-4-59-50-pmscreen-shot-2017-03-02-at-4-59-40-pm

 

screen-shot-2017-03-01-at-9-20-11-am

To the left is the HTML code, to the right is the CSS code and under it is the before version of my resume. Now here is the after version:

screen-shot-2017-03-02-at-5-43-00-pm

LOOK AT THAT 5:45 (yes I know this is late) SHADOW. INCREDIBLE RIGHT?!

Just that little bit of shadow adds just that much more character to my lowly resume and I did it using a coding technique that we have already learned in class (and css-tricks). There are a lot of tricks with coding that are not that far out of our reach but are still difficult to master accurately.

The reason this is my blog post is because the theme of many of these blog posts has been a quasi hopelessness. On the contrary I believe that we are right where we have to be in terms of coding our resumes and learning HTML and CSS in general. While going through the pages and pages of people not understanding what is going on (not just this class, but people all over the world) we need to get that this is building blocks.

It’s block on block on block until we get to the final levels of what we want until finally we can get to something as cool as this: http://www.rleonardi.com/interactive-resume/.

Robby Leonardi’s resume is packed full of more than just HTML and CSS:

screen-shot-2017-03-02-at-6-19-03-pm

This seems like it’s far out of our range, but there is no possible way that I could have even figured out how to do shadowing just a month ago. At the rate that we are learning nowadays we should be able to do this by the time we graduate (maybe not me, because I graduate soon, but you get it).

My point is that this is fun! This is all an adventure that we are experiencing together. It just takes a quick visit to certain websites to see how close we are to coding new and exciting landscapes and it’s only a matter of learning. Bill will get us there.

Designing From The Ground Up

Web Designing from the ground up is like building love “From the ground up” as told by country music artists, Dan + Shay.  

So, let’s start from the beginning. 

Our relationship with web designing all started back in January. That was the initial start of the semester and our bond. We locked eyes with the “Brackets” and “FireFox Developer” applications. The rest was History…..SIKE (well, not “history” just yet).  February was a short month, full of assignments. It is now March, and we have accomplished a great deal of progress. We  worked hard on each coding assignment growing closer and learning about its imperfections day in and day out. We learned what buttons we could push and when we were crossing the line. As time went on, we met its font-family deepening that bond with one another.  We are still getting used to being in this relationship but are working towards a long and successful journey.

As we look into the future of our relationship, (April and May) we plan on creating a beautiful website.  Life with coding will eventually be more than a memory in our class and our legacy of a website will forever live on.

Below are the lyrics to “From the Ground Up” by Dan + Shay. (I incorporated my own comical lyrics to represent this wonderful journey)

Continue reading “Designing From The Ground Up”

Playing Around Until You Get it Right

This week in web design we are continuing to learn new design options while playing around with our resumes. We began thinking about how our pages would look on other devices besides our computer screens; like cell phones and tablets. The goal is to make our resumes as responsive to other devices as possible. When this was first introduced to us I was kind of confused. I was not sure if we needed to put all of the coding that we had already done under each section again and just change the numbers, or if we had to put what we were changing about the page under the section — wow this sounds more confusing than it actually is. I am also never sure what size to put for the fonts or margins or anything so I kind of just put random ones and hope for the best! (not sure if that’s very efficient though)

So, I decided to go with the less tedious option and just insert into my CSS what I wanted to change when my page responds to different viewing platforms (as pictured). I copy and pasted what I had already coded, so I left some unnecessary extra information that would, in the end, not effect my resume.

Screen Shot 2017-03-01 at 8.09.31 PM.png

I played around with different numbers until I found ones that best suited the sizing of the fonts and margins for the different platforms. Here is what my resume looked like on my computer screen compared to my cell phone screen:

Screen Shot 2017-03-01 at 12.04.31 AM.png

IMG_7924.PNG

After somewhat grasping the idea of responsive web design, we moved on to coding floats and divs. These essentially split our content onto each half of the page, as you can see in the picture of my resume on a computer screen. This is called float. Float allows for different elements to “float” to different parts of your webpage. We realized that you have to be sure that you use the clear property as well to make sure that your background color is not taken away when you insert “float.” Here is what that looks like in your html and CSS files:

Screen Shot 2017-03-01 at 8.46.46 PM.png

Screen Shot 2017-03-01 at 8.46.27 PM.png

 Float and div can be used for more than just text! It is very common to use with images as well. I found a site online (w3schools.com) that is super helpful with all things coding and breaks down float and clear for css. Not only does it tell you how to code them but it gives you information on what to do if your floating element overflows outside of its container. The site also provides examples and definitions of css float properties. Definitely a useful resource to use if you ever run into any problems.

As soon as I feel like I am starting to get the hang of things, something new comes along and sometimes makes me confused again. But in the end I know that this is an array of new information that I would never in a million years thought that I would ever be learning. As stressful as it can be to learn new things it is at the same time exciting and I look forward to adding to my newfound knowledge of web designing.

Here’s a link to my resume: http://breannewelsh.com/resume.html

Thanks for reading!

– Breanne Welsh

Create a free website or blog at WordPress.com.

Up ↑