Category: Updates
-
Revisiting performance best practices
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…
-
Trying out Fangs – a Firefox screen reader emulator extension
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…
-
Things to add to HTML5 Boilerplate HTML markup
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
-
Creating hi-res icons
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…
-
How to code in HTML and CSS, really?
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…
-
CSS and we still don’t care much about design
…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…
-
Heart-throbbin’ Throbber
What is this? If you say a “loader” you’re right. If you say a “throbber” also right. But this looks more like a throbber: — By the way, for those of you thinking of using animated PNG for throbbers or loaders, browser support is currently bleak.
-
I’m Seeing Red: How the color red is being useful in CSS
So, you want to visualize how large your background is with margins and paddings? Utilize the color “red”. It’s easy to type in the keyboard and it appears instantly like a bright red fruit in the midst of the forest. For example: [code lang=”html” title=”HTML”] <div class="favorite-things"> <ul> <li>Mobile phone</li> <li>Television</li> <li>Couch</li> </ul> </div> [/code]…
-
In CSS, what’s first in Mobile First?
Remember when I suggested that you forget about the CSS while writing the HTML? Now that you’ve got your HTML markup ready, it’s time to mind the CSS. So what’s the first thing to do in applying the Mobile First principle? Forget about the floats Forget about which goes to the left or right. Remember,…
-
Background Check: Use background-color to set the background color
Don’t simply use the shorthand if you want to set only the background color: [code lang=”css” title=”CSS”] div {background:red;} [/code] Because what that really means is: [code lang=”css” title=”CSS”] div {background:none repeat scroll 0 0 red;} [/code] The background values in order are: background-image background-repeat background-attachment background-position background-color One of the conflicts in using the…