How to Include Icon Fonts in Your Website

Icon fonts are a great way to include small images like social media icons into your website. There are many options to choose from but in this post I tested Glyphter because it was easy to use, required no sign-up and is free. Unlike other services that have large libraries of icons to choose from which warrant their fees and hosting services, to use Glyphter you will need to have your image files designed and ready to go. I created .svg icons using Adobe Illustrator and saved each file separately.

Advantages

1. Icon fonts can be styled just like any standard font using the CSS properties colour, font-size, and pseudo selectors like :hover or :before.
2. They act as inline styles with your text.
3. You only have to load one font to access to many icons instead of having multiple image files.

Disadvantages

1. Font’s are only created in 1 colour. The icons I was originally using were white with a black background but Glyphter automatically cut out the white.
2. Glyphter only supports letters, if you are looking to generate a full custom font with symbols/numbers you will need to look at another service.

How to Use Glyphter

1. From your Finder Menu, drag and drop each icon into a character space on the page.
2. Give your font a name.
3. Enter your email address.
4. Download the font.

Generating a Web Font Kit

Once you have the .ttf file that Glyphter provides you will need to use a web font generator like the one on Font Squirrel. The generator takes the .ttf file and re-creates it as an .eot, .svg, and .woff format, all of which are needed to install all to ensure that thhe font is accessible across all browsers.

1. Click Add fonts.
2. Select the .ttf file you downloaded from Glyphter.
3. Select the ‘Optimal Setting’.
4. Agree to the terms.
5. Click ‘Download Your Kit’.

Embedding the font:

Font Squirel generates the bulletproof @fontface code you will need and puts it in a separate stylesheet.css file.

1. Place the folder font-squirel generated and put it in the root folder of your website and rename it fonts.
2. Open up the stylesheet.css file and copy/paste the @fontface code from their file into your css file. Remove the stylesheet.css file from your folder as you won’t need it any more.
3. In front of the font file names insert fonts/ to make sure it’s got the correct directory name to find the files.
4. Call and style the font just as you would any other.

Peer Coding

Each week we are assigned a project that tests the skills we have learned so far and challenged to work independently, each submitting one project. Instructors are there to help if we run into a bug we cannot fix, but we can also turn to our peers who are usually working through the same challenges. This week instead of working on our own we were assigned a partner – in my case a group of three – and  given the task of completing the project by peer coding. Working together we finished our first JavaScript project and I think we would all agree it was a huge success.

What is Peer Coding?

Peer coding is an exercise where two or three people work together on one computer to complete a project. One person is assigned the role of coding while the others are watching and every 30 minutes you rotate. You might be thinking that it doesn’t make sense logistically to have half of your team just sitting and watching but the point of this exercise was not about finishing the quickest, but about learning from one another.

Coding: The person coding is the only one allowed to type on that computer for the duration of the session. If they run into a problem they can ask their team mate for help but can only be given verbal direction on how to proceed – they there to help but not able to do it for you.

Watching: When you are the person watching you have the opportunity to learn how other people work and if they need help then you are challenged to talk them through it, which sometimes proved more challenging than expected. If you also don’t know the answer you are able to help by doing research on a separate computer.

I found this exercise extremely helpful, especially while working on JavaScript. Unlike typical group work where you divide up a project, work separately and then come back together peer coding requires you to work as a team the entire time. It also means that you can’t divide up a project based on strengths and weaknesses so the opportunity for learning new skills is greater.

Before You Start Writing Code

Taking the time to outline the architecture, layout and style of a website are essential steps to complete before you start writing code. Going through the process of creating a wireframe and a digital mock-up allows designers and developers the chance to troubleshoot any issues that may arise in the browser before a final layout is chosen.

1. Wireframe

The goal of wire framing is to take all of the content outlined by the client and figure out how to best arrange it on the page. Using different colours or shades to help differentiate images, text, navigation or buttons can help to add another layer of information and create hierarchy without having to show the final content. Providing images and typography isn’t necessary at this stage – that is where the style guide comes in – for now this is just layout.

Creating a wireframe can be as simple as drawing with a pencil on paper, however there are some digital options that offer professional services which make it easy to revise and share these initial stages with a client. Below is an example I created using wireframe.cc. The only downside to the free version you see below is the maximum amount of space you have to work with is limited so flushing out more than a homepage would require paying for the upgrade.

Creating a layout is not just about fitting all of the content on the page. As a designer you need consider the story you are trying to tell your reader and organize the content based on the flow of information. Think about the actions you want the user to take and in what steps the content should be provided in.

2. Browser Mockup

