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:

Design Triggers:

Microinteraction Experience:

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:

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 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 or 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 or 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

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 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.

CSS3 Foundations by Ian Lunn

5 Interesting Things I Learned About Browsers

This week I read the first few chapters of CSS3 Foundations. Here are 5 interesting things I learned from the book and a little googling.

  1. Safari, Chrome, and Android browser all use versions of the WebKit engine.
  2. Opera is a Chromium-based browser.
  3. WebKit is is available under a BSD-form license and written in C++. WebKit is a trademark of Apple.
  4. Firefox is a free and open-source web browser developed by the Mozilla Foundation. Firefox uses the Gecko and SpiderMonkey engines.
  5. Internet Explorer was replaced with Microsoft Edge which is included with Windows 10.

Feb. 21 & 23 — CSS Grid Spec

Last week I went to the Donuts and Demos presentation on CSS Grid Spec featuring Chad Henderson. We also read an article on the topic.

  1. In the article, Rachel says “The specification is currently in Working Draft status, and there is an excellent implementation behind a flag in Chrome.” What does Working Draft status mean? What does “implementation behind a flag in Chrome” mean? Hint: Google is your friend.
    • Working Draft status means the new spec is in a early, experimental stage of development. “Implementation behind a flag in Chrome” means that you can turn on the experimental feature, or disable it, using a flag.
  2. Go here and download  Firefox Developer Edition. This should allow you to see the CSS Grid Spec in action in a browser. (Thanks, Tommy, for the tip!)
    • Done.
  3. Chad Henderson took us through Rachel’s nifty site at to learn more about how the new Grid Spec will work. Open up your Firefox Developer Edition and go there now and explore the site. Here’s a video that will show you what to do:
    How to Explore

    • Done.
  4. Now, find two cool things about the CSS Grid Spec on What did you learn and why is it important to you?
  5. What will the benefits of using the new Grid Spec be once it is supported by the browsers?
    • I think it will revolutionize CSS layouts. Right now designers and developers need to use tools like Bootcamp to control their layouts, but the CSS Grid Spec will be better suited to that end. (But Bootcamp won’t be completely replaced as it has other important features.)