Showing posts with label Design. Show all posts

Monday, 6 January 2014

The progress element

The progress HTML element was introduced in HTML5 and is used to represents the completion progress of a task. Typically it is displayed as a progress bar but this can be overridden so is up to the web developer.

Developers should make sure it is associated with a label element, especially when the label is not immediately preceding it. To support older browsers that don't support the progress element, a textual description of the progress can be included within the element.

At the time of writing this article, support is pretty good for desktop with the exception of requiring at least IE10, mobile support isn't fantastic though.

Wednesday, 18 December 2013

SVG Stack Overflow icon

Design Stack Exchange SVG

While redoing my social follow icons I realised that there didn't seem to be any SVG version of the Stack Overflow logo on the internet. So naturally I went and put one together! I hope it's useful.

Friday, 13 December 2013

How to remove the default Blogger assets

Blogging CSS Design HTML JavaScript Optimisation

WARNING This is a tutorial designed for expert web developers, following this tutorial can break the template customiser, layout customiser and prevent widgets from being added to your blog. Your blog may also depend on them if you haven't heavily customised the template.

The default Blogger assets have plagued me ever since I started to dive deep into the Blogger template to make my design nicer and to drive the page load time down. A Blogger template requires several tags in the <head> and the editor will refuse to apply the template without them, namely this section.

<b:include data='blog' name='all-head-content'/>
<b:skin>
  <![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Some name
Designer: Some author
URL:      Some URL
----------------------------------------------- */

...A lot of CSS...

  ]]>
</b:skin>
<b:template-skin>
  <b:variable default='960px' name='content.width' type='length'/>
  <b:variable default='0' name='main.column.left.width' type='length'/>
  <b:variable default='310px' name='main.column.right.width' type='length'/>

  <![CDATA[

  ...A lot of CSS...

  ]]>
</b:template-skin>

Friday, 29 November 2013

The q element

Accessibility CSS Design HTML

The q HTML element is used to represent an inline quote. Now regular quotes ("") can represent this just fine, surrounding the quote in the q tag differs in that it explicitly indicates that the text is a quote, removing ambiguities that it could be emphasis, irony, etc.

In addition to explicitly stating that the text is a quote, it also provides a way to consistently style all quotes with minimal markup.

Usage

A quote

To use the q element, surround the quote with the tag. Ensure you do not add quotes in addition to the q tag or they will come through twice.

<p>Gandalf opened the doors to Moria by saying <q>Mellon</q>.</p>

Sunday, 24 November 2013

The samp element

Accessibility CSS Design HTML

The samp HTML element is used to represent (sample) output from a program. It has been around since HTML1, though back it was simply used to markup a sequence of literal characters.

By default samp is an inline element so it won't break the flow of the page, this means that it can be used within a block of text without any problems.

Usage

Inline sample output

The samp element can represent a program's output within a paragraph or block of text by simply wrapping the output in the tag.

<p>The browser will say <samp>404 Page Not Found</samp>.</p>

Monday, 18 November 2013

The kbd element

Accessibility CSS Design HTML

The kbd HTML element is used to represent some form of user input. Typically it represents keyboard input (where its name comes from) but can be used to represent any type of input that can be represented in text, such as voice commands. While it may not be familiar to most web developers it has actually been part of HTML since the first proposal for a specification (HTML1 was 1993!), though the meaning has changed quite a bit since then.

Usage

There are a few different ways to use it as defined by the HTML5 spec.

Keystrokes

The kbd element by itself generally represents a keystroke.

<p>Press the <kbd>Space</kbd> key to continue.</p>

When chaining keys together, ideally you would nest each keystroke within their own kbd element.

<p>Press <kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd> to save.</p>

Saturday, 12 October 2013

CSS multi-coloured rectangular borders

CSS Design

The borders in CSS are weighted equally which means if their colours differ, the split between them will be diagonal. This is the reason that CSS triangles work the way they do. Say your design wanted a more rectangular border though, where the top and bottom extended all the way out and covered the bottom portion of the left and right borders.

You can do this a couple of ways.

Saturday, 16 March 2013

Headers with a vertically-centered horizontal line

CSS Design

Here's a pretty good method of creating a header that has a vertically-centered, horizontal line on the right-hand side of the header. There are a couple of caveats though: it requires a little JavaScript to set an attribute on the headings; and it cannot be used on tiled backgrounds.

Monday, 11 March 2013

Triangles in CSS

CSS Design HTML SASS

Creating triangles with CSS is a pretty good way to reduce the amount of image dependencies within an application. They're a bit tricky to get your head around at first but once you understand them it's really easy.

Drawing a triangle

Lets say we are constructing a triangle to use as an up arrow, the first thing to do is to create an element with a size of 0x0. A bottom border is then applied to element with the colour set to the colour you want the triangle to be. Then we add left and right borders to the element with the colour of transparent.

.triangle {
    border-bottom:15px solid #000;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    width:0;
    height:0;
}

This is what we are given:

Saturday, 12 January 2013

Blog redesign #2

Blogging CSS Design HTML Responsive web design SASS

I only just redesigned the blog back in September, but something has been bugging me since around a week after I did it. The readability completely sucked, I found myself preferring Google Reader or the Blogger backend over reading from the blog itself! Not good...

So I spent a bit of time here and there over the last month or so getting the design just right and then ramping up towards the end with the implementation. I used SASS this time as the changes being made were pretty significant. Here are the results.

Saturday, 29 September 2012

New design!

Blogging CSS Design HTML

I decided to give the blog a major overhaul and redesign the template as previously it was just using a one of the built-in Blogger templates with a few minor alterations. I was originally quite hesitant in modifying the template directly as I didn't really understand how it was put together, the blog has been in place for some time now so I thought it was about time to give it a go.

Most of the redesign was done last week, this week I went through and fixed up all the old posts and a few minor issues that revealed themselves with the styles.

Saturday, 5 May 2012

Use image search for icon ideas everyone understands

Design

I've become a big fan of the idea in user interfaces that images are faster than words, providing of course that the images do actually represent the idea they are trying to communicate. That latter point is incredibly important, if the icons are badly chosen then it just introduces confusion for the user.

If you're stuck thinking how to represent an action in an icon, use image search and select icon as the image size. It doesn't always get immediate results but it will often give you ideas if not.

If that doesn't give you any ideas, try looking up synonyms for the word in an online dictionary and start again.

Growing with the Web

Featured posts

Usage

A quote

Usage

Inline sample output

Usage

Keystrokes

Drawing a triangle