After a wireframe is created the next step is to build a responsive mock-up to test how the layout responds in the browser at various sizes. A quick way to do this is by leveraging the pre-established styles of a front-end framework such as Foundation. With the styles already set you can get to work on writing your html and it essentially styles itself. Foundation’s latest version has 3 media queries for mobile, tablet and desktop. Simply defining small, medium or large and the number of columns you want an element to take up will create a layout. Below is an example of how I have used Foundation. Additional rules can been added such as border-radius to make the circles but the basic layout is has been established.

3. Style Guide

Once you have a digital wireframe set up and layout established the next step is to create a style guide. Whether you are recreating the styles defined by a designer or making your own it’s important to set as many of the styles for typography, colour, forms and various media in a file before beginning to build the site. Even if you only have h1-h3 in your site it’s good to establish what h4-h6 would look like so that if they are needed in the future it’s been thought out.

In the end, these tools for wire framing and layout encourage us to get our websites into the browser as soon as possible. Working with media queries and determining breakpoints in the layout during the early stages can help designers and developers create and arrange content with the sites functionality in mind.

Going Responsive

How can you tell if a website is responsive? Adjust the width of your browser window by pulling the right side in and see if the text and layout rearrange. The idea of responsive design has only been around for the last few years and while many companies are starting to implement them, many exist that have not yet made the switch. For the future, I believe it’s essential to build all websites with a responsive layout, as people are increasingly viewing them while not on a desktop.

Statistics demonstrate that:

• 91% of all people on Earth have a mobile phone;
• 56% of people own a smart phone;
• 50% of mobile phone users use this device as their primary Internet source
  (Digital Buzz Blog, 2013, retrieved February 17, 2014, from http://www.digitalbuzzblog.com/infographic-2013-mobile-growth-statistics/)

There are numerous devices available to view a website on, such as desktops, tablets, and mobile devices; within each category are a wide range of screen sizes. It’s challenging to design and develop a website that has only one layout and have a great user experience on every device. Responsive Web Design (RWD) is way of designing and building a website so that the layouts adapt and respond based on the size of the viewing device. Images and font sizes may need to go up or down and a layout may need to be two columns instead of four to help increase readability and function.

What allows the elements to scale up and down is how we set their width. Before website were responsive it was standard practice to set the width of a container or image using pixels—now we are taught to set it using percentages. You still need to set your outer wrapper in desktop mode to a max-width using pixels but everything else inside will be in percentages.

How to Make a Website Responsive

After creating a base CSS for desktop viewing you need to add two things:

1. This line of code must be added to the head of the HTML document in a meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

It tells the browser to look at the type of device we are viewing on, adjust the CSS rules it will apply accordingly, and make the content of our site the same width as the device. This line is essential to have but alone, it will not actually make the site responsive—it just sets it up for the media queries.

2. Media queries are styles that will be used only when the website reaches a particular screen size. After writing your standard CSS you can start with a series of 3 common breakpoints using the @media rule. Here’s what the CSS looks like:

/* Portrait tablet and small desktops */
@media (max-width: 940px) {}

/* Landscape phone to portrait tablet */
@media (max-width: 768px) {}

/* Landscape phones and down */
@media (max-width: 480px) {}

If the screen size is smaller than the pixel number defined, a new set of styles will be applied. One thing to remember is that once a style is applied it will be inherited all the way down to the smallest size unless it’s defined differently in another query. You may need to add more breakpoints depending on the content layout of your site but if it’s built with a modular grid it should be simple to apply.

Typography on the Web

Just a few short years ago developers didn’t have access to web fonts and sites were created using images of type anywhere a custom font was needed. This meant that sites were overloaded with images which would slow down load times and the text contained in those images weren’t able to be read by a screen reader or gathered for SEO. Now we have access to web fonts either through paid subscriptions or free services such as Google Fonts. For designers and developers this means we are able to make sites look and function better.

There’s a short video here on Typecast that explains why choosing the right fonts for online viewing is important. It talks about how fonts conveys a brands message, shows character and personality, and are necessary for creating strong hierarchy. When viewing websites on mobile devices a lot of the content gets stripped away or simplified and the brand’s typeface is the one thing that helps users identify.

How to use a Google Font in your site:

1. Go to http://www.google.com/fonts
2. Browse through their list of options
3. Clicking the blue “Add to Collection” button adds the font to a list you access when complete.
4. Click the “Review” button and you are able to see the font in various sizes and headlines to confirm if it’s right for you.
5. Once you have all of your fonts selected click the “Use” button
6. If the font has several weights available select the ones you need by checking the box.
7. Keep an eye on the gauge on the right side of the page to see how adding several weights will slow down your page load. Only check off the boxes of the weights you need.
8. Scroll down and add the link code to the head of your HTML document, it can go right after the link to your style sheet.
9. To integrate the font in your CSS use the code they supply (e.g., font-family: ‘Balthazar’, serif;).
10. You can access the different weights by using numbers associate with each weight (e.g., Lato Thin would be font-weight: 100;).

Using a Font Stack for Downloaded Fonts

font-family: “Calisto MT”, “Bookman Old Style”, Bookman, “Goudy Old Style”, Garamond, “Hoefler Text”, “Bitstream Charter”, Georgia, serif;

If you choose to download and install a typeface (e.g., Calisto MT) there is the possibility that other users won’t have this font installed on their computer. We need to specify other similar fonts that might be installed so that the browser has other choices to fall back on. If you give no other options that the browser will default to Times New Roman or another serif font. One benefit of using a Google web font is that you don’t have this issue because Google hosts the font and everyone has access to it. The only negative is that you are limited to their selection.

Setting Background Images on Text

Two new properties I explored this week were background-clip and text-fill-color which, allowed me to set images as background on text. I created an example in CodePen using images from Unsplash. Using a bold weight works well as it gives a larger area for the image to show through on.

Kerning in the Browser

Kern.js is a bookmarklet you can add to your browser and click to activate it’s tool bar on any website. Once you choose your tool and select a character on the screen you are able to manipulate it’s size and placement. After you are finished you simply click the checkmark and it supplies you with the code to place in your CSS. The code is essential adding or subtracting the value of the margin property on each character.  You will then need to go back to your html document and give each letters a class that with call your new CSS styles.

    

Why I Use CSS3 to Create Shapes

In week 1 the website I designed had triangles for navigation placed at the bottom of sections as a signal to the user to keep scrolling down for more information. My first solution to creating this triangle was to use Illustrator and draw the shape, save it as an .svg file and use an <img> tag to place it in my document. This is what my HTML code looked like:

<img class=“arrow-down” src=“images/arrowTeal” alt=“arrow pointing down”>

Image of triangle navigation.

It worked great – problem solved. When I first showed my solution to Brenna she said it was a good idea but challenged me to create the same shape using an HTML element and style it using CSS3.

My first thought was – sure I’ll try it but what is the advantage, why is it a better solution? A quick google search later and here is what I found on webmonkey.com.

“One of the best things about CSS3 is that it reduces the need to use images in your designs. That means fewer HTTP requests, fewer bytes to download and fewer files to keep track of.”

These were all great points and in this situation two small triangles aren’t going to slow down my site but it’s good practice to get into trying to style elements in the browser as opposed to Photoshop. To top it off it’s a quicker solution and gives me more flexibility if I want to alter the shape later.

Image Solution:
Open illustrator
Create the shape
Colour the shape
Save the file
Write the <img> in html
Position the <img> in CSS

OR

HTML & CSS Markup:

HTML

<div class="arrow-down teal”></div> /* I’m using two classes here, one for the arrow and one for the colour*/

CSS

.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #FFF;

position: absolute;
top: 0px;
left: 50%;
margin-left: -25px;
}

