Category: KIB204-Web Interface Design

A QUT course in Web Interface Design.

Using the QUT Intranet Web Host

⋅ KIB204-Web Interface Design ⋅

QUT maintains a web host on the Intranet that you can use to host your projects. As it is on the intranet, it is only viewable to QUT students and staff with authenticated accounts.

This service is an apache instance that allows staff and students the ability to host content out of their shared home drive.

Once you are ready to begin hosting your projects on the QUT Intranet, here is the pertinent information you will need.

The Specs

 

How do I access the directory to store my site files and view the site?

The main page for up to date access details is: https://webhost.ci.qut.edu.au

On this page you should find SMB folder access details to simply mount the remote folder on your Desktop. A more elegant solution is always to configure your FTP application of choice with the settings provided here. This way you can maintain a modicum of version control and sync only the changes since your last update.

Once published, your content is accessed via: https://webhost.ci.qut.edu.au/~username

If you are having difficulty connecting, contact one of your tutors first before logging an IT support ticket. All KIB204 students should have been provisioned access to this server.

How do I establish and configure a MySQL dabatabase?

If you are keen to create MySQL database tables to store pre-populated values your site needs to draw from, or to capture and store user input information, you will want to take these additional steps.

  • CIF MySQL – this service allows the ability to create or change the mySQL password for your databases.
  • phpMyAdmin – this service gives you access to phpMyAdmin running off the faculty’s DB server. Users are able to create and administer databases for web projects.

Wk 7/Tut 6 : Introductory Javascript

⋅ KIB204-Web Interface Design ⋅

[Courtesy of Dave Wallace]

JavaScript is a client-side scripting language.  This means it is downloaded from the web-server and interpreted by the browser itself.  This is in contrast to a server-sidescripting language, like PHP, which is executed on the web-server and then sends the output of that script (usually some HTML) to the browser.

JavaScript allows us, among other things, to manipulate the web page (without reloading the browser window), and respond to events, such as user input.

JavaScript is probably the most widely used programming language in the world.  As such, it a very beneficial skill to have for any web designer.

There are many excellent JavaScript resources available, so I will keep my notes here brief.  I will demonstrate some of the commonly used features of javascript before pointing you to some useful resources for broadening your understanding of this powerful language.

My demonstration will cover:

  • how to include JavaScript in your HTML file
  • alerts
  • outputting information to the web browser’s console
  • comments
  • variables
  • conditional statements
  • loop structures
  • functions
  • arrays
  • Document Object Model (DOM) Manipulation with jQuery
  • event handling with jQuery

More JavaScript Resources

You shouldn’t set out to master the entirety of JavaScript from the outset.  A few hours of studying some of the following resources should give you enough of an understanding of the language to be able to read and modify other examples.  Being the language of the web, there is plenty of example code out there, just a Google away.

 

Exercises

Please download these Javascript example files courtesy of Cassie Selin we will go over.

 

jQuery Repositories

Beyond the extensive list of jQuery functions you can use by calling it’s base library, there are countless repositories of jQuery code written at this point, many of which are free and open-source to use in your projects.

Some Examples to get you started:

  • jQuery Plugin Registry : the official source that is always a good place to start.
  • Nivo Slider : not free, but a a quite robust example of an image slider with solid documentation, style  & options
  • qTip : an advanced tooltip module with tons of UI options.

Wk 3/Tut 2 : Responsive Web Design – Part 1

⋅ KIB204-Web Interface Design ⋅

Responsive Web Design is a term initially coined by web designer/developer Ethan Marcotte. It is now a W3C Candidate Recommendation, ready to be implemented by all modern browser vendors. Following on from support in CSS2 for different media types such as screen and print, it essentially a set of additional media types based mostly on width (or not as widely used height). It could also be considered a subset of a more far-reaching movement called Progressive enhancement – in which all content is designed to gracefully degrade to the lowest common denominator.

Progression of Responsive Approaches

Luke Wroblewski, author of Mobile First, writes and speaks extensively on the subject. In this article he gives an excellent run down of the progression of responsiveness in approaches.

Mostly Fluid

  • larger margins on big screens
  • fluid grids
  • images that scale
  • mainly changes layout in narrowest incarnation by stacking columns (less essential information below)

Column Drop

  • using the same stacking column idea as Mostly Fluid but the width of each column stays mostly consistent.

Layout Shifter

  • Goes further to deliberately craft unique layouts for different screen sizes.

Tiny Tweaks

  • Not really relevant to most websites as it assumes you have a single column layout with few elements and can simply make tweaks to font sizes (larger in smallest screen for easy reading) and image layout (one per line centred in smallest screen for instance).

