
Hi, I’m Brian Dys — a photographer from the inside looking out · a composer entangled in electronic music · a UX designer · a spouse, a parent, & everything in between.
We’ve been following Yahoo!’s Best Practices for Speeding Up Your Web Site for quite a while now and have been fine in following some of the tips — that we’ve forgotten to extend out our antennas to hear about what’s going on out there in the world of website page load performance.
This one isn’t really that technical but a “perceived performance” — it’s making your JPEGs progressive (basically if it larger than 10k in file size).
There is also an interlaced “Progressive JPEG” format, in which data is compressed in multiple passes of progressively higher detail. This is ideal for large images that will be displayed while downloading over a slow connection, allowing a reasonable preview after receiving only a portion of the data.
Instead of waiting for that JPEG image load line per line, what you would see at first is a pixelated version of the image in full size and it improves its quality as it downloads.
Read more about it in Progressive jpegs: a new best practice by Ann Robson
In a quest to streamline and improve our HTML markup, I’m looking at how the page would appear to a person using an assistive device such as a screen reader.
I’ve installed Fangs – a Firefox extension that “helps developers find accessibility issues in web pages and managers to understand how their website may appear to a person using an assistive device.”
In Fangs preferences, switch the output style to “Sectioned” to have an overview of the sectioning of the HTML document — this is related to checking the outline.
Commenting is disabled.
18 April 2013
Convert the mock-up to plain text and wrap each text to its semantic HTML tag
Wrap the module and its elements in <div> tags. Use 4-spaces as standard for indentations.
This template model provides for the first container to have the display, positions, floats and the second container the width, padding, margin, border.
Apply box-sizing:border-box to the second container to fix the box model.
6 March 2013
So you’ve been developing the front-end all along but you’ve forgotten to setup a Google Analytics for the site. Not too bad, right?
But when you’ve taken for granted the IE browser version 8 and below, that’s when you should acknowledge a headache.
Checkout this list of things to account for when developing the front-end of a website.
To start with:
As you go along:
Add title tag to icons without text labels — in case the user couldn’t decipher which icon he’s hovering on, a tooltip will appear.
Put states in icons — make it position:relative and on :active, put top:1px
Always put a control to remove notification messages away. A “dismiss” link or close button would suffice.
16 January 2013
Filenaming
Images
Coding
Others
5 December 2012
While marking up, know beforehand which versions of old browsers you will be supporting.
Setup notification messages or “notifier”
Always name the main wrapper accordingly. For example:
<div id=”page” class=”page-dashboard”>
Dashboard pertains to the page/screen.
Layering of elements – use position:relative and z-index numbers, 1 being the lowest (under the stack).
19 July 2012
Before launching a website, here are several checkpoints to validate:
9 July 2012
Commenting is disabled.
Editing HTML5 Boilerplate 4.1.0