Author: Brian Dys

Straight from the Inside

What’s really efficient–getting stuck in traffic on a short route or going through the long intestinal insides of the city?

That yummy taste when you’ve got a buy 1 take 1 cheeseburger deal? Yes, it’s the same banana peel that gets a comedy laugh when you slip because of it.

A woman busy with her mobile phone is standing by despite the sign. 20th Ave., Cubao, Quezon City

Morning people notice this–shirtless men walking on the streets to buy gel or something and women carrying towels also walking on the streets.

A shirtless man walking to a store. 20th Ave., Cubao, Quezon City

I’ve learned to play the guitar practicing the song, “Line to Heaven” by Introvoys. It’s a very easy D-A-G-A said my cousin.

A man carrying guitars for sale. B. Serrano Ave., Cubao, Quezon City

Remember that time when all you need is water from the tap? Then a corpse got stuck in one of Manila Water’s pipelines.

A boy waiting by a water delivery tricycle. 19th Ave., Cubao, Quezon City

Once, I’ve used Ajax bar soap on my skin because I took a bath at the laundry area.

Two women taking a bath on the street. 19th Ave., Cubao, Quezon City

Just like roses, rice have come to us in different colors.

A man carrying a sack of rice over his head. Liberty Ave., Cubao, Quezon City

When we were kids, the best stage we’d really like balloons taken home by mom from parties was when they’re already hovering mid-air.

A man selling cartoon character balloons. Liberty Ave., Cubao, Quezon City

Some people, they do not learn the meaning of life–they realize it. I, on the other hand, realized the meaning of couch potato during my six-month stay in our house which turned into my parent’s house after graduation. I was being rooted to the couch sleeping at 4 AM and waking up for lunch.

A discarded chair on the sidewalk. B. Serrano Ave., Cubao, Quezon City

I was told once to never trust anyone with the name Ricky or Randy.

A taxi with “Rickyboy” painted on its back. Ortigas Flyover, EDSA

2013-03-10
Frontend UI Checklist Archive
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:
1. Valid HTML and CSS markup
2. 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
3. Search engine result — how it would look like when shown in Google search results
4. 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
2013-03-06
Nexismetrics Logo

2013-03-01
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
2013-02-22
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 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 */

2013-02-21
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.
1. Write pure text of everything
2. Enclose all texts in semantic HTML tags — don’t use <div> and <span>
3. Add lists — <ul>, <ol>
4. Add headings — use only <h1>
5. Add sectioning elements like <header>, <nav>, <section>
6. Check document outline
—

HTML (weighing on content structure and document outline)
1. Write HTML5 tags
2. No <div>s, no <span>s
3. Check if HTML elements are sematic
4. Check document outline
5. Use <div>s and <span>s for visual design-specific purposes
CSS (weighing on mobile-first layout)
1. Write styles
2. No floats
3. No positions
4. Set color and background-color
5. Set images
6. Looks good on small devices? Move on to the next size
2013-01-25
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 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
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

Fineprint

[/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.
2012-11-22
From vitruvian to breakdancing: The three frontend layers of a webpage
This week, I’m conducting a workshop on basic HTML and CSS at Chikka. Participants come from the corporate communication, creatives, and content teams. For a martian to easily digest a complicated topic such as a webpage, I’ve used a human being as a metaphor for the three frontend layers of a webpage.

Frontend meaning the webpage not needing any database or server — it should launch and run even when all you’ve got are notepad, Internet Explorer 3.0, and zero prepaid load in your EDSA Mail internet dial-up connection account (no internet needed!).

HTML: the structure layer

Think about a simple human body; disregard the color of its skin or the length of its hair or whether it is male or female — god simply made it with a head, body, and legs. No complicated hiphop outfit nor nice slick pompadour; it doesn’t have any flavoring not even vanilla. It’s only a naked human being. That’s our HTML markup — purely focused on the very essence of the structure of the content.

The HTML markup is what you see when you view the source of a webpage or when you open an HTML document in a text editor.

That’s the structure of the content of your document. For example, your webpage is an article about cats, then most probably, the structure of your content is arranged according to this:
- Header
  - Site name
  - Navigation
- Content
  - Cat article
- Footer
  - Copyright information
Of course, each item I enumerated has a corresponding HTML tag like for the header group it is <header>, etc.

It is best to forget about CSS when we’re laying out the structure layer. What all matters here is the structure of your content — don’t you ever write <header> at the bottom of the document because that’s not the correct structure. Header should be at the top, footer at the bottom.

Also, what we should give attention to in laying out the structure layer is semantics. Meaning, if you’ve got some important title or heading in your design, make it <h1> or <h2> depending on the hierarchy of your headings. Don’t use the heading tags for their font sizes; use them to show hierarchy in your headings. <h1> being the most important like the title of your site or the heading of your cat article. Likewise, if you have a list of anything, use <ul> or <ol>.

Open the HTML document in a browser, close your eyes and let someone read your HTML webpage per element from top to bottom, from left to right (or right to left in other cases) and say “next” if you want to proceed to the next element. If it makes sense to you, then most likely you’ve made the right structure.

To somehow test its semantics, you may want to use a screen reader. Everything should make sense to you while listening and “browsing” the content.

CSS: the presentation layer

Now, it’s time to present our naked human being to the world. It needs something to wear. Something like Sailor Moon’s costume.

That’s CSS, short for Cascading Style Sheets. A set of instructions that our HTML document takes to have a visual design like background color and many more.

CSS could also make HTML elements be positioned anywhere on the webpage whether at the left, right, top, or bottom.

JavaScript: the interaction layer

And lastly, whenever you want your vitruvian man to do some break-dancing, add some script.

A practical example is the validation of a form. Of course, we’ve got our content which is a form (HTML) and we’ve dressed it up with spanking gold-colored buttons (CSS), now it’s time to make it show messages when a required field is skipped and to never ever activate the button until the user fills up correctly all the required fields (JavaScript).

Combine all three layers and you’ve got that breakdancing streetdancer.

Minus the baby-kicking.
2012-11-20
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.

2012-11-15
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]

[code lang=”css” title=”CSS”]
.favorite-things li {
margin:1em 0;
padding:1em;
border-bottom:1px solid #ccc;
}
[/code]

Let’s say you want to see how a background-color upon hover would affect an <li> element, you could do this in Firebug or any DOM inspection tool:

[code lang=”css” title=”CSS”]
.favorite-things li {
background-color:red;
}
[/code]

The element would show if you’ve got the correct spacing in your paddings and margins.

2012-11-15