Category: Updates
-
Designing the Byline
I’m currently researching on how to design the content structure of article bylines – that section wherein you see the author’s name and the date the article was published. The byline on a newspaper or magazine article gives the date, as well as the name of the writer of the article. Byline from Wikipedia References…
-
Working on HopScotch 3.0
As of this moment, HopScotch has gotten 1,470 downloads since it launched on November last year – and for that, thank you and I hope this theme has been useful for your web sites. I am currently refactoring HopScotch for the following reasons: updates in content structure improvements in standardization (element naming for HTML and CSS)…
-
The Power of the Tooltip
Discovery has always been part of our experience in using web sites and apps. They could be in any form: clicking an ambiguous icon to find out what it does going through multiple pages to find information finding out what’s causing an alert icon beside a label learning and memorizing keyboard shortcuts …and the list…
-
Elements of CSS V2
The Elements of Style Sheets aims to categorize CSS properties into three elements: Nature, Theme, and Layout. It could help a front-end designer’s mental model of building the CSS on top of HTML. Nature Nature refers to the individual characteristics of an element. Display (display) Dimensions (padding, width, height) Theme Theme refers to the visual…
-
Label and Icon Combo
In general, label and icon combination is helpful in making an action easier to remember and depict. Take a look at the left menu of this WordPress Dashboard: And when there are no icons: Without icons, you would need to read the labels one by one until you see what you’re looking for. The icons…
-
Action Padding
The HTML Anchor Element <a> should also stand for “action” since its use is very powerful from being a simple hyperlink to being an element that performs a specific action. Think icons in web apps that are <a> underneath the HTML markup. Link Padding on Actions You might have a 16×16 px icon for a…
-
Link Padding
Link padding simply means adding padding to the HTML Anchor Element <a>. It is important that we don’t leave the link as it is – we must make it large enough to be easily activated by any pointing device (mouse pointer or touch). Let’s take a very simply example – a set of navigation items:…
-
To the Moon and Beyond
Our team in Chikka has officially joined Voyager Innovations! Voyager Innovations, Inc. is part of First Pacific and is a wholly owned subsidiary of Smart Communications, Inc. (Smart) focused on delivering disruptive innovations for the rapidly changing world. In today’s world, the products we sell, how we do things, the way we are structured, the…
-
On Deducing a Web App into a Document
Make example of how simple a semantic markup can be made into a component. Use Search for example. While HTML adjusted for the use of fragmentation in content structure (e.g., Form label scattered across the place and only connected by ID’s and for attributes), as well as ARIA adopted to Web Components to provide meaning…