• Twitter: billpliske

    • Getting Google Web Fonts to work in Internet Explorer

    Posted on September 10, 2012 by Bill

    While some Google We Fonts work fine across the board, many people have stumbled into problems with IE … i.e., it doesn’t work. When working on my Watchdog project for azcentral.com, I had a menu and main headlines taking advantage of some GWFs. The page looked great in Chrome, Safari, and Firefox. But as the old tale goes, Internet Explorer is usually another story.

    My top gray menu was supposed to look like this:

    But in IE, a font substitution occured, causing my menu to revert from Oswald to sans-serif, breaking it over to the next line … like this:

    The root of the issue is a combination of how Google renders their fonts, and what IE can comfortably translate. It’s not an easy mix. Many times, you’re wanting a specific GWF, but instead, you get the ever-so-sexy Arial.

    Here’s the solution

    • After I found the font I wanted, Oswald, I went to the main GWF “Quick Use” page. Sometimes you’ll want more than one style. If so, you’ll be taking care of your styles one at a time.  For Oswald, I only wanted the heaviest weight, Bold 700. I checked the box next to it.

    • Further down, in the “Add this code to your website” box, copy the href link:

    • Now go to IE, and paste that URL into the browser, as if you’re trying to visit that page.
    • Automatically, a chunk of CSS code pops up. That’s your solution.

    • Take that chunk of code, and paste it into the top of your CSS file.
    • Change one thing. You’ll notice the above chunk of code has the font-family as Oswald. Yet, near the bottom of this code chunk, you’ll notice that the font name is referred to twice more, next to a “local” attribute. Choose that first local name, the one without the hyphen, and make that your top font-family name.
    • So when you’re finished, it looks like this:

     

    If I had chose different versions, like Oswald 200, 300 and 700 … I’d do this routine for each weight, one at a time. And I’d end up with three separate chunks of code (like above) at the top of my external stylesheet.

    Hope this helped!

    Posted in CSS, Design tips, HTML | 1 Comment

    HTML 101: Create a simple web page from scratch

    Posted on September 10, 2012 by Bill

    One of the things I wanted to do when starting this blog, was to occasionally teach something. While I’m constantly learning myself, I’ve taught a few classes on HTML and CSS, and given plenty of pointers to friends and co-workers. Here’s a lesson for the absolute beginner.

    Beginnings

    To many folks who didn’t grow up with technology, websites seems to be a mix of voodoo and black magic. The truth is, it’s much simpler than you might realize. While the early Internet has been around since the mid-1960s, the World Wide Web (and web pages) has only been around since 1989, when Tim Berners-Lee conceived it. Let’s go back to those simpler times for a moment. You’ll see that the basics fora web page really haven’t changed much at all.

    Let’s start by briefly discussing the web browser. Like your Notepad application is good at reading .txt files, Microsoft Word reading .doc files and Photoshop reading .psd files … browsers read (among other things) .html files. When I say good, I mean really, really good. As in, so-good-anyone-can-write-a-file food. Let me show you.

    Your first web page

    I’ll sway to the majority here, and we’ll assume the average person is using Windows on their desktop computer. Click on your Start button, then Accessories, and open Notepad. It doesn’t get much simpler than the Notepad application. It has 1% of what you get with Word … but it’s plenty for what we need to do.

    1. Type “This is my very first web page.” (leave off the quotes)
    2. Under the file menu, choose Save.
    3. When the dialog box comes up, give it a name, followed by .html. In this example, let’s call the file index.html. Save it to your desktop.
    4. You’re done. (seriously)
    5. Open up your web browser of choice (IE, Firefox, Safari, Chrome, etc.). Once the browser is open, go to File, and Open. Find the file you saved to your desktop, and open it.
    6. Congrats! You just made your first web page.

    Now, I didn’t say it was a sexy web page. But this just proves my point that even without using “proper code,” the browser ultimately does what it should … read .html files.

    Tags

    Admittedly, our page was a success. But to build a page that’s actually, well, useful … you’ll need to learn a little code. That code centers around the use of “tags.” Tags are simply tiny chunks of code that help define your content. To define that content, tags typically must “surround” your content. The normal approach you have is:

    • An opening tag <tagname>
    • Followed by your content
    • And we end it with a closing tag. </tagname> (the forward slash signifies the closing tag)

    Let’s start by introducing you to the basic tags that form the structure of most web pages.

    <html>: This is typically the beginning tag you find at the very top of your HTML code. At the very bottom, you’ll find the closing tag, which looks like this: </html>

    <head>: Any code found between the opening and closing <head> tags is your secret sauce. It’s the kind of code that works magic behind the scenes. Things like Javascript, Cascading Style Sheets and others are found inside the <head> tags.

    <title>: The words found in between your two title tags are for your page title. Go to a browser and visit any page. At the top, either in that blue bar, or written in the tab .. you’ll see the wording from the <title> tags. These words play a big role in how your page is defined to search engines, and plays a key role in SEO.

    <body>:  Anything that appears between the opening and closing <body> tags is what appears on a web site. All the headlines, text, images, video, etc… anything you’re seeing on the site? It’s found between <body> and </body>.

    Let’s put it all together

    Now that you know the four main structure tabs, let’s see how they’d look in your index.html file:

    1
