Images, flash, frames. These are the “traditional” methods for making a web site “more interesting” or “better looking.” But these hold-overs from the AOL era are the bane of bandwidth, text-only browsers, and non-visual users.
HTML, of course, was originally written to define the structure of a web page, never it’s design. In essence, HTML was intended to be much like XML today. But, when HTML was created, there were no style-sheets, so HTML was forced to include some design information, like tags and the bgcolor attribute. Developers quickly turned to images, JavaScript, frames, and Flash to make their lives easier, but in the process made everyone else’s life harder.
Images and Flash will both suck bandwidth, so why would you use them to display text or a navigation bar? Save images and Flash for what they’re supposed to be: pictures and animations. Frames reek havoc on text-only browsers and screen-readers (hence the rarely-used <![CDATA[ tag) and have been considered blase web-design for years.</p>
<p>So how can you save bandwidth, insure accessibility, and still get all the effects you want? <abbr title="Cascading Style Sheets.">CSS</abbr>. Let’s go over a few of the quick-and-easy ways to use CSS to replace the bandwidth-heavy, inaccessible design you’re using now:</p>
<p><span style="font-weight: bold">1) Frames: Fixed Sidebars</span><br>
Perhaps the most common use of frames was the sidebar, a window on the left (or right) that contained anything from helpful information to your site’s navigation, appeared on every page, and didn’t scroll with the rest of the site.</p>
<p>If you want to do the same thing, use the CSS “position: fixed” definition. For instance:</p>
<h1 id="sidebarpositionfixedtop0left0width160pxheight100background00f">sidebar { position: fixed; top: 0; left: 0; width: 160px; height: 100%; background: #00f; }</h1>
<p>This will make a non-scrolling, 160-pixel wide sidebar on the left of the screen. (You could always use “right” and “bottom,” too.) Now, in your HTML file, create a <div> with the <tt>id="sidebar"</tt> attribute:</p>
<div id="sidebar"> ...all your links go here... </div>
<p>You can put this anywhere in the HTML source, and it will appear in the correct place. In a good screen-reader, if you put this toward the bottom of the HTML source (for instance, after all the content of the page) then the user would hear the content before having to hear the list of links again.</p>
<p><span style="font-weight: bold">2) Images: Positioning Text</span><br>
This is really just poor web-design. Unless it’s desperately important that you use a particular, rare font, you should never use images to display text. If it’s important that the text appear a certain way or in a certain position, make use of the box-model and nested <div>s. For example, let’s say you wanted a 480-pixel wide layout, regardless of the users’ screen resolution, with a right gutter and a title and slogan in the top-left. You might do something like:</p>
<h1 id="mainwidth480pxheight100margin0autopadding0positionrelativetop0left0gutterwidth120pxheight100margin0padding0borderleft1pxsolid000positionabsolutetop0right0background2c2colorfffheaderwidth360pxmargin0padding6pxpositionrelativetop0left0fontfamilytahomaarialsanseriffontsize140textaligncenter">main { width: 480px; height: 100%; margin: 0 auto; padding: 0; position: relative; top:0; left:0; } #gutter { width: 120px; height: 100%; margin: 0; padding: 0; border-left: 1px solid #000; position: absolute; top: 0; right: 0; background: #2c2; color: #fff; } #header { width: 360px; margin: 0; padding: 6px; position: relative; top: 0; left: 0; font-family: Tahoma, Arial, san-serif; font-size: 140%; text-align: center; }</h1>
<p>With the corresponding HTML:</p>
<div id="main"> <div id="gutter"> ...gutter code here... </div> <div id="header"> <p>Page Title</p> <p>Page Slogan</p> </div> </div>
<p>Which gives something like (borders added to show box model):</p>
<p><img src="http://jamessocol.com/images/screenshot.png" alt="" loading="lazy"></p>
<p>Now, of course, with just a little editing of the CSS file (and none of the HTML) you can move the gutter, change the background, change the page width, change the font, and it’s all in text-format, that will display correctly to text-only or visually-impaired browsers, and save huge percentages of bandwidth.</p>
<p><span style="font-weight: bold">3) Flash: Cool Navigation Bars</span><br>
This gets a little more complicated. In general, it’s hard to define the box around <a> tags, so you’ll probably want to do something like this:</p>
<h1 id="navmargin4pxauto0autopositionrelativetop0left0navuldisplayinlineliststyletypenonenavlidisplayinlineborder1pxsolid000padding2px4px04pxmarginauto4px04pxnavlihereborderbottom1pxsolidfffnavlihoverborderbottom1pxsolidffffontweightbold">nav { margin: 4px auto 0 auto; position: relative; top: 0; left: 0; } #nav ul { display: inline; list-style-type: none; } #nav li { display: inline; border: 1px solid #000; padding: 2px 4px 0 4px; margin: auto 4px 0 4px; } #nav li.here { border-bottom: 1px solid #FFF; } #nav li:HOVER { border-bottom: 1px solid #FFF; font-weight: bold; }</h1>
<p>Now in each <li> tag you’ll make a link to the page you want. This particular set of code gives you a horizontal list. I use a version of this on my <a href="http://projects.jamessocol.com" title="Projects page.">projects page</a>, so you can see it in action. If you remove the <tt>display: inline</tt> parts, you’ll get the vertical list you need for a column. Of course, the margin, padding, and all the colors can be customized however you want, to make it look right. (I got this from the <a href="http://www.alistapart.com">AListApart</a> article “<a href="http://www.alistapart.com/articles/taminglists/">Taming Lists</a>“, which you should read for more information.)</p>
<p><span style="font-weight: bold">So there you go…</span><br>
It’s not all the info you’ll ever need, but it solves three of the most heinous wastes of bandwidth I’ve seen on the web, as well as all the problems people have with accessibility. These methods can both look great, and be completely usable by everyone, something Flash, frames, and images can’t.</p>
<!--kg-card-end: markdown-->
</section>
</article>
</main>
<section class="footer-cta outer">
<div class="inner">
<h2 class="footer-cta-title">Sign up for more like this.</h2>
<a class="footer-cta-button" href="#/portal" data-portal>
<div class="footer-cta-input">Enter your email</div>
<span>Subscribe</span>
</a>
</div>
</section>
<aside class="read-more-wrap outer">
<div class="read-more inner">
<article class="post-card post">
<a class="post-card-image-link" href="/data-sinks-and-logic-floats/">
<img class="post-card-image"
srcset="https://images.unsplash.com/photo-1718214709541-f67a46021cdf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDh8fHN0cmF0YXxlbnwwfHx8fDE3Mjc5MzMzNjl8MA&ixlib=rb-4.0.3&q=80&w=300 300w,
https://images.unsplash.com/photo-1718214709541-f67a46021cdf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDh8fHN0cmF0YXxlbnwwfHx8fDE3Mjc5MzMzNjl8MA&ixlib=rb-4.0.3&q=80&w=600 600w,
https://images.unsplash.com/photo-1718214709541-f67a46021cdf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDh8fHN0cmF0YXxlbnwwfHx8fDE3Mjc5MzMzNjl8MA&ixlib=rb-4.0.3&q=80&w=1000 1000w,
https://images.unsplash.com/photo-1718214709541-f67a46021cdf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDh8fHN0cmF0YXxlbnwwfHx8fDE3Mjc5MzMzNjl8MA&ixlib=rb-4.0.3&q=80&w=2000 2000w"
sizes="(max-width: 1000px) 400px, 800px"
src="https://images.unsplash.com/photo-1718214709541-f67a46021cdf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDh8fHN0cmF0YXxlbnwwfHx8fDE3Mjc5MzMzNjl8MA&ixlib=rb-4.0.3&q=80&w=600"
alt="Photo of mountains showing rock strata."
loading="lazy"
/>
</a>
<div class="post-card-content">
<a class="post-card-content-link" href="/data-sinks-and-logic-floats/">
<header class="post-card-header">
<div class="post-card-tags">
</div>
<h2 class="post-card-title">
Data Sinks and Logic Floats
</h2>
</header>
<div class="post-card-excerpt">In effective layered architectures, data sinks to the bottom, and logic floats to the top. The more narrowly-scoped the logic, the higher it floats. The more permanent the data, the deeper it sinks.</div>
</a>
<footer class="post-card-meta">
<time class="post-card-meta-date" datetime="2024-10-03">Oct 3, 2024</time>
<span class="post-card-meta-length">3 min read</span>
</footer>
</div>
</article>
<article class="post-card post">
<a class="post-card-image-link" href="/advanced-blamelessness-is-owning-mistakes-without-fear/">
<img class="post-card-image"
srcset="https://images.unsplash.com/photo-1617791160536-598cf32026fb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDE2fHxnYWxheHklMjBicmFpbnxlbnwwfHx8fDE3MTk2ODI4NjV8MA&ixlib=rb-4.0.3&q=80&w=300 300w,
https://images.unsplash.com/photo-1617791160536-598cf32026fb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDE2fHxnYWxheHklMjBicmFpbnxlbnwwfHx8fDE3MTk2ODI4NjV8MA&ixlib=rb-4.0.3&q=80&w=600 600w,
https://images.unsplash.com/photo-1617791160536-598cf32026fb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDE2fHxnYWxheHklMjBicmFpbnxlbnwwfHx8fDE3MTk2ODI4NjV8MA&ixlib=rb-4.0.3&q=80&w=1000 1000w,
https://images.unsplash.com/photo-1617791160536-598cf32026fb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDE2fHxnYWxheHklMjBicmFpbnxlbnwwfHx8fDE3MTk2ODI4NjV8MA&ixlib=rb-4.0.3&q=80&w=2000 2000w"
sizes="(max-width: 1000px) 400px, 800px"
src="https://images.unsplash.com/photo-1617791160536-598cf32026fb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDE2fHxnYWxheHklMjBicmFpbnxlbnwwfHx8fDE3MTk2ODI4NjV8MA&ixlib=rb-4.0.3&q=80&w=600"
alt="3D rendered image of a brain in bisexual lighting."
loading="lazy"
/>
</a>
<div class="post-card-content">
<a class="post-card-content-link" href="/advanced-blamelessness-is-owning-mistakes-without-fear/">
<header class="post-card-header">
<div class="post-card-tags">
</div>
<h2 class="post-card-title">
Advanced Blamelessness is Owning Mistakes without Fear
</h2>
</header>
<div class="post-card-excerpt">Blame happens when we stop our investigation with operator error.
Then James restarted the server, which broke everything.
The first step towards a blameless culture is to stop blaming people for things going wrong. (Assuming no malicious actors.)
Then I restarted the server, which I should've known was</div>
</a>
<footer class="post-card-meta">
<time class="post-card-meta-date" datetime="2024-06-30">Jun 30, 2024</time>
<span class="post-card-meta-length">1 min read</span>
</footer>
</div>
</article>
<article class="post-card post">
<a class="post-card-image-link" href="/what-do-you-mean-by-bad-software/">
<img class="post-card-image"
srcset="https://images.unsplash.com/photo-1617440168937-c6497eaa8db5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDJ8fGJhZHxlbnwwfHx8fDE3MTk2NzQ4Nzd8MA&ixlib=rb-4.0.3&q=80&w=300 300w,
https://images.unsplash.com/photo-1617440168937-c6497eaa8db5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDJ8fGJhZHxlbnwwfHx8fDE3MTk2NzQ4Nzd8MA&ixlib=rb-4.0.3&q=80&w=600 600w,
https://images.unsplash.com/photo-1617440168937-c6497eaa8db5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDJ8fGJhZHxlbnwwfHx8fDE3MTk2NzQ4Nzd8MA&ixlib=rb-4.0.3&q=80&w=1000 1000w,
https://images.unsplash.com/photo-1617440168937-c6497eaa8db5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDJ8fGJhZHxlbnwwfHx8fDE3MTk2NzQ4Nzd8MA&ixlib=rb-4.0.3&q=80&w=2000 2000w"
sizes="(max-width: 1000px) 400px, 800px"
src="https://images.unsplash.com/photo-1617440168937-c6497eaa8db5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDJ8fGJhZHxlbnwwfHx8fDE3MTk2NzQ4Nzd8MA&ixlib=rb-4.0.3&q=80&w=600"
alt="Photo of 3 brown eggs in a carton with faces drawn on. One sad, one disapproving, one in the back laughing."
loading="lazy"
/>
</a>
<div class="post-card-content">
<a class="post-card-content-link" href="/what-do-you-mean-by-bad-software/">
<header class="post-card-header">
<div class="post-card-tags">
</div>
<h2 class="post-card-title">
What do you mean by "bad" software?
</h2>
</header>
<div class="post-card-excerpt">(Before I get started, a moment to appreciate this header image and whatever was the genesis of it.)
Engineers will often describe software as "bad"—often with words like "terrible" or "shitty." This invective is hurled at languages like PHP and JavaScript, at frameworks</div>
</a>
<footer class="post-card-meta">
<time class="post-card-meta-date" datetime="2024-06-29">Jun 29, 2024</time>
<span class="post-card-meta-length">2 min read</span>
</footer>
</div>
</article>
</div>
</aside>
</div>
<footer class="site-footer outer">
<div class="inner">
<section class="copyright"><a href="https://www.coffeeonthekeyboard.com">Coffee on the Keyboard</a> © 2024</section>
<nav class="site-footer-nav">
</nav>
<div class="gh-powered-by"><a href="https://ghost.org/" target="_blank" rel="noopener">Powered by Ghost</a></div>
</div>
</footer>
</div>
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<div class="pswp__bg"></div>
<div class="pswp__scroll-wrap">
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share" title="Share"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous">
</script>
<script src="https://www.coffeeonthekeyboard.com/assets/built/casper.js?v=cb1201e8ee"></script>
<script>
$(document).ready(function () {
// Mobile Menu Trigger
$('.gh-burger').click(function () {
$('body').toggleClass('gh-head-open');
});
// FitVids - Makes video embeds responsive
$(".gh-content").fitVids();
});
</script>
</body>
</html>
]]>
