Volunteer Work
Categories
0
Comment
I’m being confounded about an article I’ve read about your logo being an image (and not a background image).
You would notice about the differences between the two wherein img puts your actual image on the page and h1 replaces the text with a background image of your logo.
You may be using one method over the other — and to calm your nerves down, Facebook and WordPress use h1 approach while Google and Firefox use img approach (and a whole lot of different combinations for other sites out there).
Now, I won’t go into details about both methods because I’m sure you’re already using one — even different from the two mentioned. What’s important is the answer to “why are we using what we use?”
The answer lies on your priorities:
- You like the underlying text to be the document title of your webpage
- You like the logo to be presented as is — an image of a logo
If you’ve answered the former, then most likely you’re using h1 approach and the latter, img approach.
Personally, the way I test if I’m writing a web document properly is I strip it off everything — images and CSS — and see if it still makes sense from having semantic HTML elements to its document outline. And one of the natural steps in this test is having a heading on top of your document — usually the title of the site — it could be a logo or an photograph with an inscription — but what it represents is more important.
There are lots of combinations in putting up a logo on your webpage — just be conscious of why you’re choosing one approach over the other.
Categories
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
18 April 2013
Step 1: text + semantic tags
Convert the mock-up to plain text and wrap each text to its semantic HTML tag
- write using notepad/simple text editor and save as .html
- no need to write <html><body> etc… begin writing the actual markup of the module you’re assigned to
- don’t use <div> or <span>
- for headings, use only <h1> (no <h2>, <h3>, etc.)
- put everything inside its semantic tag (e.g., if it’s a link, put inside <a>, if it’s a paragraph or a line of text, put inside <p>, etc.)
- write based on your own knowledge (we’ll improve based on your output)
- if you’re unsure which tag to use, use <p>
- forget about the layout/colors, strip down the design to its core content
- open the HTML in a browser to see if the “all-text” content makes sense and usable
- as much as possible, limit your time to only 30 minutes
- check the outline if it is correct: http://gsnedders.html5.org/outliner/
Step 2: Prepare layout structure
Wrap the module and its elements in <div> tags. Use 4-spaces as standard for indentations.
- For modules inside the content area, wrap the module in:
<div class=”mod”>
<div class=”mod-cr”>
Your module in step 1 goes here…
</div>
</div> - For header, wrap the module in:
<header>
<div id=”header-cr”>
Your module in step 1 goes here…
</div>
</header> - For footer, wrap the module in:
<footer>
<div id=”footer-cr”>
Your module in step 1 goes here…
</div>
</footer>
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:
- Use HTML5 Boilerplate
- Create a favicon by adding this line: <link rel=”shortcut icon” href=”img/favicon.ico”>
- Customize Modernizr according to your needs
- Fill-up the meta description in the <head>
- Add the document <title>
- Add a separate stylesheet for your custom styles: <link rel=”stylesheet” href=”css/ui.css”>
- Add Google Analytics
As you go along:
- Convert the design to pure text only
- Wrap each text in semantic HTML tags
- Check the outline of the document if complete
- Check the document structure on a browser if it makes sense from top to bottom
- Wrap the groupings in <div>s and <span>s
- Put the markup blocks inside the skeleton template
- Name the <div>s with ids and classes
- Consider mobile-first styling
- No floats and positioning
- Style first the color and background-color
- Build the design as you go from mobile to wider views
- Check the layout concurrently with IE7 and IE8, if supported
Forms
- Put “for” in <label> and “id” in targeted form elements
- In using tabindex, start with 1
- List down all inline and generic message validation
- Always put <label> in forms for screenreaders
- Don’t forget error messages
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
- Filenames should always be descriptive
- Use dash(-) for separating words not underscore(_), i.e. user-account.html, main-banner.png
- All small letters
Images
- Use png for transparent background images like icons.
- Use image sprite for images with the same sizes instead of separating each image.
Ex. icon-16.png (16x16px icons); icon-32.png (32x32px icons)
Coding
- Use “Tab” key for indention
- Always add comment for every closing tags, mainly divs.
ex. <!- -End Main Div –>
Others
- Make sure all websites are responsive to all smartphones(iPhone, Android, Tablet)
- Always test to all browsers, especially IE
- Favicon(16x16px)
5 December 2012
While marking up, know beforehand which versions of old browsers you will be supporting.
- Check the layout early and often in lower versions of IE, especially IE7 and IE8
Setup notification messages or “notifier”
- stationary messages
- fading messages (similar to a toast in Android)
- make it closer to the form
- if site-wide, have a consistent area where the notifier appears
- yellow for regular notification
- red for error
- blue for information
- green for success
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:
- Valid HTML and CSS markup
- Browser compatibility
- Firefox
- Chrome, Safari
- Opera
- IE 7 to 9 (forget IE6)
- Tablet browsers (iPad, Samsung Galaxy Tab 10.1)
- Mobile browsers (iPhone, Android mobile device)* For Desktop browsers, check both in Mac and Windows 7
- Search engine result — how it would look like when shown in Google search results
- Facebook share view — how it would look like when shared in Facebook
9 July 2012
Guidelines on how to sprite icons for use in sites
- Group icons horizontally
- One file per pixel dimension (16×16, 24×24, 32,32, 48×48)
- Provide three rows per group (for normal, hover, focus)
- Add another group below the last row of the first group
- For additional icons in a group, extend the canvas to the right in an increment depending on the pixel size of the icons (16, 24, 32, 48)
- If an icon is not exactly 16/24/32 in its boundary, align it at the center horizontally and vertically
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 */