This weeks subject of Structure was very helpful and interesting to me. Coming into this course, I felt comfortable with basic HTML and CSS. I knew about the various tags, using class or id, styling with a CSS file etc. I had learned those skills during my undergraduate coursework. However, I was taught these skills in a somewhat round about manner. After completing the HTML & CSS course on Codecademy.com, I focused the rest of my time on designing and implementing an interactive online map. Other than a handful of divs, my body tags were pretty empty with the most of the content coming from Javascript running in the header and being placed within those div tags. This meant that I came out of the class without much experience or understanding of how to structure a webpage and the planning and organization that goes into it. (Rightfully so, the course was a Capstone: Web Mapping class not a Web page design class…) At any rate, this weeks material helped to put web design in perspective and gave me some things to work on.
Golombisky & Hagen’s White Space is Not Your Enemy (chapters 4-6) was short and to the point about structure and planning. After reading through the chapters, I almost feel like they are a checklist for designing a site. If not an actual checklist of tasks to complete, it is most definitely a check list of things to pay attention to/mentally address. I started thinking about my Portfolio Homepage draft that we turned in last week as I read through the elements and principles. I can proudly say that some of the items I did think about when designing the site but only a few. Applying their criteria will definitely polish and improve my own website. I definitely want to spend more time on positive and negative space (I think I struggle with this design aspect). My natural inclination is to group everything close together which does bode well for a websites overall aesthetic and flow.
I found Jakob Neilsen’s article “Guidelines for Visualizing Links” to be both informative but a bit restricting. He introduced important points to think about regarding the design of links (his point about Red/Green colorblindness was something that never crossed my mind…). However, I found that he was a bit too restrictive. It seemed that he didn’t give enough credit to the end user that they will be able to identify the links on the page. I am of the mindset that more and more, individuals can intuitively understand webpages (at least on a basic level such as hyperlinks). Neilsen articulates that you should not underline any text, even if your hyperlink design style does not have the links underlined. He attributes this rule to the notion that any underlined text give the appearance of a link and will confuse the end user. While there may be reasons to avoid underlings text beyond Neilsens, I found this rule to be overly sensitive and too restrictive. I think end users rely more on the color of the text and the changing cursor icon to identify a link than on the underline.
The lynda.com videos on “Creating a First Webpage in Dreamweaver” were instructive but, for me, a bit cryptic. While I have been using Dreamweaver, I prefer using text/HTML editors because I like writing the code myself (both the HTML and CSS). It could have been the authors style of teaching but his CSS was managed almost entirely through Dreamweaver’s interface with the actual stylesheet hidden most of the time. There were points where he would bring up the style sheet and shot the actual CSS but it was intermittent in his lessons. Beyond that, I enjoyed watching the section on media queries to make your website responsive to tablet and mobile devices. I had always wondered about how that was done and I understand in Dreamweaver and I think I understand on the CSS itself.
