Oct. 2 & 4 Chat Meeting — Meaningful CSS: Style Like You Mean It

  1. What is “semantic” coding?
    1. Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages and web applications rather than merely to define its presentation or look. Semantic HTML is processed by traditional web browsers as well as by many other user agents. CSS is used to suggest its presentation to human users.
  2. What is ARIA and what is it for? Why does the author bring it up in this article?
    1. WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) is a technical specification published by the World Wide Web Consortium (W3C) that specifies how to increase the accessibility of web pages, in particular, dynamic content and user interface components developed with Ajax, HTML, JavaScript and related technologies. On 20 March 2014 WAI-ARIA 1.0 became a completed W3C Recommendation.[1]

      Web developers increasingly use client-side scripts to create user interface controls that cannot be created with HTML alone. They also use client-side scripts to update sections of a page without requesting a completely new page from a web server. Such techniques on websites are called rich Internet applications. These user interface controls and content updates are often not accessible to users with disabilities, especially screen reader users and users who cannot use a mouse or other pointing device. WAI-ARIA allows web pages (or portions of pages) to declare themselves as applications rather than as static documents, by adding role, property, and state information to dynamic web applications. ARIA is intended for use by developers of web applications, web browsers, assistive technologies, and accessibility evaluation tools.[2]

      WAI-ARIA describes how to add semantics and other metadata to HTML content in order to make user interface controls and dynamic content more accessible. For example, with WAI-ARIA it is possible to identify a list of links as a navigation menu and to state whether it is expanded or collapsed. Although originally developed to address accessibility issues in HTML, the use of WAI-ARIA is not limited to HTML: in principle, it can also be used in othermarkup languages such as Scalable Vector Graphics (SVG). SVG 1.2 Tiny added support for WAI-ARIA in the 15 September 2008 working draft.[3]

  3. What are “microformats”?
    1. A microformat (sometimes abbreviated μF) is a World Wide Web-based approach to semantic markup which uses HTML/XHTML tags supported for other purposes to convey additional metadata[1] and other attributes in web pages and other contexts that support (X)HTML, such as RSS. This approach allows software to process information intended for end-users (such as contact information, geographic coordinates, calendar events, and similar information) automatically.
  4. Find one really meaningful quote in this article and discuss why you think it is significant.
    1. In a site afflicted by classitis, every blessed tag breaks out in its own swollen, blotchy class. Classitis is the measles of markup, obscuring meaning as it adds needless weight to every page.Jeffrey Zeldman, Designing with Web Standards, 1st ed.

    2. We need to rely on our semantic HTML tags like <nav> and <footer> to make our HTML easy to read and understand.
  5. Provide a link to any other cool article that you find on Alistapart.com that you think would make a good future Chat Topic.
    1. http://alistapart.com/article/task-performance-indicator-management-metric-for-customer-experience

Never Heard of It

Recently I read this article on A List Apart about how to react when somebody in the web developer world mentions a topic that you haven’t had any experience with. What do you do? Pretend to know about it so that you look smart? Admit that you don’t know anything about it and maybe look dumb or uneducated in your field?

I’m a new software developer at a company in OKC with about three months of experience. So almost everything my boss tells me to do is new to me. I don’t have to pretend like I know all about it because my boss knows that I’m new and the point is for me to learn as I go. So I figure stuff out. I try not to be too dependent on my boss by asking questions. Mostly I try to find the information I need on my own, and this means, of course, Googling stuff. My Google-Fu isn’t too shabby, so I usually learn what I need to know pretty quickly.

Another option if I’m desperate and can’t find what I’m looking for on Google is to ask a question on a site where people know a lot more about computer stuff than I do: Stack Overflow. A lot of really smart, really experienced folks read Stack Overflow and respond to the questions asked. But the downside to asking questions on Stack Overflow is that the people will typically chew you out for asking dumb questions. They usually think that whatever you’re asking has already been answered (even though you looked and didn’t find the answer.) And it is well known by Stack Overflow users that noobs get chewed out. So my recommendation is that if you need some info and can’t find it Googling, ask your question on Stack Overflow. Word it carefully, do some research before asking it, be respectful, and then try to take the complaints you inevitably get with a grain of salt.

May 1 & 3 — Responsive Full Backgrounds

