Publishing files to the CIF web server

Connecting from home?

If you are trying to connect to the CIF web server from home, you first need to download, install and run a VPN client. You can download the VPN and find instructions for how to install it at the following link: It is the first one on the list – “QUT Secure AccessService Software (Cisco VPN)”

Anytime you connect to the CIF web server from outside the QUT network you will need to have the VPN software running and connected first.

If you are connecting to the CIF web server from within the QUT network (you are on one of the computers at Uni or on your own computer, connected to the QUT wifi), you don’t need to us the VPN.

Connecting to the CIF web server

There are several methods of connecting to the CIF web server.

If you are Using Mac OSX:

  1. Go to the finder application
  2. Select “Connect to Server” from the “Go” menu 2015-05-13_17-27-39
  3. Type  smb:// into the “Server Address” field and click “Connect”2015-05-13_17-30-22
  4. If prompted for a username and password, select “Registered User” and enter your QUT username and password then click “connect”2015-05-13_17-33-06
  5. A finder window should open up to your personal folder on the CIF web server.  You should see a folder called “public_html” – copy your web site files to this folder.2015-05-13_17-41-01
  6. You should now be able to see your site by opening a web browser and going to the following address:  * Make sure you replace n1234567 with your student id.

If You are Using Windows:

  1. Open a file explorer window by pressing windows+e (the windows key plus the e key)
  2. Type \\  into the address bar and hit enter.2015-05-13_17-51-41
  3. If prompted, enter your QUT username and password then click “OK”2015-05-13_17-53-51
  4. A file explorer window should open up to your personal folder on the CIF web server.  You should see a folder called “public_html” – copy your web site files to this folder.
  5. You should now be able to see your site by opening a web browser and going to the following address:  * Make sure you replace n1234567 with your student id.

Connecting Via an FTP Client

If you prefer, you can connect to the CIF webserver using your favourite FTP client (e.g. Filezilla) with the following details:

  • host:
  • username: your QUT username (student number e.g. n1234567)
  • password: your QUT login password

QUT-CIF FTP details as entered into FileZilla

Web Typography

Download the example files here.

Typography is an oft-overlooked aspect of web design.  As typography is likely to make up a good deal of your content you should invest effort in making that text as communicable to the user as possible.

Typography Conventions

The following article is a good list of basic conventions to which you should adhere (unless you have good reasons not to):

Do’s and don’ts of typographyAs so much of the content available on the web is text it’s essential for web designers to understand the basic principles of good typography. Having such knowledge allows designers to communicate more effectively, enabling them to create better designs and websites that are easier to use.

Embedly Powered

To summarise, the key points are:

  • DO establish a typographic hierarchy
  • DON’T make the text too small
  • DO choose an appropriate font for the body text

  • DON’T use too many different fonts on one page
  • DO give your text room to breathe
  • DON’T make continuous use of all caps
  • DO try and limit paragraphs to 40-60 characters per line
  • DON’T use large amounts of centered text
  • DO make sure there is enough contrast between your text and the background

The following is a more detailed reference of typography conventions and how they apply to web design:

The Elements of Typographic Style Applied to the Web

Embedly Powered

Current Trends in Web Typography

Good typography has always been a defining aspect of effective Web design, and this holds true especially for websites in which the emphasis is on presenting a large amount of content – specifically, articles, news and stories.

Embedly Powered

Sizing Text in CSS

The em is a relative typographic unit, recommended by the W3C.

Due to developers’ habitual reliance on pixel values, I think some of us may not have a full understanding of what the em unit is, and how it works in CSS. As is the case with many topics I write about, I’ll probably learn a thing or two while writing this.

Embedly Powered

The following article discusses the pros and cons of absolute and relative units for text-sizing:

It’s a tug-of-war as old as web design. Designers need to control text size and the vertical grid; readers need to be able to resize text. A better best practice for sizing type and controlling line-height is needed; and in this article, Richard Rutter obligingly supplies one.

Embedly Powered

Take a look at the em_units and text_measure examples.

Styling text in CSS

There’s more to just sizing text in CSS.  Pay attention to line-height (leading), letter spacing, word spacing (tracking), alignment and indentation, font weights and decoration (italics, underline) etc:

This is part four of the five part Blog Font Style series. You’re just about done with this series and you’ve learned a lot! You can find the CSS selectors for your text, specify your font families, and set your font’s size, weight, and style.

Embedly Powered

Take a look at the styling_text example.

The following is an in-depth article about web typography that advocates using a grid to create a consistent vertical and horizontal rhythm to the text:

The Web is 95% typography, or so they say. I think this is a pretty accurate statement: we visit websites largely with the intention of reading. That’s what you’re doing now – reading. With this in mind, does it not stand to reason that your typography should be one of the most considered aspects of your designs?

Embedly Powered

Creating an Information Hierarchy with Typography

Typographic hierarchy can be achieved by using contrasting styles.  This may include contrasting typefaces, sizes, colours, values (different brightness of the same colour) etc, or any combination of these.

The New York Times is a text-heavy and information-dense site that uses several combinations of typographic styles to create a legible information hierarchy as well as consistency across sections of content:

The New York Times website

The New York Times website

Achieving good legibility and readability on the web

My last piece on web typography provided an exhaustive look at getting type to the Web , covering the ins and outs of the technology. Now that we can get the fonts we want rendered on the Web, let’s examine legibility and readability more closely by covering the elementary typographic factors that affect them.

Embedly Powered

via Klepas

Custom Web Fonts with CSS3

Six Revisions Essential Guide to @font-face

Fonts on the Web
The days of being limited to a handful of fonts on the web are very close to being a thing of the past. The problem is no longer a lack of viable solutions, but rather, an abundance of them.

Embedly Powered

A more in-depth article on different options for web typography:

Getting type to the WebGetting type to the Web The last year and a half has seen a rekindling of the interest in web typography, marked by the popularity of sites like (now trending on 67,000+ subscribers) and the growing number of typography articles pertaining to the subject across the web design and development community.

Embedly Powered

via Klepas

Where to get Web Fonts

Font Squirrel also has a webfont generator, which will generate a webfont kit for any font you upload.

Potential issues using web fonts

Typography CSS Frameworks

Typeplate: A Starter Kit For Beautiful Web TypeAs of today we’re pleased to announce Typeplate, a free-range and open-source typographic starter kit that will hopefully help you build beautiful, text-rich websites. The word on the street is that the Web Is 95% Typography, so as we hurtle towards the future, we think there’s still a lot we can learn from five centuries of history.

Embedly Powered

Parallax Scrolling

Parallax animation is a technique where by the illusion of depth is achieved by animating visual elements on different depth planes at different speed.

Disney pioneered the technique in traditional cel-animation with the invention of their multi-plane camera:

The technique of driving parallax animation on web pages using the scroll position has become popular in recent years.

The technique requires JavaScript, because we need to respond to user input (scrolling) in order to drive the animation.

Though there’s nothing stopping you from scripting your own parallax effect from scratch, there are many JavaScript libraries that can help you achieve the effect with minimal additional coding.

I will demonstrate the technique using the skrollr library.  While not the simplest library, it is certainly one of the most flexible, and likely powers many of the more advanced parallax scrolling sites you have seen.  As always, take a look at a few options before you decide which library (if any) is best suited to your needs.

You can download the example files here.

The finished example looks like this.

The example makes use of CSS3 transforms which you can read about here.

Note that skrollr is not just for parallax animation.  It is a general purpose scroll-driven animation library.  You can animate pretty much anything with it.  Take a look at the examples to see what else it can do.