You’re reading all articles tagged 'windows'

Pinned Sites in Windows 8

15 Feb 2013

The Icon Handbook has a whole chapter devoted to creating Favicons, and the various options you can provide for different contexts, but with the subsequent release of Microsoft’s new OS, Windows 8, there’s another big one for the list! In Windows 7, websites could be ‘pinned’ to the taskbar (which used a 32px resource in the favicon.ico file) but now they can also be pinned to to the start screen, having a special Windows 8 ‘tile’ of their own.

Pinned Site in IE8 without provided imageIf you don’t provide your own tile image, the OS will simply use a light grey version of the IE logo (see right).

However, specifying an image is straightforward, and thankfully doesn’t interfere with any other favicons you may have linked to in the <head> of your page. All you need is a 144×144px transparent PNG, and a background colour for the tile, served via meta tags:

<meta name="msapplication-TileImage" content=“pinned.png”>
<meta name="msapplication-TileColor" content="#ef0303”>

Note that the PNG doesn’t have to be transparent, but it doesn’t cover the whole tile. A square start screen tile is 150×150px, so the 144px square PNG only occupies the top centre area. The best approach is: specify an image for the centre, and background colour in HEX, RGB or CSS named values. If a colour isn’t specified, IE will take the most prominent colour from your site.

IE will take the <title> attribute for tile label, but if you want to provide a shortened tile-friendly title, you can use a meta tag, for example:

<title>Hicksdesign: Design for Print, New-Fangled Media and other wobbly bits</title>
<meta name="application-name" content=“Hicksdesign”>

The PNG doesnt cover the whole tileFinal thing to watch out for: if you fill the entire 144px area, it won’t look vertically centred on the start tile. Sites like BBC News have got around this by leaving the top 56px as whitespace (see right – where the area the PNG covers has been highlighted). The image then looks balanced on the tile!

If you want to delve further into implications of Windows 8 for websites, I can highly recommend this excellent post on the Breaking the Mobile Web Blog. You can also add badge notifications.


Providing CSS for just Internet Explorer

20 Sep 2004

(Disclaimer – although this didn’t turn out to be the valid replacement for the underscore hack that I hoped it was, I thought I’d leave the post here as proof of what happens when you don’t check your facts thoroughly enough. Or more specifically, when you’re so tired, that you confuse a vaild HTML result to be valid CSS – hey ho!)

Today, I had one of those little CSS accidents, which led me to discover that an easy way to provide css for only IE (PC and Mac 5, 5.5 and 6) is to simply to add a comma after the the selector, but before the opening brace:

div, {
	width: 80%;
}

Mozilla, Opera and Safari ignore the rule. It validates too!). I hope this is useful to someone.

The fact that IE 5 Mac applies the rule as well, could reduce its usefulness. If you have time, please test it further and let me know your results.


multiple versions of IE

07 Nov 2003

Everyone’s linking to this, and normally I stay away from repetition of other blogs, but this is far too useful.

As you all know, one of the biggest problems with testing sites on a PC, is that Windows only allows one installation of IE. However, a recent tutorial explained how the patent-friendly version of IE 6 inadvertently provided a way around this. By altering the installation files for IE 5 and 5.5, you could have the 3 last versions of IE on the same PC!

So here comes the really useful bit. Ryan Parman has done the work for you and created standalone versions of IE 5 and 5.5 ready to download. Get them while you can, they may not be up for long.


Instagram Hickstagram

  • 16 Oct 2018

    Inktober day 16 “The Pilot” - a response to @hicksmade’s barber shop poster. Experimenting with a different style on this one #inktober #inktober2018 #leighandjondoinktober #pilot

  • 15 Oct 2018

    Inktober Day 15. @hicksmade’s staircase led me to this. There must be a hairdressers somewhere called this? #inktober #inktober2018 #leighandjondoinktober #hairwaytosteven

  • 14 Oct 2018

    Inktober day 14 - from @hicksmade’s theme of escape, and tonight’s Dr Who, with a return to classic theme: running!. #inktober #inktober2018 #leighandjondoinktober #drwho #pictogram #signage

  • 14 Oct 2018

    Inktober day 13 is more of a doodle as time was very short! There was a bird in @hicksmade’s day 13 so I ran with that. . #inktober #inktober2018 #leighandjondoinktober

  • 12 Oct 2018

    Inktober Day 12. Thinking about @hicksmade’s lumos led me to this “please don’t turn me off…”. #inktober #inktober2018 #leighandjondoinktober #sadlightswitch

  • 11 Oct 2018

    Inktober Day 11. The shape of @hicksmade’s spoons made me think of the Mandrake - a root that looks like a tiny human. There are lots of legends around it, but this one is based on the Harry Potter interpretation. . #inktober #inktober2018 #leighandjondoinktober #mandrake #harrypotter

  • 10 Oct 2018

    Inktober day 10. @hicksmade led with a lovely bee, which made me think of the Jesus and Mary Chain song “Just like honey”. Fancied trying something different so went for a 60s typographical thingy . #inktober #inktober2018 #leighandjondoinktober #honey

  • 10 Oct 2018

    Beautiful morning at North Leigh Common!

  • 09 Oct 2018

    Inktober day 9, as the crow flies. An obvious link from @hicksmade’s scarecrow, but I’m much happier with this one compared to yesterday’s. #inktober #inktober2018 #leighandjondoinktober #crow

  • 09 Oct 2018

    Inktober day 8 and boy am I cross with how this one turned out. It’s utter pants. Supposed to be Bill Murray and Scarlet Johannsen in Lost in Translation, not that you could tell from this. Bill looks like a zombie, and goodness knows what that is on the right. It put me in such a bad mood last night, but I need to let it go and move on. (I even cheated a bit and touched up some bits in Photoshop!). The one bit I’m happy with is his neck, and that’s it. Rant over #inktober #inktober2018 #leighandjondoinktober

Contact us

Call Jon on +44 (0)7917 391536, email or tweet @hicksdesign.

Alternatively, pop in for tea and cake at the studio…

Hicks
Wenrisc House
Meadow Court
Witney, OX28 6ER
United Kingdom