👋 Oi, mga repapips, Brian Dys here! I love music, photography, and creative stuff like UX design and art. This is a place where I collect my thoughts and works. Apart all these, I’m Jaycelle’s better half and Bryce’s dad. 🥰
About Snippet
Categories
0
Comment
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
Categories
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.
Categories
Editing HTML5 Boilerplate 4.1.0
- Edit line: <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1.5“>
- For mobile device browsers, set the initial scale to 100% zoom and limit the zooming to 150%
- New line: <link rel=”shortcut icon” href=”img/favicon.ico”>
- Place your icon inside the img folder
- New line: <link rel=”stylesheet” href=”css/ui.css”>
- Start with a blank stylesheet alongside normalize and main.css
Categories
While we’re waiting for the vector format to come across the web, we’re left to “fake” it out — our images (excluding photographs) times two (x2) to create a high-pixel-density image.
While we’re at it, let’s see how we can consolidate all those icons into one file and in hi-res fashion.
We have website icons sized 16px, 24px, 32px, etc. While laying it out in Illustrator or Photoshop, size wouldn’t really matter — just make it larger than 48 x 48 pixels.
Set out your canvas in a fixed manner — if you’ve settled with 48px, then multiply it by 10 and have a 480px wide canvas. It could contain 10 48px icons across.
In you CSS:
width:32px;
height:32px;
background-size:1000%;
background-position:-32px 0; /* in increments of 32 pixels */
Categories
Update on February 22, 2013
Let’s get to the details on how to write the HTML markup, really.
- Write pure text of everything
- Enclose all texts in semantic HTML tags — don’t use <div> and <span>
- Add lists — <ul>, <ol>
- Add headings — use only <h1>
- Add sectioning elements like <header>, <nav>, <section>
- Check document outline
—
HTML (weighing on content structure and document outline)
- Write HTML5 tags
- No <div>s, no <span>s
- Check if HTML elements are sematic
- Check document outline
- Use <div>s and <span>s for visual design-specific purposes
CSS (weighing on mobile-first layout)
- Write styles
- No floats
- No positions
- Set color and background-color
- Set images
- Looks good on small devices? Move on to the next size
Categories
…but the background colors and font colors.
What to do after writing the HTML markup?
Now that we’ve got the mock-up translated into structured content marked up in semantic HTML, it’s time to paint the town.
This morning, I gave the class a seat work — tear off a page, any page from any magazine and translate it into structured content marked up in semantic HTML. What does that mean?
Say you tore off a car advertisement page — most probably it would have the following elements on it:
- Brand logo
- Tagline
- Headline
- Subhead
- Images
- Paragraph of copy
- Fineprint
Each element we identified has an equivalent HTML element that we could use in marking up the HTML document. For example:
- Brand logo = h1
- Headline = h1
- Subhead= h2
- Paragraph of copy = p
- Images = img
- Fineprint = p
<liTagline = h2
Of course, we would still need to “group” those elements into bigger “boxes” such as:
- header
- div
- footer
With HTML tags, the content could be translated into:
[code lang=”html”]
Brand logo
Tagline
Headline
Subhead
Paragraph of copy
[/code]
Notice the addition of the <div> attribute “role” with the value, “main” — since we don’t have a semantic tag (yet) for a main content in our document, we used “role” to denote the meaning of that div’s content. “Main” simply means “main content”. It is one of the predefined Role values in XHTML. Here’s the complete list of Role values from W3C.