Off Canvas

  • Move secondary or occasional use information off-screen to slide back in with various triggers.

Choosing Break Points (targeting ranges of or addressing specific Viewports)

Rather than target specific devices, a current list of which would change monthly these days, the general idea is that you consider typical screen widths and at which points to alter your content.

As you set up your Media Queries you must take your actual content into consideration and subjectively apply that to a loose current understanding of where the majority of devices fall in perceived screen dimensions. For instance the iPad with Retina display reches 2048×1536 pixels or 264ppi, however that is an exact doubling of 1024×768 at which content designed for those dimensions will appear completely normal as the iPad intuitively zooms in 200%.

For instance, at the most basic level one could set up a break point right above the size of most smartphones:

@media (min-width: 500px){/*selectors*/{/*properties*}}
@media (max-width: 499px){/*selectors*/{/*properties*}}

For more advanced possibilities check out these articles:

What do you do with the Navigation Menu?

Brad Frost has a great collection of common implementations.

What do you do with Tables?

Responsive Data Table Roundup

Other RWD Resources

Examples:

Articles:

Boilerplates:

Flexible Fonts:

It’s best practice these days to use a fixed Base font size and relative proportions to this for every other declared size. This can be done through either:

  • % – using decimal percentages is not the best choice.
  • Ems – the most compatible and what brings support to IE in general when a viewer may change the font size in their browser and expect all the fonts to change proportionally. You can get caught in calculation problems though when you have multiple nested styles.
  • REMs – most accurate as they always refer back to the Base Font size regardless of their positioning in nested styles. Some compatibility issues with older browsers.

Here are 2 examples of free online tools to help with your calculations:

Responsive Testing:

Responsive Design Exercise – Part 1

Either continue with your developed example from Tutorial 1 Exercise, begin a fresh page (populated by some content from your final project if you have any!), or follow along with Dave Wallace’s example.

Apply the Mostly Fluid approach:

  • fluid column grids
  • make all images flexible with min & max widths.
  • make all fonts adaptive by basing them on EMs or REMs.
  • Create at least 1 Media Query and:
    • Stack at least 1 column below the main content.
    • Make at least one other content change within this query.

Wk 2/Tut 1 : HTML5 & CSS3 Core Review

⋅ KIB204-Web Interface Design ⋅

Basic Review of a Page Structure

The material here is not visible on the page but informs the browser what it is loading, what type of screen it is intended for, and what dependencies it also needs to load (external CSS, javascript, PHP include files, etc.)

DOCTYPE

This tells the browser what type of content it is loading.

<!DOCTYPE html>

Fortunately you don’t need to use this from the past!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict/dtd">

META

Tell the browser what character encoding the page is using.

The rest of your meta tags are optional and we’ll get to that at a later stage.

Link your external support files. For now we are just focusing on your external stylesheet(s) but this is also where you would include javascript files as well.

<link rel="stylesheet" href="style.css">
<link trl="stylesheet" href="normalise.css">

I prefer to add additional ones as import links in the main stylesheet (more on this later).

This brings us to our top level visible components of your page.

HEADER

You normally include introductory elements here such as:

  • Logo
  • tagline
  • branding elements (images)
  • main navigation
  • search
  • other key elements.
  • NAV – specified element of HEADER that states it’s a Navigation Menu

SECTION

  • generally these are used as the container for any larger element of the body of your page that may enclose even more specific elements within. These might be:
  • full-page width
  • multiple columns (left, middle, right – fluid or fixed)
  • multiple rows
  • can contain even more specific elements such as:
  • ARTICLE – an unique element such as a news article, or just think stylistically modular component of a larger body of text or graphics.
  • ASIDE – another unique element such as block quotes, non-essential side information.
  • end page content such as: Copyright Info, maybe text version of nav menu, other top level links that aren’t foreground enough to include in HEADER.
  • might also be broken up in to multiple SECTIONS (e.g. sub-footer, footer)

DIV

DIVs can technically be used for any of the above elements and still validate as HTML5, however the practice going forward is to generally be as specific as possible so the semantic structure is clear to not only Browsers, but Screen Readers for Visually Impaired as well as any potential future interfaces we haven’t conceived of yet! You can still use them for non-specific or repetitive components such as:

  • page wrappers
  • sub sections within sections
  • widgets
  • smaller blocks of text or media that have their own unique style and placement

Any of the above components would of course include an array of:
* Headings
* Captions
* Paragraphs
* Images
* Audio/Video

Cascading Style Sheets (CSS)

Going hand in hand with your HTML is obviously your design markup that we will separate out to an external file.

Where can you include your CSS

There are technically 3 places you can locate your CSS but we are ONLY going to use Option 3 as it is best-practice for numerous reasons that should become obvious.

1. Inline style attributes

This means including directly within your HTML code. This is bad practice as it’s horribly difficult to maintain, you can’t easily change a style across your whole site in one move. But it IS handy occasionally (and temporarily) to quickly try something out without going back and putting it in your css files in the correct order (see Cascade Order below).

Example:

<p style="color: blue;">This is some blue text/</p>

2. In the HEAD

Advantage over inline is it keeps it all in one place (but only on the one page).

Example:

<head>
    <style>
        p { color: blue; }
    </style>
</head>

3. Externally Linked

All your styles succinctly contained in one file, referenced by every page on your site. You can even include other CSS files through the IMPORT function.

Example:

<head>
    <link rel="stylesheet" href="style.css">
</head>

3 Major Types of Selectors

Element Selector

This includes styling your specific elements such as: body, h1, p, a, ul, li, etc.
More advanced usage includes using these as ‘childs’ of another element such as:

p a { text-decoration: underline; }

This would style anchors with an underline, but ONLY if they are inside of a Paragraph.

Class Selector

Class styles should the most common you use after specific Elements. As a general rule, if you think you may want to apply a style to multiple types of elements (such as a uniform color, size, box treatment, etc.) then use a class.

In your HTML:

<p class="blue">blue text.</p>

In your CSS:

.blue { color: blue; }

ID Selector

If your styling an ID there better be a really deliberate reason for using one as they are rigid and CANNOT be re-used within a page. If at all possible: use an ELEMENT, CLASS or even a PSUEDO-CLASS first.

Believe it or not, there’s actually about 27 more possible Selectors or combinations of Selectors! If you’re interested in advanced possibilities, there’s an excellent rundown here

CSS Box Model

Understanding the Box Model will take you a long way towards successful layout and spacing of your page components. Start with the W3C and CSS=Tricks references on this topic.

Some Emerging Web Design Trends

  • Responsive/Adaptive Design
  • Flexbox
  • ???

HTML/CSS Core Principles Review Exercise

For this tutorial’s Exercise plus some additional resources, please refer to Dave Wallace’s tutorial page.

You can download, examine, tweak, break, fix my solution for this exercise:
Tutorial1-Exercise_Solution.zip

Web Design Tools & Resources

⋅ KIB204-Web Interface Design ⋅

Creative Project & Development Tools

Mind Mapping

Outlining

Note Taking

  • Text Edit
  • Notational Velocity (or more popular alternative nvALT)
  • Evernote (collect pictures, links, documents, etc.)
  • A plethora of other options these days.

Documenting your Process

You might consider blogging regularly, for instance on a Blogger, Tumblr or equivalent blogging community, or even better – the blog on your own WordPress site!

Another popular avenue is to post design examples or iterations to niche social networks such as Dribbble (graphic art), Behance (any type of design), or CodePen (code).

Wireframing/Mockups

Roll your own with some pre-prepared wireframe templates:

Prototyping

HTML/CSS (the responsible and responsive way of the future)

  • [Hammer](http://hammerformac.com/“Hammer for Mac – a web development tool for web designers and developers”) – New I haven’t tried it out yet but it looks awesome.

Code Editors

You can essentially use any plain text editor to write code. You could even use MS Word (as long as you save out as plain text format) but that’s kind of like using a mallet to unlock a door(?) I guess you could even write on the back of a napkin and OCR scan it if you had no computing device around you at the time. My point is, it’s the end result of the code in the correct format that matters, not how you get there. So don’t get too caught up in all the possibilities.

But nowadays there are some really excellent tools for the job. Let me review a few I’ve favorited over the years and then come back around to the free app (Komodo Edit) that’s been provided on the lab computers here. Overall I wouldn’t bother if it doesn’t have at a bare minimum: Syntax Coloring, Code Completion, Code Folding (I’ll review all of these later).

Cross-Platform

Sublime Text 3.0 Beta (unlimited free trial, $70)
  • The text editor you’ll fall in love with. That’s actually their byline, but I’ll admit I’m currently very smitten.
  • Currently has a large swath of the coding community behind it who have developed a smörgåsbord of plugins to help you expand it’s functionalities.
  • Available on Mac, Windows or Linux
  • Has an unorthodox Preference system, but once you get used to that it is super super powerful and has numerous ‘keyboard friendly’ time saving features.
  • Incidentally it’s written by an Australian!

Komodo Edit (Free)

  • A free open-source for Mac, Windows, Linux
  • Java app so it going to be a little slow, clunky, security-plagued and not feel like a native app in any OS.
  • Remarkably full-featured with all the bells and whistles you should need.
  • What’s on your lab computers.

All the rest of my suggestions are Mac only, but if you’re on Windows, seriously just get Sublime Text and call it a day.

Mac

TextMate 1.5.xx ($54)
  • Was my environment of choice prior to Sublime Text.
  • Huge mature plugin/bundle library
  • Where the current Sublime Text community flocked from when it became painfully obvious the developer had all but abandoned work on it after a year or so.
  • The 2.0 version that’s been in development for a long time has since become quasi-open source and free to download on GitHub – textmate, where a small group of developers continue to be dedicated to it.
  • Still super-powerful but it’s future is uncertain and the community is not around it anymore if you find that important.
BBEdit 10 ($50)
  • A stalwart in the mac developer community and highly respected. It launched 21 years ago!! so it’s very well thought out, fully developed and fairly up with the times as well.
  • It doesn’t suck ® – no seriously, that’s their motto 😉
Coda 2 ($80)
  • A truly pixel-perfect macalicious application.
  • The editor is integrated with a: file server (for local and FTP remote sync), terminal, code library(?)
  • Open plugin architecture
  • Not as deeply powerful as the above alternatives
  • Focused strongly around HTML/PHP coding, and live-editing files on the server (generally a bad-practice on live sites, but super quick & handy in a development context).
Dreamweaver ($$$)
  • If you have Adobe CS you’ve likely already got this.
  • It’s a lot better in recent versions, but still has been traditionally considered to be a bit too heavy of an app just for web coding (like the MS Word of text processors)
  • You very likely to encounter it in the commercial world though so it’s good to be familiar.

Honorable Mentions

Chocolat ($49)
  • New kid on the block, but worth keeping an eye on
  • Modelled closely around TextMate but lacking many of the deeper features.
Smultron ($5.50)
  • Was free for many years but recently gone paid through the M.A.S.
  • Very clean friendly interface with just the bare essentials.
TextWrangler (Free)
  • The little brother to BBEdit
  • No where near as powerful but a worthy free option.
  • Has a strong diff capability if your other code editor lacks this when you need it.

iOS Mentionables:

Textastic
  • can actually do some serious coding efforts with this.
  • Features include: syntax highlighting, code completion?, ftp server access, Dropbox sync
Diet Coda ($19)
  • a very lightweight companion app to Coda.
  • Not much of a standalone editor as you can’t develop locally on the iPad with it.
  • It’s mainly for editing live files on-the-fly on your server
  • Has a novel AirPreview feature where you can do quick iPad screen previews of the page you’re working on in the desktop version (XScope is a great app for doing just this purpose too).

Diff Tools

Every now and then you’ll find yourself wanting to compare 2 versions of the same file to specifically see what the differences are. What has changed from one iteration to the next. Whether they be:

  • changes you’ve made to your local version and you want to compare to the published live version.
  • those of others on a team and there’s potentially a conflict.

Options Include:

  • A plugin your editor may have available (Sublime Text, Komodo have this at least.)
  • TextWrangler (mentioned above)
  • File Merge (included in the free install of Apple’s XCode Developer Tools)
  • Kaleidosope ($70) – Definitely pricey but it’s amazingly powerful and not only compares differences in text, but also folders and images (for example photos or mockups ).

FTP/SFTP File Server Clients

If you’re hosting your site on an external server you’ll want to have easy remote access to that file space. (S)FTP has traditionally been the way to ‘mount’ a remote server folder on your computer. Some options include:

Transmit
  • Same company, Panic, that makes Coda, Diet Coda. Completely unrelated but they also made my favourite pre-iTunes music player many years ago – Audion (RIP).
Cyberduck (Free)
  • Very full featured, but occassionally buggy connection issues.
FileZilla (Free)
  • Free, open-source
  • Full-featured
  • Cross-platform.

Browsers

For the purposes of this class we’re developing exclusively in HTML5/CSS3 so only the latest versions of these browser matter. In the real world unfortunately we still have to consider older versions of IE (8,7, sometimes 6-egads!) which can often double your development and testing times. You should however have all the relevant web browsers on hand that you can – to test your design/site on:

  • Safari (based on Webkit, which in turn was based on Konqueror from Linux)
  • Chrome (Webkit too but has slight variances in support)
  • Firefox (based on the Gecko engine)
  • Opera (huge change for the better here as they just announced they are going all Webkit).
  • IE – tricky if you’re on a Mac. Options include:
    • running a virtual machine with Windows (takes up a lot of space, truly need 2 instances of Windows so you can test Windows7/8 with IE9–10, plus WindowsXP with IE8 and below). Here’s a totally free option for doing this: http://joemaller.com/2896/ie6-ie7-and-ie8-compatibility-testing-with-microsoft-virtual-pcs/
    • Use some online services (see below).
    • borrow a PC on and off during your testing phase.
    • have a test PC around. A cheap netbook almost costs less than buying Windows and some decent Mac Virtualisation software these day.

Online Multiple Browser Testing

In lieu of having every machine and browser version at your disposal to test, a more recent trend is to rely on sites that have organised the ability to see your pages simultaneously across every possible platform. They worry about maintaining all the systems and you just test your sites in them. Some current options include:

  • Browsershots – (Free) It can be a long wait in between page loads, and it’s missing some browser options but it gets the job done up to a point.
  • Adobe Browser Lab – (Free) A complimentary service of Adobe, comprehensive of latest desktop platforms only (no mobile). Can connect to local server using FireBug or to Dreamweaver or a CMS if you’re a Adobe CS customer.
  • Browserstack. (Paid) – If you’re doing this professionally it’s fully worth the cast as it’s fast, fully comprehensive of all platforms desktop & mobile, can choose different resolutions/orientations and you can even connect it to test live from your local development server.

Plugins for Developing/Testing

  • Firebug (Firefox, Chrome, Safari)
  • Web Developer Toolbar (Firefox, Chrome)
  • Built-in Browser Tools – most of the modern browser have their own built-in developer tools that come quite close and sometimes exceed Firebug. You can typically view the source for HTML, CSS, Javascript, etc. Make live non-destructive edits and see the results immediately. You can even save your modified stylesheets, etc. out externally and replace the one on your server. Chrome is working on making this possible for HTML editing as well, so soon completely developing in the browser will be possible (but maybe not preferable).

Online Resources for self-guided learning

General References

HTML5 Resources

  • HTML5 Reference – even though HTML5 is fast becoming the standard, it is not technically a complete specification yet.
  • HTML5 Rocks – A resource for open web HTML5 developers
  • HTML5 Doctor
  • HTML5 Please – a handy guide to see if an HTML5 feature is implemented in a browser version yet, and possible workarounds.
  • HTML5 Readiness – a scrumptious pie/bar chart that maps the timeline of HTML5 & CSS3 implementation in all the major browsers.
  • Can I use… – another index of specific HTML5/CSS3 elements and if a browser supports them.
  • HTML5 Boilerplate – a front-end template to ensure current and backwards compatibility for your HTML5 project.
  • SwitchToHTML5 – a novel experiment to convert your existing HTML4 content to HTML5.
  • WDG HTML Validator
  • The Working Design Groups validator to test your pages for syntax errors, compatibility and other bugs.

CSS3 Resources

  • W3 CSS – the W3’s dedicated portal to CSS.
  • CSS-Tricks – another popular online magazine dedicated to CSS.
  • CSS3 Please! – a neat sandbox to try out some CSS3 code live in the browser.
  • 960 Grid System – an effort to streamline the dev community by mapping out commonly used dimensions and alignment of elements based on a 12 or 16 column grid. Stuck in time a bit now as servicing the baseline screen dimensions of 1024×768 but still relevant to consider and adapt.
  • Unsemantic CSS Framework – the fluid/responsive successor to 960.gs

Online Courses & Blogs

  • Lynda.com – as QUT students you have free access to all online courses. An excellent, well-respected and very comprehensive archive.
  • net tuts+ – (FREE & PREMIUM) Even with free access there is a large cache of web development tutorials, from beginner to advanced.
  • C<>de School – an independent, fresh approach. You can work on assignments within the browser. Free intro levels but paid after that. Currently running a Free All Access Pass for 48 hours.
  • W3schools.com – You invariably will be inundated with links to this site during your searches. There’s no doubt they have a plethora of information on there. Some of their practices are considered by many however to be misleading and teach false standards and they claim to offer ‘certification’ that isn’t ratified by anyone, and as their name implies — they have no affiliation with the W3C. Google this yourself or check out w3fools.com. In the end, I recommend double-checking alternative solutions/practices at the very least and making you’re own assessment of what to trust here.
  • Smashing Magazine – a very popular online magazine for web design in general.
  • A List Apart – a well respected resources run be developers who forged the current standards. Also run an annual web design conference called An Event Apart.

Podcasts

↑

© 2019 jason shanks
thanks for visiting!