Category: Updates

Discussing more about Git. Personally I use GitHub Desktop when working mostly with WordPress.

Padding

Imagine a 16 x 16 px home icon that also has a 16 x 16 px active area. This little thing is prone to be missed upon activating (clicking or tapping) especially when laid out side by side with other active elements with similar dimensions.

See the Pen A Small Icon with a Small Active Area by Brian Dys Sahagun (@BrianSahagun) on CodePen.

Providing ample space around it away from other elements might lessen the chance of mistakenly activating something else but it won’t make it easier to hit. This is where Padding comes in.

Padding refers to increasing, at least to a minimum of 38 x 38 px the dimensions of the active area of an element. This technique prioritizes the usability of that active element in such a way that it is easily clicked by a pointing device or tapped by touch because of it’s big-enough area.

See the Pen A Small Icon with a 38 x 38 px Active Area by Brian Dys Sahagun (@BrianSahagun) on CodePen.

Padding: Responsive Wrap

A type of Padding wherein the active area, apart from having minimum dimensions, its size is being determined by its content. The active area at 38 px is wrapped around a content but if the content is bigger than the minimum of 38 px, the container will respond.

Characteristics

• initial fixed height
• width is determined by content and horizontal padding

[html]

<div class="axn_cr">
<a href="#">
<span class="label">Label</span>
</a>
</div>

[/html]

[css]
a
{
display: inline-block;
padding-left: 1rem;
padding-right: 1rem;
height: 48px;
min-width: 48px;
box-sizing: border-box;
}
[/css]

Related Terms

• Activate
• Active Area
• Active ELement

Here at Phivolcs Building at Diliman, QC attending the Training of Trainers (ToT) for GWT.

Discussing about the WordPress basics.

A common problem in apps is when active elements have active areas the size of the content.

For example, a small text at around 12px will be easy to miss when tapped. Apart from this, it presents anxiety to the user that he/she might miss it when it needs to be tapped.

The solution is simply increasing the size of the active area thru Padding.

See the Pen Increasing the Active Area of FB Likes and Comment by Brian Dys Sahagun (@BrianSahagun) on CodePen.

GWT stands for Government Web Template and I applied to be a trainor for its WordPress version of the template.

I still have to attend a week-long training to complete the accreditation.

Wish me luck!

<a> packs a solid punch when it comes to the world of web.

It can contain information and most of all it is a point of interaction.

You tap it, you click it, you do something to it and it responds.

So it is very important that links, buttons and any active area (clickable, draggable, or can be interacted with) on your web product (websites and webapps) is padded or has enough area to be easily interacted with.

How to pad elements? Simple. Add padding and dimensions (width and height).

Here’s an example:

See the Pen Padding by Brian Dys Sahagun (@BrianSahagun) on CodePen.

Here’s another usage wherein the visual element is actually small but the active area is large enough for pointing devices. You may imagine this as a toolbar icon the size of an ant but the surrounding area is clickable.

See the Pen Padding and Framing by Brian Dys Sahagun (@BrianSahagun) on CodePen.

In the example above, you will notice in the CSS tab that I included Framing. Framing is simply wrapping an element in a <span> or <div> for the purpose of styling it independently from the surrounding elements.

Here’s another example of Framing and Padding a link with fixed dimensions:

See the Pen Padding with Fixed Dimensions by Brian Dys Sahagun (@BrianSahagun) on CodePen.

Real World Example: Main Navigation

See the Pen Padding and Framing Example 1 by Brian Dys Sahagun (@BrianSahagun) on CodePen.

Real World Example: Toolbar

See the Pen Padding and Framing Example 1 by Brian Dys Sahagun (@BrianSahagun) on CodePen.

And finally… a light at the end of the tunnel!

Republic Act No. 10557 – An Act Promoting and Strengthening Filipino Design

Implementing rules and regulations of Republic Act No. 10557, an act promoting and strengthening Filipino design, providing for the purpose a national design policy and renaming the Product Development and Design Center of the Philippines into the Design Center of the Philippines and for other purposes.

I managed to remove the slug “blog” from the main site of my WordPress Multisite.

Now, why would I want that? Simply because my URL is: blog.dys.ph. It it sure looks not ok to have: blog.dys.ph/blog/post-name, right? So I removed it.

Here’s how:

1. In your main site (the one with the “blog” slug), go to Settings > Permalinks (/wp-admin/options-permalink.php)
2. Choose “Default” and Save Changes
3. In your Network Admin Sites (/wp-admin/network/sites.php), edit the main site
4. On the Edit Site page, go to Settings (/wp-admin/network/site-settings.php?id=1)
5. Scroll to Permalinks section and populate the field with this value “/%postname%” (without the quotation marks) and Save Changes
6. Go to the URL of your main site and try it out – the “blog” slug should be gone