little ways bring some fun, and maybe accessibility, into your sites. :)

custom bullet points

original code found here, but with image.
simple solution, more or less same as above.
downside: screen reader always read these as image.

li { list-style-type: none; position: relative; } li::before { content: url('img_url'); position: absolute; left: -0.8em; }

more complex solution: tinker from this.
with this, screen reader should gloss over image. please note, you need set your own numbers here.

li { list-style-type: none; position: relative; } li::before { position: absolute; left: #em; top: #em; background: url('img_url') no-repeat left center; width: #px; height: #px; content: ''; }

link icons

original code found here.
this page include solution to automatically apply link icons, but prefer this way with classes.
classes make easy add new rule without break others, but on downside, need manually input class to each individual link.

a.external { background: url('img_url') center right no-repeat; padding-right: 13px; }

phone friendly layouts

methods inspire by dannarchy. of course, all this depend on your site's layout.
on phone, patchwork of shadows:

• do not show table of contents sidebar
• ...which means some pages need extra buttons, to show only on phones
• fit only one table cell per line, in tables without special class

general method

specifically, patchwork of shadows look for 3 screen sizes: min-width 1051 pixels, max-width 1050 pixels, and max-width 500 pixels.
1050 pixels ideally catch phones in horizontal mode, and small browser windows.

1050 specific to this layout - otherwise, with padding and image borders, sidebar overlap with content. this can definitely be smaller!

with different screen sizes, some things may need reposition...
@media only screen and (max-width: 1050px) { .class { margin-left: 9%; margin-top: 7%; width: 75%; } }
500 pixels, ideally, catch in specific phones in vertical mode. for screens this small, not bad idea make sure font scale well.
@media only screen and (max-width: 500px) { html, body, a { font-size:1em; } }

hide particular classes

.sidebar { display:none; }

extra buttons

normally, put buttons and other in-page links in sidebar - but on some screens, sidebar do not exist.
with pages that need buttons, then, need two sets. otherwise, users who can not see sidebar can not interact with page. at same time, want make sure that only those users see these buttons, or else some people see double. @media only screen and (max-width: 1050px) { .phone_buttons { width: 100%; } } @media only screen and (min-width: 1051px) { .phone_buttons { display: none; } } how do we apply this? well, only one button set need this class. on patchwork of shadows, sidebar have buttons without class, while article body use this class. compare:
<div class="sidebar" role="complementary"> <button>button 1.</button> <button>button 2.</button> <button>button 3.</button> </div> <div class="article_body" role="main"> article body go here. buttons go below article body, to avoid need scroll back up to select another. <div class="phone_buttons"> <button>button 1.</button> <button>button 2.</button> <button>button 3.</button> </div> </div> ~ wip