.teal{
border-top: 20px solid #00e1db;
}  /* I have multiple triangles on my site so I have an additional class for different colour versions*/

The CSS list is long but the beauty lies in it’s ability to be changed at any time in the browser. I can alter the size, colour, width or height separately, round the corners or even make it a different shape all together just by changing the CSS. Using an .svg file for my <img> I was only able to adjust the size.

Another reason I use CSS3 to create shapes is because it’s FUN!

When I first researched the CSS markup to create a triangle I copy and pasted it into a CodePen and started to play around with the property values to see how this code was creating a triangle and what values I could change to alter its shape.

In the same CodePen I started creating circles, squares and playing around with the values to create more shapes. Having all of these shapes on a page sparked the idea to combine them and create something bigger and better – and here’s what I came up with.

Illustration created in CodePen using CSS 3 Shapes.

The illustration is made up of circles, squares and triangles. To overlap and position the elements there are a few more rules I had to apply to each shape on top of the visual styles like colour and size. I had to set

position: All of the elements used to make up the girl have a position value of absolute. All of these elements are inside of a <div> that is positioned relative.

z-index: The z-index is what I used to overlap the elements. Each element will be inherently set at 0 so to send it backwards you set a value of -1 and can go further depending on how many elements you need to position.

Using shapes in CSS to create the HackerYou logo.

I tackled the HackerYou logo after the illustration and used the code for diamonds found on CSS Tricks which I used to overlap and create the angle bracket symbol.

Learning Layout & Hosting my First Website

