Typography and Putting Lynda.com Through the Ringer

As we dove head first into HTML and CSS in class last week I realized that Paul (the Lynda.com guru) and I had not spent nearly enough time together. But with his help, the developer tool, and W3schools.com I started to get the hang of it. In particular, I love using the developer tool on websites and actually kind of understanding its construction.

The biggest issues I had in creating my page revolved around positioning. I wanted a roughly three column layout. I continually tried using the floating and clear sections, but it only moved to a point. The section was not going where I wanted it considering Paul made it look so easy. The CSS Position property reference laid out the differences between the properties. I assigned “absolute” to the left and right side sections and relative to the middle section. I also used the developer tool to see how other websites dealt with their block quotes and side menus. This all seemed to do the trick in Dreamweaver’s live version but when I previewed it in Google Chrome and Microsoft Edge the block quote moved into the footer. I eventually played around with it enough to get a delicate balance that showed close to my vision in every available browser. Amidst configuring the position it helped that Dreamweaver is so responsive. You see any changes immediately in live view.

I was wondering though what browser views are available in the Apple version? I would have liked to see how my page translates into Safari. Mac users, do you have any idea which browser mimics Safari most?

Errol Morris’s “Hear, All Ye People; Hearken, O Earth,” study on the effects of typography in journalism results didn’t surprise me. I’ve always had a love affair with Oldstyle type, but I never understood why. As we read earlier, design is supposed to emit or draw out emotion and that must juxtapose in some way with what David Dunning describes as personality. In the case of Baskerville, its formal “starchiness” seems to produce a certain level of trust. In contrast, Comic Sans is childish and almost comical, especially when CERN used it to make its epic scientific breakthrough. I’ll admit until recently I had my phone font set to Comic Sans because it makes me happy and reminds me of childhood, but I would definitely think twice about using it in a professional setting.

The biggest takeaway from this weeks readings was to recognize that less is more. You can integrate a decorative font like Comic Sans but only for emphasis and depending on the seriousness of the topic. Keeping it simple with 3-4 font choices and only 1 per font type. All I want to use is the fun decorative fonts so this will definitely be a challenge.

Eventually I want to set up a link from my WordPress page, but for now here is my portfolio page.

Commented/thanked Josh for his instructions.

 

2 thoughts on “Typography and Putting Lynda.com Through the Ringer

  1. Love the portfolio page! Especially the quotation image floated on the side. I totally feel you on spacing issues. I am having the biggest headache trying to get my page to display properly on the phone. It was working fine and then I did something and poof, the header and navigation bar are all over the place. Now if I could just remember what that something was. :)

  2. Nicely done Jenna! I was no aware of the developer’s tool! I’d love to have you show me how you used it! I found all the additional websites on coding to very helpful, but I was somewhat annoyed with Lynda.com in that they rarely worked on the code page.

Leave a Reply

Your email address will not be published. Required fields are marked *