I recently read an article on responsive full background images. I thought it was a cool article and I plan on using that technique in the future. Websites with full background images look nice and modern, at least for those of us who still surf the web on computers!

Five things that I found useful about the article:

  1. Helpful shorthand code.
    body {
      background: url(background-photo.jpg) center center cover no-repeat fixed;

    I can just copy that code and plug in the path to my image and I’m all set!

  2. Good explanation. The article walked us through the technique quickly and clearly. I feel ready to use the code.
  3. Good advice about media queries. Using a large picture might be nice for computers, but I definitely want to consider using a smaller picture when serving the site to a mobile device. We’ve got to design with the assumption that a majority of our users will likely be on some type of mobile device. We don’t want to inconvenience mobile users with big image downloads.
  4. It was nice of the author to make all of his source code in the public domain.
  5. I wanted to tweet this article, but unfortunately the author doesn’t have a built in tweet button. At least not one that I could find.

As for Francis Tuttle, my instructor asked:

  • What other suggestions do you have to make the program better?

I think it would be useful to learn Bootstrap as soon as we’ve figured out HTML and CSS. Bootstrap isn’t that hard to learn and it makes responsive design quick and easy.

April 24 & 26 — Practical Guide to Choosing Typeface

Recently I read an article on choosing typeface by Robbie Manson. The article described his process for coming up with a typeface to use for his project. He described how he imagined the logo he was designing as a person–specifically a chubby boy scout from the movie Up named Russell. He wanted his brand’s logo to convey the personality he associated with the character Russell–that he was trusted, diligent, personable, and plucky. After narrowing down his options, he took the fonts he liked most and put them on artboard in Illustrator. Then he narrowed it down to his final selection.

Here are three takeaways I found valuable in this article:

  1. Thinking about your design’s personality is important. You need to consider what sort of feeling your fonts and layouts are going to invoke, and it may be helpful to anthropomorphize your fonts to think of the characteristics that they personify.
  2. Narrow your font choices down with an artboard or moodboard. You can use Pinterest to put different fonts or layouts together to compare and contrast them.
  3. Zoom in. Look at the font when it is really large. What does it look like at that size? Maybe its telling you something. Like: “Hey, I’m a good font. Pick me.”

Another article I’d like to share is the author’s Vimeo presentation, “The Mindful Designer.” This article got me thinking about mindfulness and led me to watch this TED Talk video on mindfulness.

Ethan Marcotte’s Responsive Design Article

This week I read a fantastic article on responsive design by Ethan Marcotte. This article went over how to use media queries to make websites responsive. Written in 2010, the article is kind of old news now. Now we know that websites have to be responsive. There is no real exception. Making a fixed website exclusively for desktop computers would be very detrimental to the site’s success. This article was really groundbreaking. It predicted that sites would need to be able to cater to many different types of devices, and that’s exactly how things are now.

Ethan made a site to go along with his ebook to showcase responsive design. It can be found here. I tested it out, resizing my browser and such, and it worked beautifully. I was most interested in the difference between the largest layout, the one for desktop computers, and the smallest layout, the one for smartphones.

You typically have multiple columns in the larger layout as the larger screen space gives you room to accommodate more girth. On smaller devices, you reduce the number of columns to one, and move horizontal menus into a vertical position. This uses the space better on a smartphone’s smaller screen.

To do this restructuring of the layout, you use media queries. An example from Ethan’s site is:

@media screen and (max-width: 520px)

This bit of code is followed by rules that structure the page’s layout differently on a screen with 520px of width or less, utilizing the type of changes mentioned earlier.

Pretty cool stuff.



Apr. 3 & 5 Chat Topic — Deconstructing a Microinteraction

Recently I read a great article on UX/UI by Jared M. Spool, What Makes a Design Seem ‘Intuitive’? This reminded me some of the talk I heard on UX by Tommy Yi at the RefreshOKC meet-up. For those of you that don’t know, UX means user experience, and UI means user interaction. To quote another blogger who was quoting Wikipedia:

User experience design (UXD or UED) is the process of enhancing customer satisfaction and loyalty by improving the usability, ease of use, and pleasure provided in the interaction between the customer and the product.

User Interface Design is its compliment, the look and feel, the presentation and interactivity of a product.

5 things I Googled from this article:

Microinteraction: Microinteractions are contained product moments that revolve around a single use case—they have one main task. Every time you change a setting, sync your data or devices, set an alarm, pick a password, log in, set a status message, or favorite or “like” something, you are engaging with a microinteraction.

Security Design Pattern: Design patterns can be applied to achieve goals in the area of security. All of the classical design patterns have different instantiations to fulfill some information security goal: such as confidentiality, integrity, and availability. Additionally, one can create a new design pattern to specifically achieve some security goal.

Microinteractions Framework: https://marcabraham.wordpress.com/2013/07/10/book-review-microinteractions-designing-with-details/

Design Triggers: http://zurb.com/article/1286/pull-the-trigger-on-user-experiences-with

Microinteraction Experience: http://thenextweb.com/dd/2015/08/17/why-micro-interactions-are-the-secret-to-great-design/#gref

Why are microinteractions often overlooked?

Many microinteractions, like error messages and alerts, are unintentionally designed. Often, a developer rushing to meet a deadline, creates a solution to deal with a discovered edge condition, without giving any consideration to the experience users encounter.

In this specific microinteraction, what was the problem and what were Jared’s suggestions to improve the user experience?

In this specific microinteraction, the problem was that the timeout error message was confusing to the user. Jared suggested having the timeout be a silent design, one that only becomes relevant if the user tries to do certain things.

What do you think the best solution(s) would be for this example? 

I think the timeout error message could give the user more specific information, like “your confirmation has been emailed to you.” That might eliminate some of the user’s confusion. I also think making it a silent design could improve user experience.

Find another good article on Jared’s User Interface Engineering website and share a link to it. Why does it look like a good article to you?

I read another article by Jared: https://articles.uie.com/why_sketching/

It’s an article about how great designers sketch for a variety of reasons, to organize ideas or communicate for instance. I like to sketch and after reading this article I think I will make it a bigger part of my process.

CSS3 Foundations by Ian Lunn

Over the last couple of weeks I read CSS3 Foundations by Ian Lunn and worked through the exercises to create a webpage (which can be viewed on my Web Authoring Languages page).

I felt that this book was really pretty helpful to my education as a web developer. The first 8 chapters or so were really review. I knew how to do selectors, borders, backgrounds, that sort of thing, which I had learned from lynda.com tutorials. Around chapter 9 I started going over stuff that I kind of knew, but wasn’t completely sure about. I got a reminder on how to use CSS3 positioning, and I now feel more confident in my understanding of static, relative, absolute, and fixed positions. Chapter 10 of the book was about typography and made heavy use of one of my favorite web developing tools: Google Web Fonts. It was kind of stuff I already felt that I knew, but I was glad it was in there.

Chapters 12-14 were about 2D transforms, 3D transforms, and animations. This was a great part of the book for me as it was stuff that I didn’t already know. I now feel that I can use translate, rotate, skew, scale, transition, animation, etc. without too much trouble (I might need to Google some things the first time or two that I try them on my own, but I feel like I basically understand them.)

The final chapters were about testing across browsers and devices and making code more efficient. Useful stuff to know.

Overall I’d say this book is a great way for a new web dev to get the fundamentals of CSS3 down. It might be necessary to already have a basic knowledge of CSS and HTML to follow the book. I’d recommend lynda.com or teamtreehouse.com videos to help round out your learning experience.

A Beginner’s Guide To Google Fonts

Are you a new web designer looking to learn how to use Google Fonts? This guide will help you get started fast. Google Fonts are incredibly easy to use.

What Are Google Fonts?

Google Fonts are amazing. They give you access to thousands of web fonts which are free and easy to insert into your webpage. Spice up your page with fonts to help direct the reader’s eye and make your site stand out. They’re hosted by Google and you don’t need to worry about the license to use them.

Before You Get Started

Okay, so you’re a new web designer. You do know what HTML and CSS are, right? If you don’t know anything about HTML or CSS, you probably need to go back and learn that before you worry about web fonts. Check out lynda.com or teamtreehouse.com for guides on learning the basics of coding. Those guides require a paid membership to use, but they’re high quality. If you need to learn to code for free, you might want to read the guides on w3schools.com.

Getting Started With Google Fonts

Okay, so you know HTML and CSS and you’re ready to add Google Fonts to your web page. It’s really easy. Start by going to google.com/fonts. First, look through the fonts. They show you what each font looks like with a quirky example sentence, “Grumpy wizards make toxic brew for the evil Queen and Jack.” Look around through the fonts until you find some that you like. You can use the search bar if you know the name of the font you are looking for and you can sort the fonts a variety of ways by using the sorting drop down menu. Here’s what you should be seeing:

google fonts 1

Google Fonts

Okay, look around until you find a font you want to put on your web page. It’s not too hard to add or remove the font from your page, so don’t be afraid to just try some out to see how you feel about them. You can add multiple fonts to your page at one time by selecting “Add to Collection” and then selecting “Use” for the collection. We’re going to start off using just one font.

Adding A Google Font To A Web Page

You’ve chosen a font that you want to use. Now click “Quick-use.”

Quick Use

The red arrow points at the quick-use button.

This takes you to the page with all the stuff you need to add the font to your web page. At the top of the page is a selection of the styles you can choose. Check each style that you want on your web page, but beware, more styles add to the load time, as indicated by the meter to the right. Only choose styles that you know you are going to use.

Choose styles

Choose styles. Keep your page load time to a minimum.

Now scroll down. Find where it says “3. Add this code to your website.” Copy the code it gives you and paste it into the head of the HTML of your website. (Use @import if you want to paste it into the CSS instead.)

link font

Copy and paste the link into the head of your HTML.

HTML Paste

The link goes in the head of your HTML, above the link to your stylesheet.

Now find the part of the Google Fonts page that says “4. Integrate the fonts into your CSS.” Copy the code it gives you and paste it into the style of an element in CSS where you want to use the font.

Add this to your CSS where you would normally use a font.

Add this to your CSS where you would normally use a font.

Add the font-family declaration to an element in your CSS, wherever you would normally use a font.

Add the font-family declaration to an element in your CSS.

Now load your web page in a browser. You should see your new web font in effect!

Using Google Fonts is easy and gives you a wide selection of web fonts to work with. If this guide left you with any questions, post a comment and I’ll try to get you an answer. Thanks for reading!


Reputation versus money – How to balance both sides

I’ve been thinking and reading about networking and social media since I want to start connecting to professionals in the web development field. I’m fairly comfortable with HTML and CSS, and I’m looking forward to learning technologies like JavaScript and PHP in the not too distant future. I know some programming at a college sophomore/junior level (Java, C++). If anyone out there is reading this and might want to connect with a new web developer-type person, please contact me here.

So I read this article on the subject of networking and social media. Here are some of my takeaways:

  1. I can build an online network by tweeting and posting on my blog I suppose. I need to get better at it I guess. I think my social media personality is a little flat or something; I’m not really getting any connections this way so far.
  2. The benefits of having connections are job opportunities and people who may need help or could help me on projects. I’d like to get some contacts that might invite me to work on a coding & design project. Maybe I can meet some people during Pixlfest or when I go to a coding related meet up group.
  3. So one of the comments on the article linked in the first paragraph says this: I think that most web designers are more concerned with others designer’s opinions than the client opinion, and that’s a problem if we are talking about someone who the main goal is to make a living designing websites. That’s why I prefer to build a network full of prospects and potential clients, than a network full of fellows and colleagues that are looking for the same thing I am; more customers and more money.I know a lot of designers that are doing amazing jobs, showcased everywhere, and broke, and I know even more designers that are doing mediocre jobs, but their bank accounts are loaded with nice and green money.

My response to this is that I want to be financially successful at the end of the day. I don’t want to do mediocre work, but if there is a service that is in more demand, I want to provide that service effectively. I want to get showcased too or at least if that happens I think that would be great. But I need a job that makes money, not just popularity.

CSS3 Foundations by Ian Lunn (1 – 6): Graceful Degradation and Progressive Enhancement

What is the difference between Graceful Degradation and Progressive Enhancement and why does it matter?

Graceful Degradation means that if a browser doesn’t support the new features of a newer version of CSS, the browser falls back on what it does support and renders the page as it normally would.

Progressive Enhancement does the opposite of graceful degradation. It starts with an older browser and then later adds new features for modern browsers.

Which approach should you use? With all the work being done to push the web forward, it would be a shame for that to to waste. By using graceful degradation, you are putting the future of the web first but making sure there is support for the part of the web that is yet to catch up, too.