Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
377 lines (301 sloc) 21.1 KB
<!DOCTYPE html>
<html lang="en">
<title>Make your site shine in Speed Dial - Dev.Opera</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="google-site-verification" content="L7q_7GF5c9d7ZAUYdfaTiRaB6sTAGv_cRz3nq5DsabM">
<meta name="description" content="Dev.Opera is the ultimate source of distilled knowledge for web developers, covering the latest open web technologies and techniques including HTML5, CSS3, JavaScript, SVG, optimizing content for mobiles, tablets and TVs, and creating add-ons such as extensions and themes for the Opera browser.">
<meta name="keywords" content="Opera, web, HTML5, HTML, CSS3, CSS, JavaScript, SVG, Geolocation, Widgets, Extensions, Unite, Mini, Mobile, web development, design, web design, tutorials, articles, examples, demos, web standards, open standards, open web, video, audio, getusermedia, accessibility, wai-aria, transitions, translations, microformats, microdata, dataset, media queries, viewport, @viewport, transparency, opacity, gradients, box-shadow, text-shadow, web fonts, appcache, websql, local storage, ajax, json, games, userjs, webgl, tv, tablet, emulator, skinning, themes, skins, drasgonfly, mathml, web sockets, operawatir">
<link rel="icon" href="../../../../" type="image/png">
<link rel="apple-touch-icon" href="../../../../" type="image/png">
<link rel="shortcut icon" href="../../../favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="../../../../" type="text/css">
<!--[if IE 6]><link rel="stylesheet" href="/css/browsers/ie6.css" type="text/css"><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="/css/browsers/ie7.css" type="text/css"><![endif]-->
<!--[if IE 8]><link rel="stylesheet" href="/css/browsers/ie8.css" type="text/css"><![endif]-->
<!--[if lte IE 8]><script type="text/javascript" src="/js/ie.js"></script><![endif]-->
<link rel="stylesheet" href="../../../../">
<link rel="stylesheet" media="print" href="../../../../">
<link rel="stylesheet" href="../../../../">
<link rel="alternate" type="application/rss+xml" title="Recent articles - RSS 2.0 Feed" href="../../../feeds/rss/articles">
<link rel="alternate" type="application/atom+xml" title="Recent articles - Atom 1.0 Feed" href="../../../feeds/atom/articles">
<link rel="alternate" type="application/rss+xml" title="Recent articles in Web - RSS 2.0 Feed" href="../../../feeds/rss/articles/web">
<link rel="alternate" type="application/atom+xml" title="Recent articles in Web - Atom 1.0 Feed" href="../../../feeds/atom/articles/web">
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="../../../../"></script>
<style type="text/css">
.collection ul li ul {
display: inherit !important;
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-4118503-4']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
<body class="web">
<header role="banner" class="article-view" >
<a href="../../../index.html" id="logo">Dev.Opera</a>
<form action="" role="search">
<label class="hidden" for="q">Search</label>
<input type="text" name="q" maxlength="256" value="" id="q" required>
<input type="submit" id="q-submit" value="Search" title="Search">
<p id="login">
<a href="../../../../../https/" accesskey="L" title="Log in">Log in</a>
<nav id="nav">
<ul role="menu">
<li role="menuitem" class="selected">
<a href="../../../web.html">Web</a>
<li role="menuitem" >
<a href="../../../addons.1.html">Add-ons</a>
<li role="menuitem" >
<a href="../../../mobile.html">Mobile</a>
<li role="menuitem" >
<a href="../../../tv.html">TV</a>
<li role="menuitem" >
<a href="../../../labs.html">Labs</a>
<section id="content" role="main" class="asideleft">
<section class="main">
<article lang="en">
<h1>Make your site shine in Speed Dial</h1>
<p class="print author">By Tiffany Brown</p>
<p class="note">The mechanisms to optimize Speed Dial icons covered in this article are only supported in Opera 11.10 to 12.16, and do not work in Opera 15 and later.</p>
<h2>Table of Contents</h2>
<li><a href="index.html#intro">Introduction</a></li>
<a href="index.html#use-logo">Using a logo</a>
<li><a href="index.html#html5icons">Icons in HTML5</a></li>
<li><a href="index.html#setanicon">Specifying a Speed Dial icon</a></li>
<li><a href="index.html#multipleicons">Using multiple icons</a></li>
<a href="index.html#tailored-content">Providing tailored content in your Speed Dial entry</a>
<li><a href="index.html#viewmode">Using <code>view-mode:minimized</code></a></li>
<li><a href="index.html#with-x-purpose">Using the X-Purpose header</a></li>
<li><a href="index.html#preview-refresh">Autoreloading content at regular intervals</a></li>
<li><a href="index.html#sdpriority">Speed Dial priority</a></li>
<li><a href="index.html#productsupport">Opera product support</a></li>
<object height="344" width="425"><embed allowfullscreen="true" height="344" src="" type="application/x-shockwave-flash" width="425" allowscriptaccess="never" /><param name="movie" value="" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="never" /></object>
<h2 id="intro">Introduction</h2>
<p>As of version 11.10, Opera for desktop allows content creators to control how their site looks in Speed Dial. By default, Speed Dial uses a screen capture of the web site. But now site owners can specify an icon or serve Speed Dial-specific CSS or content.</p>
<h2 id="use-logo">Using a logo</h2>
<p>This section looks at how to use a custom logo or icon in your Speed Dial.</p>
<h3 id="html5icons">Icons in HTML5</h3>
<p>You&#39;re probably familiar with bookmark icons. They were first introduced with Internet Explorer 5 in 1999. Though not included in the HTML4 spec, browser vendors eventually agreed to <a href="">implement shortcut icons</a> by adding support for <code>icon</code> as a value for the <code>rel</code> attribute of the <code>link</code> element. Apple then extended this to touch devices through <a href=""><code style="word-wrap:none">apple-touch-icon</code></a>. According to the HTML5 specification, <code>icon</code> is now a <a href="">valid, standardized value</a> for the <code>rel</code> attribute.</p>
<h3 id="setanicon">Specifying a Speed Dial icon</h3>
<p>Specifying a Speed Dial icon is very similar to specifying a shortcut icon. Just add a <code>&lt;link&gt;</code> tag in the <code>head</code> section of your document.</p>
&lt;title&gt;My Opera&lt;/title&gt;
&lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; href=&quot;http://path/to/logo.png&quot;&gt;
<p>Speed dial icons must be:</p>
<li>At least 114 pixels wide by 114 pixels high. This is the default minimum icon size and icons smaller than this will be ignored.</li>
<li>A PNG, JPEG or GIF image. SVG images aren&#39;t yet supported. Only the first frame of an animated image will be used.</li>
<p>By default, the maximum icon size is 256 pixels wide by 160 pixels high. Icons larger than that will be resized to fit (<a href="../../../../">icon resize demo</a>). Users can change the default minimum and default maximum settings from the opera:config menu.</p>
<p>As an aside, Opera 11.10 does have legacy support for <code>apple-touch-icon</code>, <code>apple-touch-icon-precomposed</code> and <code>image_src</code>.</p>
<h3 id="multipleicons">Using multiple icons</h3>
<p>You can also specify multiple icons. This is great if you&#39;d like users to receive one icon when they bookmark a page, and another when they add it to Speed Dial.</p>
&lt;title&gt;My Opera&lt;/title&gt;
&lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; href=&quot;http://path/to/128x128image.png&quot;&gt;
&lt;!-- This will be the speed dial icon --&gt;
&lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; href=&quot;http://path/to/200x200image.png&quot;&gt;
<p>If you specify more than one icon, Speed Dial will choose the larger one for its entry (<a href="../../../../">multiple icon demo</a>). If both icons are the same size, the first icon link takes precedence (<a href="../../../../">same size icon demo</a>).</p>
<h2 id="tailored-content">Providing tailored content in your Speed Dial entry</h2>
<h3 id="viewmode">Using <code>view-mode:minimized</code></h3>
<p><img src="../../../../" width="664" height="445" alt="The Speed Dial screen in Opera 11.10" /></p>
<p class="comment">Figure 1: The Speed Dial screen in Opera 11.10</p>
<p>The <a href=""><code>view-mode</code></a> media feature defines a way to specify styles by viewing mode. By using <code>view-mode: minimized</code>, you can provide alternate styles or display content that has been tailored for Speed Dial. The <code>view-mode</code> feature works like other media features, such as <code>device-width</code>. As with any media query, styles should be contained within an <code>@media</code> block.</p>
<code>@media screen and (view-mode: minimized) {
body {
color: #fff;
background: #b20000;
<p>Or you can link to an external style sheet, and set the value of the media attribute to <code>(view-mode: minimized)</code></p>
<code>&lt;link rel=stylesheet type=&quot;text/css&quot; href=&quot;minimizedstyles.css&quot; media=&quot;(view-mode:minimized)&quot;&gt;</code>
<p>See an <a href="../../../../">example of <code>view-mode: minimized</code> at work</a>.</p>
Using <code>view-mode: minimized</code> ensures that your Speed Dial viewport will be at least <strong>256 pixels wide by 160 pixels high</strong>.
<h3 id="with-x-purpose">Using the X-Purpose Header</h3>
<p>It&#39;s also possible to serve a different URL for your Speed Dial entry. This is because every Speed Dial request includes an additional <code>X-Purpose: preview</code> header.</p>
<code>GET / HTTP/1.1
X-Purpose: preview
User-agent: Opera/9.80 (Macintosh; Intel Mac OS X 10.6.6; U; en) Presto/2.8.99 Version/11.10</code>
<p>By detecting that header, you can choose whether to serve a different URL, limit which files are sent to Speed Dial, or display different content. Note that this doesn&#39;t affect the URL that is launched when the user clicks on the Speed Dial entry.</p>
<p>In the example below, we&#39;re using Apache&#39;s mod_rewrite to redirect all Speed Dial requests for any URL to <code>/preview.html</code> instead (you&#39;ll probably want to be more specific than this in the real world).</p>
<code>RewriteEngine On
RewriteCond %{HTTP:X-Purpose} ^preview$
RewriteRule ^(.*) /preview.html
<p>Or maybe you&#39;d rather use a server-side language to conditionally serve different content at the same URL. The example below uses PHP.</p>
if ($_SERVER[&#39;HTTP_X_PURPOSE&#39;] == &#39;preview&#39;) {
// Send Speed Dial content
} else {
// Send regular content
<h3 id="preview-refresh">Autoreloading content at regular intervals</h3>
<p>To make Speed Dial content more dynamic, you can define an autoreloading behavior that will be used if the user adds the site to a Speed Dial slot. You can set this in two ways:</p>
<ol><li><p>Using a <code>meta</code> tag:</p>
<pre>&lt;meta http-equiv=&quot;preview-refresh&quot; content=&quot;3600&quot;&gt;</pre></li>
<li><p>Setting <code>Preview-Refresh</code> as a response header:</p>
<p>Note that the value is set in seconds. 3600 will thus reload the Speed Dial entry every hour.</p>
<h2 id="sdpriority">Speed Dial priority</h2>
<p>Speed Dial gives first priority to <code>view-mode: minimized</code> CSS. If no styles are available, the browser will look for an icon. If no icon is specified or if the file is missing or corrupted, Speed Dial will use a screenshot of the web site — its default behavior.</p>
<h2 id="productsupport">Opera product support</h2>
<p>For now these enhancements are only available to Opera Desktop users.</p>
<h2>Further reading</h2>
<li><a href="">Links from the WHATWG HTML5 specification</a></li>
<li><a href="">View mode media feature specification</a></li>
<section id="author-info">
<h1><a href="../../../author/webinista.html" rel="author">Tiffany Brown</a></h1>
<a href="../../../author/webinista.html" rel="author"><img src="../../../../../https/" alt=""/></a>
<p>Tiffany B. Brown is a freelance web developer based in Los Angeles. </p>
<br class="clear" />
<p id="license" class="info">This article is licensed under a <a href="" rel="license">Creative Commons Attribution 3.0 Unported</a> license.</p>
<section id="comments">
<p class="info">The forum archive of this article is still available on <a href="">My Opera</a>.</p>
<li id="comment-76018332">
<a href="../../../author/SailorMax.html"><img src="../../../../../https/" alt="photo" class="avatar"/></a>
<p class="commenter"><a href="../../../author/SailorMax.html">Maxim</a></p>
<p class="commentdate">Thursday, December 1, 2011</p>
<section class="commentcontent"><span class="bubble-arrow"></span>How to detect &quot;view-mode:minimized&quot; in JavaScript? (without hack with temporary DIV)</section>
<li id="comment-88424052">
<a href="../../../author/jordangray.html"><img src="../../../../../https/" alt="photo" class="avatar"/></a>
<p class="commenter"><a href="../../../author/jordangray.html">Jordan Gray</a></p>
<p class="commentdate">Monday, April 30, 2012</p>
<section class="commentcontent"><span class="bubble-arrow"></span>I was a bit puzzled when clicking &quot;Providing tailored content in your Speed Dial entry&quot; didn&#39;t jump to the heading, until I realised that it links to #content—which is, of course, also the ID of the whole section containing the article! :)</section>
<li id="comment-88567152">
<a href="../../../author/patrickhlauke.html"><img src="../../../../../https/" alt="photo" class="avatar"/></a>
<p class="commenter"><a href="../../../author/patrickhlauke.html">Patrick H. Lauke</a></p>
<p class="commentdate">Wednesday, May 2, 2012</p>
<section class="commentcontent"><span class="bubble-arrow"></span>Jordon...oops, good catch. Fixed.</section>
<li id="comment-97153672">
<a href="../../../author/MA-Maddin.html"><img src="../../../../../https/" alt="photo" class="avatar"/></a>
<p class="commenter"><a href="../../../author/MA-Maddin.html">Martin Schneider</a></p>
<p class="commentdate">Thursday, September 27, 2012</p>
<section class="commentcontent"><span class="bubble-arrow"></span>If you want to use multiple icons, you first have to set speed-dial-icon and then the favicon. Otherwise Opera would use the speed-dial-icon also as favicon!<br /><br />
Example code from
<pre><code>&lt;link rel=&quot;icon&quot; href=&quot;/img/speed_dial-icon.png&quot; type=&quot;image/png&quot;&gt;
&lt;link rel=&quot;apple-touch-icon&quot; href=&quot;/img/touch-icon.png&quot; type=&quot;image/png&quot;&gt;
&lt;link rel=&quot;shortcut icon&quot; href=&quot;/favicon.ico&quot; type=&quot;image/x-icon&quot;&gt;</code></pre></section>
<li id="comment-104125942">
<a href="../../../author/ezabba.html"><img src="../../../../../https/" alt="photo" class="avatar"/></a>
<p class="commenter"><a href="../../../author/ezabba.html">Eros Zabeo</a></p>
<p class="commentdate">Thursday, February 21, 2013</p>
<section class="commentcontent"><span class="bubble-arrow"></span>wouldn&#39;t be a better idea to have rel=&quot;speed-dial&quot; or something similar?<br/>It seems that Opera and Safari use the last rel=&quot;icon&quot; to set the favicon so putting the link to the speed dial icon for first seems a good idea but Chrome and Firefox use the first link and so they show the speed dial icon as the favicon. having a specific rel attribute like the &quot;apple-touch-icon&quot; one, maybe would make things simpler didn&#39;t it?</section>
No new comments accepted.
<section class="info">
<p class="author"><strong>Author</strong> <a href="../../../author/webinista.html" rel="author">Tiffany Brown</a></p>
Friday, March 11, 2011
<p class="tags"><strong>Tags</strong></p>
<ul class="tags">
<li><a href="../../tags/css.html" rel="tag">css</a></li>
<li><a href="../../tags/enhancements.html" rel="tag">enhancements</a></li>
<li><a href="../../tags/html.html" rel="tag">html</a></li>
<li><a href="../../tags/icons.html" rel="tag">icons</a></li>
<li><a href="../../tags/opera.html" rel="tag">opera</a></li>
<li><a href="../../tags/speed&#32;dial.html" rel="tag">speed dial</a></li>
<li><a href="../../tags/view-mode.html" rel="tag">view-mode</a></li>
<li><a href="../../tags/x-purpose.html" rel="tag">x-purpose</a></li>
<a href="../opera-speed-dial-enhancements-zh-cn/index.html">Chinese Simplified</a>,
<a href="../opera-speed-dial-enhancements-de/index.html">German</a>,
<a href="../opera-speed-dial-enhancements-id/index.html">Indonesian</a>,
<a href="../opera-speed-dial-enhancements-ja/index.html">Japanese</a>,
<a href="../opera-speed-dial-enhancements-ru/index.html">Russian</a>,
<a href="../opera-speed-dial-enhancements-es/index.html">Spanish</a>,
<a href="../opera-speed-dial-enhancements-tr/index.html">Turkish</a>,
<a href="../opera-speed-dial-enhancements-vi/index.html">Vietnamese</a>
<script type="text/javascript" src="../../../../"></script>
<script type="text/javascript">hljs.initHighlightingOnLoad();</script>
<section role="contentinfo">
<li><a href="../../../help.html">Help/<abbr>FAQ</abbr></a>
<li><a href=";utm_medium=footer&amp;utm_campaign=devlinks">Terms of service</a>
<li><a href="../../../privacy.html">Privacy</a>