2
3
4
5
6
7
8

    <html>
<head>
<title>This is the title of my cool web page</title>
</head>
<body>
This is where my content goes. The headlines, photos and text is here.
</body>
</html>

    That’s pretty much the general structure of a typical HTML page. Save this file, and open it again in a browser. You’ll see that the text inside the <body> tags shows up on your page, and the text in the <title> tags appears in Chrome’s tab.

    Posted in CSS, HTML, Uncategorized | Leave a comment

    How to add Google Web Fonts for a better-designed website

    Posted on September 7, 2012 by Bill

    As a designer, the biggest handicap moving from print to Web was typography. With print, you had endless fonts at your disposal … in truth, too many. But since the beginning of the World Wide Web in 1989 through 2010, designers were limited to Arial, Helvetica, Times, Verdana … you get the idea.

    Web fonts changed it all. One of the easier entry points into web typography has got to be Google Web Fonts (GWF).  I started using them in my projects for azcentral.com early last year, but even then, the font selection was somewhat limited. What a difference a year makes. The font selection has now doubled (maybe tripled), and many typefaces come with a variety of weights.

    As an example, I recently finished designing a project called Boomer 101 for azcentral.com, and the Google web font I chose to use was a typeface called Source Sans Pro. For those of you new to web fonts, I’ll walk you through the process:

    Step 1: Find a font you like

    Source Sans Pro jumped out at me because it came in 12 styles, had a huge contrast between the thinnest and thicker version and it worked well as a headline font.

    Clicking on the “See all styles” link (above) does just what it says, showing you a live preview of each font weight for that typeface. The “Quick-use” link was the key to making GWF’s work on the web site.

    Step 2: Choose your styles, and insert the code

    After clicking on the “Quick-use” link, you’re presented with a new page that takes you through four main steps … the key here is adding this code to your website and integrating the fonts with your CSS.  The first part is adding a link to your chosen typefaces to your website. In my case, the link was:

    <link href=’http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,900′ rel=’stylesheet’ type=’text/css’>

    You’ll need to put this (above) short piece of code near the top of your HTML file, somewhere in between the beginning <head> and closing </head> tags.

    I knew which HTML I wanted to take advantage of these new fonts. For me, it was my topic headers (Family) and main headline <h1> tags.  Before making the final change, my page looked like this:

    Notice that I’m using Arial in the above example. After adding the initial code outlined above into your <head> area, I needed to add the font code to my CSS file. In this case, the code for my headers looked like this:

    font-family: ‘Source Sans Pro’, sans-serif;
    font-weight:200; 

    While the code for the main headlines used a thicker weight:

    font-family: ‘Source Sans Pro’, sans-serif;
    font-weight:900; 

    After uploading my CSS file, my webpage get its updated look:

    Keep in mind that you don’t want to use these fonts all over your website, because at some point they become a resource drain. If abused, they’ll simply slow your site down in the end. So be picky about where you decide to use them, but do use them. It might just be that small bit of polish that truly finishes off a good design.

    Posted in CSS, Design tips, HTML | Leave a comment

    I am an experienced print and web designer living in Goodyear, Arizona ... and I'm for hire! Check out some of my work in the above links.