What is your favorite color?

Posted on by Jennifer Kyrnin

I find that web design is often about the colors that make up the site. But sites are not always made with the designer’s favorite colors. For example, many of the sites I’ve built have blue or red as their base colors. While I like red better than blue, neither is my favorite color.

Instead, I love the color purple. My son will tell you that purple is my favorite color. But purple is not my only favorite color.

I also love dark greens, especially the vivid deep greens of a coniferous forest.

Do you design sites based solely on the color or colors of the theme? Or do you only design sites using your favorite colors?

Share your favorite colors, up to three. If your favorite isn’t listed, why not share in the comments?

What is your favorite color?

  • green (50%, 1 Votes)
  • purple (50%, 1 Votes)
  • red (0%, 0 Votes)
  • orange (0%, 0 Votes)
  • yellow (0%, 0 Votes)
  • blue (0%, 0 Votes)
  • other... (0%, 0 Votes)

Total Voters: 1

Loading ... Loading ...


Force a Download with HTML5

Posted on by Jennifer Kyrnin

HTML5 is the greatest version of HTML ever! (Well, at least until the next awesome version comes out). I just learned how trivially easy it is to force downloads with HTML5.

I was just trying to force a download of a PDF file because the customers need to sign it and send it back and it’s harder to do that online. I was going to use JavaScript, but decided that I’d do a quick search in case there was a better way.

Forcing Downloads is Easy—HTML5 to the Rescue!

Not only is there a better way, but it’s trivially easy to implement. I just add the keyword download to my anchor and BAM! the browser will pop a dialog box. I haven’t tested it in a lot of browsers (or devices), but it’s still huge! I mean, as a fallback I can attach a download function only to links that have the download keyword in them.

Now my download links look like this:

I’m practically crying, I love HTML5 so much!!!

Are you interested in learning something new?

Posted on by Jennifer Kyrnin

You can learn something new right now from InformIT. And if you use the coupon code SPRINGVID you can save 70% now through May 30, 2017.

You can learn Responsive Web Design or HTML and CSS from me, and for a much cheaper price. There is also the Front End Web Development Complete Video Course that I helped out with.

This is a spectacular deal on all the InformIT videos, not just mine. If you were thinking about learning some new technology, then now is the time to check out the InformIT videos.

Free Video Tutorial: Do you want to add video backgrounds to your pages?

Posted on by Jennifer Kyrnin

This Could Be Your Website

When I first started creating video backgrounds I was surprised to learn that making the video for the backgrounds was the hardest part. So as part of my new video series “Learn Responsive Web Design LiveLessons” I included a lesson on building video backgrounds. And it’s available for you to watch for free.

Video Backgrounds are a Fun and Easy Way to Enhance Your Designs

. . .

Do you want to learn RWD? Do you like video learning?

Posted on by Jennifer Kyrnin

If you answered yes to both these questions, then you’ll be thrilled to learn that my latest video series “Learning Responsive Web Design LiveLessons” will be out soon. This is a 12-lesson video series based on my book Sams Teach Yourself Responsive Web Design in 24 Hours.

I am currently working on the final edits and I hope to see it on the virtual shelves of Informit.com within the next few weeks. This has been a fun project for me to work on as it combines my love of web design with my driving desire to help people make web pages as responsive and accessible as possible.

What “Learning Responsive Web Design” will teach you

. . .

Do Hackers Care About Your Meta CharSet?

Posted on by Jennifer Kyrnin

The other day, I got this question about the meta charset tag in the mail:

“Would you be so kind as to explain to me, in logical terms, how in 7 hecks does the presence of:
<meta charset="utf-8">
is supposed to affect a ‘hacker attack’ in accordance to your book?
I literally cannot imagine hackers caring much about which charset you display on the UI side when attacking.”

This is a great question. The book he’s referencing is Sams Teach Yourself Bootstrap in 24 Hours, and in it I emphasize the importance of using the meta charset tag and placing it as the first element of your <head> element. But while I explain that leaving it out can leave a page vulnerable to hacks, I don’t explain why. But I will now.

. . .

Clip Your Images with CSS clip-path

Posted on by Jennifer Kyrnin

I used to try to clip images using the CSS clip property, but that was so difficult that I typically gave up and got out my image editor. What is the point of spending four hours trying to force an image to clip in CSS when I can do the same thing in Acorn in less than five minutes? But now that clip is deprecated, I don’t have to use it anymore. But better yet, the new CSS  <strong>clip-path</strong> property works so much better!

The clip-path property includes features like:

  • You can apply it to any element, not just absolutely positioned ones
  • You can use SVG to define the clipping path
  • It actually works!

. . .

So Excited about image-set() Notation!

Posted on by Jennifer Kyrnin

As I’ve been writing my next book on forgotten features of CSS, I have been coming across some really cool things. It’s been hard to keep up the writing as I get so excited about actually using the features that CSS provides. Today I was working on  image-set()  and in doing my testing I realized that my dual monitor setup was well equipped for testing this tool.

What is Image-Set()?

You’re probably asking what the heck   image-set()  even is as it isn’t used very often and most designers don’t know much about it. In a nutshell: it is a CSS notation that allows you to define multiple image sources based on the resolution of those sources. The most common usage is for providing a Retina image and a non-Retina image. This way Retina devices see a crisp clean image, and non-Retina devices can show an image that is (hopefully) smaller and better optimized for their viewing.

How to Use Image-Set()

. . .

Posted in CSS

Moving Code Samples to GitHub

Posted on by Jennifer Kyrnin

Things are moving slowly, but they are moving. I have gotten the Bootstrap book code samples up on GitHub. So those of you who wanted to download them all at once, you now can. I’ll be adding the code from my other books to GitHub as soon as I can.

If you notice an error (and they do creep in!) please feel free to let me know by email, comment, or pull request.

Once I get the older books up on GitHub, I’ll start working on getting my latest book’s code up on GitHub. Of course, that book isn’t done writing itself, so one thing at a time.