Over the first three days of class most of the material we covered was a recap for myself. As I’ve mentioned previously in my other blog posts I took a online course last September learning beginner HTML and CSS and have since been challenging myself to learn more on my own. Since we are learning from a new instructor it was helpful to start at the very beginning and review the basic concepts of divs, floats, layout, file structure, etc. as it ensured we would all start building our sites with the same solid framework. During this time I kicked some bad habits, adopted more best practices, learned new rules and by Thursday felt comfortable starting to work on the major project for week-one – developing a one page website.

I attended a personal branding talk that Heather gave just a few months ago in the Ladies Learning Code/HackerYou office space at the Social Centre for Innovation. Since then and especially after receiving acceptance into the HackerYou program I’ve been working on concepts for my personal site which has proven to be one of the most challenging projects I’ve worked on. No one was there to hand me a project brief with copy, images or a strategy. In the end my goal was to create a site that was easy to navigate and reflected my personality and work experience in a friendly and approachable manner.

The criteria for our first project was:

• 1 page
• External css (Including CSS styling in a separate document linked in the header of our index.html)
• box-sizing:border-box (A CSS style that makes borders and margins appear on the in size of an elements set size (width and height) so they don’t make the object larger.
• clearfix (A class that you would place on an element if it had divs inside so that it wraps around all of the enclosed content without using overflow: hidden)
• Header div (my navigation bar)
• Footer div (last div on the page that holds the design/development credits)
• Three divs that hold content (I have several but the 3 main ones are ‘profile’, ‘work’, and ‘connect’. I have nested elements inside those to create 2 and 3 column layouts.

NEW CONCEPTS

The design I choose to build was within our project scope of a one page site but challenged me to learn new concepts that we haven’t discussed in class yet such as:

1. Full bleed layouts
The ‘Header’ ’Profile’ and ‘Contact’ div all have background colours that I wanted to extend the full width of the browser.  To achieve this effect I needed a div with the class of .innerwrapper  which would restrict the max width to 1000 px, constraining the content. .innerwrapper was placed inside of a div with a max width of 100% which allowed the colour to bleed to the full width of the browser.

2. Using .svg files for icons and logos
For my logo and any icons I used .svg files as they give the highest resolution and can be scaled up with out any loss in quality because it is a vector file.

3. Adding a smooth scroll effect with JavaScript
This small amount of java script is what gives the illusion of the page scrolling smoothly when you click the links in the header for ‘Profile’ ‘Work’ and ‘Contact’ and the page scrolls down to the corresponding section. This is the one instance on the page where I have to use id’s instead of classes. Setting an id on an element is limiting as you can only have one of those elements on a page but in the case of a one page site it works well as there is only one of each of these sections.

4. Fixed position header
Setting the position of the header to fixed means it will always appear in the same spot in the browser. This function helps the user navigate a one page layout easily as the links to the various sections are always visible.

5. FTP and hosting
This was my first time purchasing a hosting package and pushing a site live. I’ve accessed ftp’s many times uploading files to printers and retrieving files from clients and suppliers but never connecting to a website server. I purchased the hosting package on Thursday and that night someone called to confirm my registration. Friday I was able to successfully connect and upload my files.

CHALLENGES

I tested my site in Safari, Chrome, and Firefox. Everything appeared OK until the bottom of the page where .wordpress is located (A div featuring a description about my blog). It was being pushed down to another line but only in Firefox. Using the dev tool Inspect Element I was able to see that in Firefox the 20px padding I had added to the wordpress class was making it larger, as if box-sizing wasn’t working. This was frustrating as my first few attempts to fix it had negative effects on the style in Firefox and Chrome.

In the beginning .wordpress had the class of .column3 which I had also used on the right column in .work which was working fine. I also added another class called .wordpress which added a 20px padding. The solution in the end was to take the rules from .colum3 and add them to the class of .wordpress and remove the class of .column3 all together from this div.

PROJECT COMPLETE

We’ve only completed 1 week out of 9 but it has been clear to me since day 1 the advantages of being part of a course such as HackerYou. When you bring together 26 bright, passionate, and creative minds in one space you amplify the opportunity to learn more based on the different experiences each of us bring to the group. Add into that equation a hand full of the most talented mentors and instructors that are teaching us from their own knowledge and work experience and not a dry text book, there is a strong feeling of innovation and forward-thinking.

Although we are all focused on successfully completing our own projects the supportive culture that we’ve managed to build in the short span of a week has amazed me. Other students are asking questions I would never have thought of and I’m sure vice-versa.

My extra-curricular activity for the past 6 months has been teaching myself to code. I was proud of the websites I built as part of my entrance to the course however, seeing what I’ve built this week leaves me confident that this course is the best way to learn to code at a professional level. Not only in terms of content but the tips and tricks we are learning to help improve workflow and efficiency are invaluable. Topics like this aren’t the first thing I wouldn’t been spending my time searching for online when teaching myself to code but they are the additional skills that will make me a smarter and faster developer.

Online Books for Designers & Developers

In the past two years I’ve found the Toronto Public Library to be a great resource in this city. I’m able to try new books without having to invest in a collection that I know I will likely never read again. The library is becoming even more invaluable as it allows members to access books online, which means instant access to materials for free.

I came across a link to Ethan Marcotte’s Responsive Web Design and was delighted to see that it was available and offered as an online book. Wanting to soak up as much information before the start of my course I dove right in and finished reading it one night.

The book is published by A Book Apart, which creates “Brief books for people who make websites”. This book was short and sweet but contained everything I needed to know to get me started. I was able to learn the material one night and start implementing the code into a website the next day. The book was structured well and made it easy to follow along while I took a simple website and made it responsive.

I’m looking forward to reading more titles from this series and would encourage anyone looking to learn more about responsive design and development to take a few hours and read this book.

You Won’t Know Unless You Try

Growing up I was never very interested in math. By the time I got to high school I just wanted to learn the material, get the grade and move on. I had plenty of support from teachers and my parents but I couldn’t see how math would lead me to any kind of career I would be passionate about. I was the creative type; playing piano, drawing, and painting. I even switched high schools to take part in bealart, an art fundamentals program where I spent half of my day in studios such as ceramics, photography, printmaking, and textiles. I loved visual arts and I followed that passion to university where I completed a Bachelor of Design in 2010.

My experience with interactivity courses in the program at York was challenging, overwhelming, and left me thinking that it wasn’t the right path for me, so I stuck to print design. I followed what came natural to me but never challenged myself to continue learning to code because it was hard.

Four years have passed and I can’t believe the difference in my mindset. Six months ago I took an online course to learn to code with the goal of creating an online portfolio of my work. I did this because it was what the industry was demanding of me; everything is online now, everyone has a website. I started out just wanting to learn just enough to make my website and by the time I finished I was on a whole new path.

I discovered that the right program, environment, resources, and teachers made all the difference in how I learned and appropriated this work in relation to my career. It ended up that I decided to not only complete the course, but also continue learning on my own after it was done. The course I took is called Skillcrush and was founded by a woman with a strong vision of helping more women learn these skills and succeed in areas they had no experience in before.

With the right foundation and mindset I searched for similar programs to continue learning in Toronto and found Ladies Learning Code. I signed up for a one-day workshop on mobile design and development and learned how to take an existing desktop site and make it responsive. This experience helped solidify that taking the next step to full time learning was really what I wanted to do. I enrolled in HackerYou’s full time program and believe completing this course will complement my skills as a designer and open the door new opportunities and allow for a lifetime of continuing education.

What I’ve learned:

• The only person holding you back is yourself
• If you change your perception you can accomplish anything to which you put your mind
• You will never learn or discover new things unless you try
• Finding a supportive and collaborative learning environment is crucial to success

New Year, New Chapter

In just over two weeks I will be heading back to the computer lab as a student for a second time. In 2010 I graduated with a Bachelor of Design from York University and Sheridan College and shortly after landed a job with a small firm in Toronto. School was a great place to learn the fundamentals, but I found my time in the industry to be the most valuable education to date.

I have been working full-time for almost four years now designing corporate communications for various clients in industries such as, real estate, not-for-profit, and architecture and design. This experience gave me a chance to work through projects and responsibilities from beginner to more advanced (as I refined my design skills). In this, I learned valuable production skills while working on projects from initial briefing to final delivery.

With the increasing demand for designers with coding skills I signed up for a three week online course to start learning HTML and CSS. After learning the basics and building a simple portfolio website—and really enjoying the material—I signed up for a workshop on mobile development through Ladies Learning Code here in Toronto. After meeting the amazing mentors and instructor I left feeling incredibly motivated about learning to code at a professional level. This then sparked me to think about the job opportunities that exist for individuals with these skills.

This month I will start HackerYou’s full-time front-end development bootcamp with the goal of being able to build functional and responsive websites from my own designs. It was a challenging decision. In weighing the risks of leaving a steady pay cheque versus finishing this up without a job lined up but in the end, I concluded that it was worth the risk. I’ve found something else I’m passionate about learning that will build on my design foundation and am confident that these new skills will help me produce websites that are as equally focused on function as they are on form. I can’t wait to start this new chapter!