target=”blank”

June 9th, 2021 No comments

Does that make your eye twitch a little bit? Like… it’s a typo. It should be target="_blank" with an underscore to start the value. As in…

<a target="_blank" href="https://codepen.io">
  Open CodePen in a New Tab
</a>

Welp, that’s correct syntax!

In the case of the no-underscore target="blank", the blank part is just a name. It could be anything. It could be target="foo" or, perhaps to foreshadow the purpose here: target="open-new-links-in-this-space".

The difference:

  • target="_blank" is a special keyword that will open links in a new tab every time.
  • target="blank" will open the first-clicked link in a new tab, but any future links that share target="blank" will open in that same newly-opened tab.

I never knew this! I credit this tweet explanation.

I created a very basic demo page to show off the functionality (code). Watch as a new tab opens when I click the first link. Then, subsequent clicks from either also open tab open that link in that new second tab.

Why?

I think use cases here are few and far between. Heck, I’m not even that big of a fan of target="_blank". But here’s one I could imagine: documentation.

Say you’ve got a web app where people actively do work. It might make sense to open links to documentation from within that app in a new tab, so they aren’t navigating away from active work. But, maybe you think they don’t need a new tab for every documentation link. You could do like…

<a target="codepen-documentation" 
  href="https://blog.codepen.io/documentation/">
  View CodePen Documentation
</a> 

<!-- elsewhere -->

<a target="codepen-documentation" 
  href="https://blog.codepen.io/documentation/">
  About Asset Hosting
</a>

The post target=”blank” appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Categories: Designing, Others Tags:

Meet :has, A Native CSS Parent Selector (And More)

June 9th, 2021 No comments

Parent selector has been on developers’ wishlist for more than 10 years and it has become one of the most requested CSS features alongside container queries ever since. The main reason this feature wasn’t implemented all this time seems to be due to performance concerns. The same was being said about the container queries and those are currently being added to beta versions of browsers, so those performance seems to be no longer an issue.

Browser render engines have improved quite a bit since then. The rendering process has been optimized to the point that browsers can effectively determine what needs to be rendered or updated and what doesn’t, opening the way for a new and exciting set of features.

Brian Kardell has recently announced that his team at Igalia is currently prototyping a :has selector that will serve as a parent selector, but it could have a much wider range of use-cases beyond it. The developer community refers to it as a “parent selector” and some developers have pointed out that the name isn’t very accurate. A more fitting name would be a relational selector or relational pseudo-class as per specification, so I’ll be referring to :has as such from now on in the article.

The team at Igalia has worked on some notable web engine features like CSS grid and container queries, so there is a chance for :has selector to see the light of day, but there is still a long way to go.

What makes relational selector one of the most requested features in the past few years and how are the developers working around the missing selector? In this article, we’re going to answer those questions and check out the early spec of :has selector and see how it should improve the styling workflow once it’s released.

Potential Use-Cases

The relational selector would be useful for conditionally applying styles to UI components based on the content or state of its children or its succeeding elements in a DOM tree. Upcoming relational selector prototype could extend the range and use-cases for existing selectors, improve the quality and robustness of CSS and reduce the need for using JavaScript to apply styles and CSS classes for those use-cases.

Let’s take a look at a few specific examples to help us illustrate the variety of potential use-cases.

Content-Based Variations

Some UI elements can have multiple variations based on various aspects — content, location on the page, child state, etc. In those cases, we usually create multiple CSS classes to cover all the possible variations and apply them manually or with JavaScript, depending on the approach and tech stack.

Even when using CSS naming methodology like BEM, developers need to keep track of the various CSS classes and make sure to apply them correctly to the parent element and, optionally, to affected child elements. Depending on the number of variations, component styles can get out of hand quickly and become difficult to manage and maintain leading to bugs, so developers would need to document all variations and use-cases by using tools like Storybook.

With a relational CSS selector, developers would be able to write content checks directly in CSS and styles would be applied automatically. This would reduce the amount of variation CSS classes, decrease the possibility of bugs caused by human error, and selectors would be self-documented with the condition checks.

Validation-Based Styles

CSS supports input pseudo-classes like :valid and :invalid to target elements that successfully validate and elements that unsuccessfully validate, respectfully. Combined with HTML input attributes like pattern and required, it enables native form validation without the need to rely on JavaScript.

However, targeting elements with :valid and :invalid is limited to targeting the element itself or its adjacent element. Depending on the design and HTML structure, input container elements or preceding elements like label elements also need some style to be applied.

The relational selector would extend the use-case for the input state pseudo-classes like :valid and :invalid by allowing the parent element or preceding elements to be styled based on the input validity.

This doesn’t apply only to those pseudo-classes. When working with an external API that returns error messages that are appended in the input container, there won’t be a need to also apply the appropriate CSS class to the container. By writing a relational selector with a condition that checks if the child message container is empty, appropriate styles can be applied to the container.

Children Element State

Sometimes a parent element or preceding element styles depend on the state of a target element. This case is different from the validation state because the state isn’t closely related to the validity of the input.

Just like in the previous example, :checked pseudo-class for checkbox and radio input elements is limited to targeting the element itself or its adjacent element. This is not limited to pseudo-classes like :checked, :disabled, :hover, :visited, etc. but to anything else that CSS selectors can target like the availability of specific element, attribute, CSS class, id, etc.

Relation selectors would extend the range and use-cases of CSS selectors beyond the affected element or its adjacent element.

Selecting Previous Siblings

CSS selectors are limited by the selection direction — child descendant or following element can be selected, but not the parent or preceding element.

A relational selector could also be used as a previous sibling selector.

Advanced :empty Selector

When working with dynamically loaded elements and using skeleton loaders, it’s common to toggle a loading CSS class on the parent element with JavaScript once the data is fetched and components are populated with data.

Relational selector could eliminate the need for JavaScript CSS class toggle function by extending the range and functionality of :empty pseudo-class. With relational selector, necessary conditions to display an element can be defined in CSS by targeting required data HTML elements and checking if it’s populated with data. This approach should work with deeply nested and complex elements.

CSS :has Pseudo-Class Specification

Keep in mind that :has is not supported in any browsers so the code snippets related to the upcoming pseudo-class won’t work. Relational pseudo-class is defined in selectors level 4 specification which has been updated since its initial release in 2011, so the specification is already well-defined and ready for prototyping and development.

That being said, let’s dive into the :has pseudo-class specification. The idea behind the pseudo-class is to apply styles to a selector if the condition (defined as a regular CSS selector) has been met.

/* Select figure elements that have a figcaption as a child element */
figure:has(figcaption) { /* ... */ }

/ Select button elements that have an element with .icon class as a child */
button:has(.icon) { /* ... */ }

/ Select article elements that have a h2 element followed by a paragraph element */
article:has(h2 + p) { /* ... */ }

Similar to the other pseudo-classes like :not, relational pseudo selector consists of the following parts.

<target_element>:has(<selector>) { /* ... */ }

  • Selector for an element that will be targeted if condition passed as an argument to :has pseudo-class has been met. Condition selector is scoped to this element.

  • A condition defined with a CSS selector that needs to be met for styles to be applied to the selector.

Like with most pseudo-classes, selectors can be chained to target child elements of a target element or adjacent element.

/* Select image element that is a child of a figure element if figure element has a figcaption as a child */
figure:has(figcaption) img { /* ... */ }

/* Select a button element that is a child of a form element if a child checkbox input element is checked */
form:has(input[type="checkbox"]:checked) button { /* ... */ }

From these few examples, it is obvious how versatile, powerful and useful the :has pseudo-class is. It can even be combined with other pseudo-classes like :not to create complex relational selectors.

/* Select card elements that do not have empty elements */
.card:not(:has(*:empty)) { /* ... */ }

/* Select form element that where at least one checkbox input is not checked */
form:has(input[type="checkbox"]:not(:checked)) { /* ... */ }

The relational selector is not limited to the target element’s children content and state, but can also target adjacent elements in the DOM tree, effectively making it a “previous sibling selector”.

/* Select paragraph elements which is followed by an image element */
p:has(+img) { /* ... */ }

/* Select image elements which is followed by figcaption element that doesn't have a "hidden" class applied */
img:has(~figcaption:not(.hidden)) { /* ... */ }

/* Select label elements which are followed by an input element that is not in focus */
label:has(~input:not(:focus)) { /* ... */ }

In a nutshell, relational selector anchors the CSS selection to an element with :has pseudo-class and prevents selection to move to the elements that are passed as an argument to the pseudo-class.

.card .title .icon -> .icon element is selected
.card:has(.title .icon) -> .card element is selected

.image + .caption -> .caption element is selected
.image:has(+.caption) -> .image element is selected

Current Approach And Workarounds

Developers currently have to use various workarounds to compensate for the missing relational selector. Regardless of the workarounds and as discussed in this article, it’s evident how impactful and game-changing the relational selector would be once released.

In this article, we’ll cover two most-used approaches when dealing with the use-cases where relational selector would be ideal:

  • CSS variation classes.
  • JavaScript solution and jQuery implementation of :has pseudo-class.

CSS Variation Classes For Static Elements

With CSS variation classes (modifier classes in BEM), developers can manually assign an appropriate CSS class to elements based on the element’s content. This approach works for static elements whose contents or state won’t change after the initial render.

Let’s take a look at the following card component example which has several variations depending on the content. Some cards don’t have an image, others don’t have a description and one card has a caption on the image.

See the Pen Card variations by Adrian Bece.

For these cards to have the correct layout, developers need to apply the correct modifier CSS classes manually. Based on the design, elements can have multiple variations resulting in a large number of modifier classes which sometimes leads to creative HTML workarounds to group all those classes in the markup. Developers need to keep track of the CSS classes, maintain documentation and make sure to apply appropriate classes.

.card { /* ... */}
.card--news { /* ... */ }
.card--text { /* ... */ }
.card--featured { /* ... */ }

.card__title { /* ... */ }
.card__title--news { /* ... */ }
.card__title--text { /* ... */ }

/* ... */

JavaScript Workaround

For more complex cases, when the applied parent element style depends on child state or element content that changes dynamically, developers use JavaScript to apply necessary styles to the parent element depending on the changes in the content or state. This is usually handled by writing a custom solution on a case-by-case basis.

See the Pen Filter button state by Adrian Bece.

Relational Selector In jQuery

Implementation of relational :has selector has existed in popular JavaScript library jQuery since 2007 and it follows the CSS specification. Of course, the main limitation of this implementation is that the jQuery line needs to be manually attached invoked inside an event listener, whereas native CSS implementation would be a part of the browser render process and automatically respond to the page state and content changes.

The downside of the JavaScript and jQuery approach is, of course, reliance on JavaScript and jQuery library dependency which can increase the overall page size and JavaScript parsing time. Also, users that are browsing the Web with JavaScript turned off will experience visual bugs if fallback is not implemented.

// This runs only on initial render
$("button:has(+.filters input:checked)").addClass("button--active");

// This runs each time input is clicked
$("input").click(function() {
  $("button").removeClass("highlight");
  $("button:has(+.filters input:checked)").addClass("highlight");
})

See the Pen Email inputs — valid / invalid by Adrian Bece.

Conclusion

Similar to the container queries, :has pseudo-class will be a major game-changer when implemented in browsers. The relational selector will allow developers to write powerful and versatile selectors that are not currently possible with CSS.

Today, developers are dealing with the missing parent selector functionality by writing multiple modifier CSS classes that needed to be applied manually or with JavaScript, if the selector depends on a child element state. The relational selector should reduce the amount of modifier CSS classes by allowing developers to write self-documented robust selectors, and should reduce the need for JavaScript to apply dynamic styles.

Can you think of more examples where parent selector or previous sibling selector would be useful? Are you using a different workaround to deal with the missing relational selector? Share your thoughts with us in the comments.

References

Categories: Others Tags:

10 Restaurant Marketing Tips to Survive the COVID19 Pandemic

June 9th, 2021 No comments

Due to the Coronavirus pandemic hitting restaurants hard, owners had to adapt to survive.

To ensure you sell food and make a profit in these trying times, you need to update your restaurant marketing strategy to fit the current climate. Below, you will find actionable tips that you can use to hit refresh on your marketing efforts.

10 Restaurant Marketing Tips to Use During COVID19

1. Keep in constant touch with your customers

One of the worst things about this pandemic is that it has put a wedge between restaurants and their clients by limiting face-to-face interactions. That’s why you need to capitalize on online communication. Use your website and social media profiles to keep customers informed about any changes to your menu, opening hours, cleaning routine, and more.

Don’t forget to also update your restaurant profiles on third-party websites like Google My Business and TripAdvisor. Wherever customers may stumble upon your restaurant, they should have enough information to make an informed decision. Can they dine in-restaurant or order food online? This brings us to the next point.

2. Start selling your food online

If you’re not offering delivery yet, it’s time to start. First, find a restaurant ordering system that best fits your needs. Then, enable customers to place food orders on your website, which is preferable to using a third-party delivery app because you keep all the profits. You can also take orders on your Facebook page by using Facebook’s ‘Start Order’ button.

If you don’t have a website for your restaurant yet, it’s mandatory that you create one since most of your customers will come from online marketing efforts. And don’t worry if you don’t have any IT knowledge. You can use a restaurant website builder to generate a sales-optimized website without spending a fortune.

3. Revamp your menu to make it more delivery-friendly

The next step in setting up your food delivery business is to look at your current menu and see if every item is suitable for delivery. Some dishes don’t travel well. Instead of sacrificing customer experience, it’s best that you remove them from the delivery menu and replace them with more suitable items.

For example, many restaurants are now selling meal kits and family bundles. These are great for two reasons. They travel well, and they provide enough food to feed an entire family while also giving them a fun activity to do.

4. Sell alcohol to-go

If your local regulations allow it, you can also start delivering alcohol with your meals. That can be beer and wine or cocktail kits that customers can put together at home. People miss going out for drinks as much as they miss a meal at their favorite restaurant, so be there for them.

5. Organize contests and giveaways on social media

Use your social media platforms to bring some excitement into your customers’ lives. And what better way to do that than by organizing contests and giveaways where they can win prizes? Whether that’s a free meal at your restaurant or a gift card they can share with a friend, you will raise engagement and interest without too much hassle.

Not to mention these types of contests can also provide you with free, user-generated content for your social media channels. Ask customers to recreate one of your recipes and tag you on Instagram. Then, you can share the results on your stories.

6. Add a thank you card to every delivery bag

Ever since the pandemic started, customers have stepped up and supported their favorite local business through thick and thin. The least you can do, as a restaurant owner, is to show them their support is appreciated. There are many ways you can do that, from offering constant promotions and discounts to simpler things that won’t cost you anything.

One of these things can be a hand-written thank you note placed in every delivery bag. These personalized tokens of appreciation can go a long way in securing customer loyalty and creating repeat business.

7. Offer customers something more than food

When people are sick of ordering takeout, come to their aid by sharing a few recipes of your most popular menu items that they can try to recreate at home. This won’t hurt your sales in any way, and it will bring you appreciation and gratitude from your customers.

Similarly, take a more personal approach on social media by sharing behind-the-scenes clips of your chef preparing a meal while offering professional advice. You can even ask your bartender to mix some cocktails for your viewers’ entertainment.

8. Provide no-contact delivery options

A great added benefit of any online ordering system is the ability to offer zero-contact order fulfillment options to your customers. That can be curbside pickup or no-contact delivery where the driver leaves the order at their doorstep. These options will make customers feel safer and better-taken care of by their favorite restaurant.

9. Partner up with local influencers

Food and restaurant influencers are also affected by the COVID19 pandemic. Reach out to influencers in your area and propose mutually beneficial partnerships. Depending on your budget, you might be able to promote your food to their followers and expose your restaurant to a broader audience.

If you don’t know any influencers in your area at the top of your head, the easiest solution is to use an influencer finding tool from the many that exist online.

10. Offer timely discounts and promotions

This is also a time to be creative with your restaurant promotions. Offers and discounts that speak to the current situation will naturally attract customers to your restaurant. Create themed evenings like “Lockdown Date Night,” “Friday Family Fiesta,” or “Zoom Movie Night.”

Pair them up with unique promotions like two desserts on the house, a serving of nachos for free with any order, or 20% off your pizza menu, plus a free drink. The choices are endless; you just have to think about what would most appeal to your customers.

Conclusion

If there’s one thing the Coronavirus pandemic has taught restaurant owners worldwide, they have to be ready for anything and learn to adapt fast. All that’s left for you to do now is make the most of a challenging situation. How? By learning how to promote your restaurant on a budget, with limited resources.

The tips and tricks above will help you stand out from the crown of restaurants fighting for the same thing: the attention of foodies and increased profits through customer loyalty.

Photo by Louis Hansel on Unsplash

Categories: Others Tags:

Looking at WCAG 2.5.5 for Better Target Sizes

June 8th, 2021 No comments

Have you ever experienced the frustration of trying to tap a button on a mobile device only to have it do nothing because the target size is just not large enough **and it’s not picking up on your press? Maybe you have larger fingers, like I do, or maybe it’s due to limited dexterity. This is because the sadly ever-decreasing target area of elements we, the users, have to interact with.

Let’s talk about target size and how to make it large enough for users to easily interact with an element. This is an especially big deal if a user is accessing content on a small hand-held touch screen device where real estate is much tighter.

Success criterion revisited

I touched (no pun intended) on Success Criterion in a previous article covering the WCAG 2.1 criterion, Label in Name. In short, the WCAG criteria is the baseline from which we determine whether our work is “accessible.”

If you’re wondering whether there’s a criterion for target size, the answers is yes. It’s WCAG 2.5.5. Pulling straight from the guidelines. passing WCAG 2.5.5 with a AAA grade requires “the size of the target for pointer inputs is at least 44 by 44 CSS pixels except when:

  • Equivalent: The target is available through an equivalent link or control on the same page that is at least 44×44 CSS pixels;
  • Inline: The target is in a sentence or block of text;
  • User Agent Control: The size of the target is determined by the user agent and is not modified by the author;
  • Essential: A particular presentation of the target is essential to the information being conveyed.”

What could possibly go wrong?

It’s just a size, right? Easy peasy. Nothing can possibly go awry.

Or can it?

Small target sizes can cause accessibility hurdles for many people. Have you ever been traveling in a vehicle on a bumpy road and you’re trying to interact with an app on your mobile can not press on an element? That is an accessibility hurdle. Those with motor skill or cognitive impairments will have a much harder time because it is much harder for them if the target size is too small and does not meet WCAG requirements.

I don’t mean to pick on Twitter here, but it’s the first notable example I found while hunting for examples of small targets.

There are some good examples of small targets in here, from the tiny contextual menu to the actions in the footer of a tweet, and even the small icons to add topics to a timeline. And notice that even with a properly sized target, like the floating button to compose a tweet, it overlaps with another target, obstructing access to it.

Imagine the hurdles someone with neuromuscular disorders, such as Multiple Sclerosis, Cerebral Palsy, arthritis, tremors, or Alzheimer’s Disease or any other motor impairment would have to overcome to activate a target in any of those cases.

Another favorite example I see quite often? Ads. Have you ever struggled to click the minuscule “X” button to close them?

You’re not alone if you’ve ever struggled to click, let alone even locate, the close button.

Having no motor skill or cognitive disabilities personally, I find myself fumbling around and taking multiple times to hit some target areas. The fact that someone who needs to use something like a pen or stylus on a target size that is not a minimum of 44×44 pixels can be a difficult task. These targets shouldn’t need multiple attempts to activate when the target size doesn’t meet recommended guidelines.

Target size considerations

WCAG 2.5.5 goes into specific detail to help us account for these things by defining the four types of controls we just saw: equivalent, inline, User Agent, and essential.

We’re going to look at different considerations for determining target sizes and hold them up next to the WCAG guidelines to help steer us toward making good, accessible design decisions.

Consider the difference between “click” and “tap”

This success criteria ensures that target sizes are large enough for users to easily activate targets, even if the user is accessing these targets on handheld devices. We typically associate small screens with “taps” instead of “clicks” when it comes to activating targets. And that’s something we need to consider in our target sizing.

Mice and similar input devices use a pointer on the screen, which is considered “fine” precision because it allows a user to access an element on the screen with exact precision. Fine precision makes it easier to access smaller target sizes in theory. The trouble is, that sort of input device can be tough for some users, whether it’s with gripping the device, or some other cognitive or motor skill. So, even with fine precision, having a clear target is still a benefit.

A Tale of Two Targets: Combining padding and color can help increase the size of a tap target while making it visually clear.

Touch, on the other hand, can be problematic as it is an input mechanism with very “coarse” precision. Users can lack a level of fine control when using a mouse or stylus, for example. A finger, which is larger than a mouse pointer, generally obstructs a user’s view of the exact location on the screen that is being activated or touched. Hence, “course” precision.

A smaller pointer offers more precision than a larger thumb when it comes to interacting with an element.

This issue is exacerbated in responsive design, which needs to accommodate for numerous types of fine and coarse inputs. Both input types must be supported for a site that can be accessed by a desktop or laptop with a mouse, as well as a mobile device or tablet with a touch screen.

That makes the actual size we use for a target a pretty important detail. Depending on who is using a control, what that control does, how often it’s used, and where it’s located, we ought to consider using larger, clearer targets to prevent things like unintended actions.

But with all this said, we do actually have a CSS media query that can detect a pointer device so we can target certain styles to either fine or coarse input interactions, and it’s well-supported. Here’s an example pulled right out of the spec:

/* Make radio buttons and check boxes larger if we have an inaccurate primary pointing device */
@media (pointer: coarse) {
  input[type="checkbox"], input[type="radio"] {
    min-width: 30px;
    min-height: 40px;
    background: transparent;
  }
}

But wait. While this is great and all, Patrick H. Lauke offers a word of caution about this interaction media query and it’s potential for making incorrect assumptions.

Consider that different platforms have different requirements

When WCAG specifies exact values, it’s worth paying attention. Notice that we’re advised to make target sizes at least 44×44 pixels, which is mentioned no fewer than 18 times in the WCAG 2.5.5 explainer.

However, you may have also seen similar requirements with different guidance from the likes of Apple’s “Human Interface Guidelines” for iOS, and Google’s “Material Design” in their platform design requirements.

“Try to maintain a minimum tappable area of 44pt x 44pt for all controls.” (Apple, “Human Interface Guidelines”)
“Consider making pointer targets at least 44 x 44 dp.”
(Material Design, “Accessibility”)

Consider the “tappable area” of a target

Notice that Apple’s platform requirements refer to a “tappable area” when describing the ideal target size. That means that we’re talking about space as much as we are about the appearance of a target. For example, Google’s Material Design suggests at least a 48×48 dp (density-independent pixels) target size for interactive elements. But what if your design requirements call for a 24×24 dp icon? It’s totally legit to use padding in our favor to create more interactive space around the icon, comprising the 48×48 dp target size. Or, as it’s documented in Material Design:

Touch targets are the parts of the screen that respond to user input. They extend beyond the visual bounds of an element. For example, an icon may appear to be 24×24 dp, but the padding surrounding it comprises the full 48×48 dp touch target.

CodePen Embed Fallback

Consider responsive layout behavior

That’s right, we’ve gotta consider how things shift and move around in a design that’s meant to respond to different viewport sizes. One example might be buttons that stack on small screens but are inline on larger screen. We want to make sure that transition accounts for the placement of surrounding elements in order to prevent overlapping elements or targets.

Speaking of inline, there’s a particular piece of the WCAG’s exception for inline targets that’s worth highlighting:

Inline: Content displayed can often be reflowed based on the screen width available (responsive design). In reflowed content, the targets can appear anywhere on a line and can change position based on the width of the available screen. Since targets can appear anywhere on the line, the size cannot be larger than the available text and spacing between the sentences or paragraphs, otherwise the targets could overlap. It is for this reason targets which are contained within one or more sentences are excluded from the target size requirements.

(Emphasis mine)

Now, we’re not necessarily talking about buttons that are side-by-side here. We can links within text and that text might break the target’s placement, possibly into two lines.

While it might be difficult to tap one target without inadvertently tapping the other, the WCAG makes an exception for inline targets, like links within paragraphs.

Consider the target’s relationship to its surroundings

We just saw how inline links within a block of text are exempt from the 44×44 rule. There are similar exceptions depending on the target’s relationship to the elements around it.

Let’s take the example that the WCAG explainer provides, again, in it’s description of inline target exceptions:

If the target is the full sentence and the sentence is not in a block of text, then the target needs to be at least 44 by 44 CSS pixels.

That’s a good one. We ought to consider whether the target is its own block or part of a larger block of text. If the target is its own block, then it needs to abide by the rules, whether it’s a button with a short label, or a complete sentence that’s linked up. On the flip side, a complete sentence that’s linked up inside another block of text doesn’t have to meet the target size requirements.

If the target is its own block of text (left), then it needs to adhere to the WCAG criterion. Otherwise, it is exempt (right).

You might think that something like a linked icon at the end of a sentence or paragraph would need to play by the rules, but the WCAG is clear that these targets are exempt:

A footnote or an icon within or at the end of a sentence is considered to be part of a sentence and therefore are excluded from the minimum target size.

And that makes sense. Imagine content with a line height of, say 32 pixels and an icon at the end that’s all padded up to be 44×44 pixels and how easy it would be to inadvertently activate the icon.

CodePen Embed Fallback

Consider whether the target is styled by the User Agent

If the target is completely un-styled — in the sense that you’ve added no CSS to it — and instead takes on the default styles provided by the browser, then there’s no need to stress the 44×44 rule. That makes sense. The User Agent is like system-level UI so changing it superficially with our own styles would be overriding an entire system which could lead to inconsistencies in that UI.

You’re fine just as you are, little button.

So, yeah, if you’re rockin’ a default

Categories: Designing, Others Tags:

The best PDF editors in 2021

June 8th, 2021 No comments
Best PDF editor 2021

Portable Document Formats (PDFs) are a big part of modern business life, used for exchanging electronic documents.

Regardless of the business industry, everyone must have come across a PDF file, at least once in their life. PDFs are mostly preferred as they can keep the format as is since they are mainly designed for viewing not editing the file. 

Yet, there will be times when you need to be the PDF whisperer; you’ll need to make some edits or adjustments to your PDF file to make the format even better. So we rounded up 5 PDF Editor Tools for you to choose “the one” and show your magic!

Best PDF Editors

JotForm PDF Editor 

JotForm takes the PDF game a step forward by presenting amazing options for designs, automation processes, widgets, and integrations.

JotForm PDF Editor is all about simplifying and easing. Creating contracts, invoices, agreements, etc. will no longer be a time-consuming part of your daily workflow. 

JotForm PDF Editor

You can use your current data to create a PDF document with JotForm PDF Editor. You can choose among 900+ PDF templates and transfer your data; or create a custom one by using the drag and drop PDF builder option, which turns your form data into PDF documents. 

If you wish to import a form from a webpage, that’s doable, too!

You could seamlessly use e-signatures, smart annotations, and password protection in your PDFs to streamline your daily efforts and speed up the whole operational process. In addition, integrations with third parties such as Google Drive, Zoom, Slack, and many more, could help you adapt JotForm PDF Editor to your workflow. 

It’s also possible to even use JotForm PDF Editor in the healthcare industry as JotForm products are HIPAA compliant. Having said that, PDF documents covering sensitive patient information such as medical history, consents, hospital discharge, etc. could be safely created with JotForm.

Wondershare PDFelement

Wondershare’s PDFelement is a PDF writer, presenting the option to change any element in a PDF file. These elements could be listed as texts, images, hyperlinks, headers/footers, watermarks and so on. 

It’s possible to handle the text editing process under a single toolbar by using the panel to modify the font, color, alignment, etc. Also, from the ribbon toolbar, you may add hyperlinks to the text by choosing an anchor text. You can also easily take the product tour on their website to even further discover other features.

Wondershare PDF Element

PDFelement also lets you play around with the images on a PDF document; you could rotate, flip, extract, or replace. It’s also possible to add an image or color to the background and make edits on it. 

With PDFelement, you can create PDFs from 300+ file types, organize pages and files, convert PDFs into other formats, supported with cloud storage, e-signature services, and the availability for multiple platforms, including Windows, Mac, and iOS.

PDF Expert

PDF Expert is a PDF editing tool that is only available on Apple devices. PDF Expert especially stands out with its clean, modern, and user-friendly interface. 

PDF Expert

Text, image & link editing, text annotation, page numbering, form filling, document signing are some of the features to be applied to PDF documents. They are also offering a solution for the PDF document sizes meaning that they make it possible to compress any PDF file. 

It’s also possible to combine files from different sources and merge PDFs. You can also extract specific pages out of your PDF document and send them for review if needed.

PDF Candy 

PDF Candy gives the option to upload files from Dropbox or Google Drive or the PDF Candy Team is offering a drag and drop option to ease the user experience.

PDF Candy

PDF Candy is notable with its wide range of tools; as they are providing online and offline PDF editing tools (44 to give an exact number), for editing or modifying PDF documents which are not limited to but can be listed as merging, compressing, OCR, page numbering, rotating, etc. It’s possible to choose your “Favorite” for faster access among the rest of the tools. You can also share your favorites on your social media to spread the word about it!

PDFpen

PDFpen is another PDF editing tool for Apple products; Mac, iPad, and iPhone.

What is remarkable about PDFpen? It’s possible to work without a designer as they are providing services for OCR, converting files, text editing, markups, compressing, magnifying, etc.

PDFpen

With PDFpen’s broad tools options & features, you can add signatures and comments, merge documents, redact sensitive information, fix typos to better manage your day-to-day operations on your Apple devices 

So there you have it, some of the best PDF Editors in the market, feel free to try them out and see which one is the best fit for your business, do you think we missed any? Please let us know in the comment section, happy editing! 

Categories: Others Tags:

3 Essential Design Trends, June 2021

June 7th, 2021 No comments

If you are feeling like me right now, you have mixed emotions about the world in general. And this is translating into a pretty distinct design trend that’s happening almost across the board: Websites aren’t using many images of people right now.

There are just too many questions about what is appropriate (mask, no mask? groups?), so the default answer seems to be using more “artless” options focusing on typography, graphical elements, and small animations.

Here’s what’s trending in design this month.…

1. No Photos Above the Scroll

As the world works to pull itself out of the pandemic, designers struggle with post-pandemic design elements, mainly photography.

Many brands and companies started to refresh their libraries with new imagery that included smaller groups and masked people. Now some parts of the world are pushing to reopen, making some of these images seem immediately dated.

What is a designer to do? First, you have to weigh keeping a fresh-looking design with a world that’s changing quickly right now.

That’s likely the big reason why so many website designs are launching without photos above the scroll. Instead, the hero areas are dominated by oversized typography, graphical elements, and small animations to grab attention.

There aren’t many images that contain people or real-life scenes.

This middle ground allows designers to create something interesting within some pretty distinct constraints while preventing a design from looking dated if local pandemic health guidelines change. (It’s a fine line to walk that may continue for some time to come.)

Each of these three sites does it differently, but with similar themes.

Michael Sumner uses bright color and subtle text animations to keep you look at the design. Clean lines and flowing graphical elements almost seem to counter the in-your-face color choice.

Gus uses a grid background – also with a nontraditional color palette – to draw attention. You keep looking at the design thanks to the animated “gus” on the screen. This small element is just enough to help users click deeper into the design.

Radian takes a different approach while also embracing the no photos design trend. With a lot of white space and clean fonts, the design uses simple scrolling logo boxes to help tell the company’s story.

 

 

2. Left Align Headline Dominates the Hero

This website design trend is a twofer of sorts: There are no photos above the scroll, and the main headlines are aligned left with dominance in the header area.

A left-aligned stack headline can be a striking and dominant element. It can have even more impact with the right words in the headline that entice and engage users to learn more. (If you use this design trend, it is imperative to spend time on the words to ensure that the design says something meaningful.)

Here’s where it gets tricky. To push the eye across the screen, you want the stacked headline not to extend all the way across. Most of the designs using this trend are going half to two-thirds across the screen.

Then the text size needs to be large enough so that the words don’t break awkwardly. (Sizing depends on how many words and letters you have to deal with.)

Finally, you want to stack lines of text to fall nicely into the main, first scroll of the design. If the headline sits too low, it might be distracting. The same is true of a headline that’s too close to the navigation or breaks funny on the scroll.

The lesson here is that stacking text in this manner is a fine art, takes just the right (and highly readable) typeface to pull off, and requires meaningful messaging.

Steadfast Collective does it with a simple headline and “pieces” of images that encourage scrolling.

Nebulab uses some imagery, but what you really see is the giant, two-deck headline. Note the clever use of “next big thing” in an oversized typeface.

#Yallbikeforkids uses an all-caps configuration with intentional underlines to bring attention to keywords. The stark black and white color palette with yellow accents is a bonus for this design and style.

 

 

3. Fun with Fonts

When you don’t have many images to work with and no faces to show, it leaves more room for typographic creativity.

From experimental typefaces to line styles to interesting weight combinations to completely artistic font treatments, designers are having a lot of fun in this area.

Here are three examples to crush on.

Mantic uses a fun dot-style experimental typeface for an AI tool with a futuristic feel. Using a type style that matches the tone and content of the design is key for making a technique like this really work wonders.

Ballistic Moon also uses a funky, experimental typeface for the intro to the online storybook adventure. What’s really nice about the use of the trend here is that the fun font has a distinct purpose and is used for only that use and is not scattered all over the design.

Kazuki Noda has fun with the letters of his name so that the same cool and majestic feel as the rest of the design. Look closely at the uber-blurred video background and phrases that pop into the hero area to describe the portfolio and art direction therein. It’s artful and fun.

 

 

Conclusion

There aren’t a lot of pictures to look at with website design projects this month. And that theme is at the heart of what’s trending right now. It will be interesting to see how long this continues in an uncertain world landscape.

What’s nice about these projects that aren’t so photo-heavy is that it forces designers to develop creative solutions and use other tools to help draw attention to the projects.

Designing within these types of constraints can seem a little overwhelming at first, but the best designers can run with this challenge to create something amazing. (And it can even feel freeing in some ways.) Good luck if you are working on one of these projects, and we hope these trends serve as a source of inspiration.

Source

The post 3 Essential Design Trends, June 2021 first appeared on Webdesigner Depot.

Categories: Designing, Others Tags:

How Organizations Can Win With Website Security

June 7th, 2021 No comments

It’s a widely known fact that when it comes to business, every company is looking for a competitive edge. Odds are, you might not be thinking of website security as your means of gaining a leg up on the competition.

However, with cybersecurity and data privacy being top of mind for more consumers these days, it’s more important now than ever to lock down your digital assets. That said, let’s explore how organizations can win with website security. Not only will the tips that follow keep you and your customers safer online, but they will help you to establish your company as more trustworthy as well.

1. Get Your Employees and Vendors on Board The Website Security Train

You’ve heard the phrase “To err is human,” but that’s not going to make you feel any better in the event you suffer a digital break-in. Proverbs and catchphrases aside, it’s critical that you get everyone in your team on board with the important things they need to know about website security. Many of the mistakes that can happen are a direct result of their actions or lack of actions in some cases. Some of the mistakes that people can make include:

Using weak passwords – If cybercriminals can guess login details, they can wreak havoc on your site. It’s worth noting cybercriminals are using programs and bots to try and crack the code that stands between them and getting into your website. That’s why stronger credentials and multiple methods of authorization are so important. 

Not only should passwords contain a mix of lowercase and uppercase letters, but they should also feature numbers and other characters. Requiring two-factor (good) or multifactor (better) authentication can also assist you in thwarting savvy hackers who are trying to sneak in. 

Sharing their login credentials – All it takes is one disgruntled employee having a bad day using shared credentials to delete website pages, leak documents, or commit other bad acts leaving your company none the wiser as to who the guilty party actually is.

Forgetting to log out – Leaving an account logged in can open your company up to privacy leaks, and depending on the nature of your business this can lead to fines and standards violations.

Using “admin” as their username – No employee, vendor, or person engaging with your website should be called admin. Not even the admin! The reason? Bad actors try to guess that password first because it holds the proverbial keys to your digital kingdom.

Neglecting to update software – Whoever is in charge of updating plugins, software, themes, etc… must do so in a timely fashion in order to patch security vulnerabilities.

Clicking malicious links – No matter how innocent a link looks, if it’s malicious, it can cause any number of threats to download and spread throughout your website and your entire network.

Allowing large files to be uploaded to your website – Blocking large files and limiting file types can prevent bad actors from loading malicious files that they later use to worm their way into the back end of your site. If you allow any uploads, it’s also a good idea to encrypt files that are received so that these malicious individuals can’t find them and exploit them later.

Connecting to your website’s backend over an unsecured network – Some cybercriminals have gotten very smart about using public WiFi networks to spy on sensitive data.

The list goes on. Every person on your team as well as independent contractors, third-party vendors, shareholders, etc… must all be schooled in the dangers that are posed by bad actors online. This is especially true for anyone working within your company that will be logging into your website’s backend for any reason. Not only should they be informed of the threats that exist, but educating them on how best to mitigate these risks can go a long way in keeping your organization safe online.

It would be beneficial for your IT department to create and run an internal risk audit to learn where your most pressing security issues are. Then, implement training and protocols to limit, if not prevent, as many of them as possible from being an issue for your company. Ongoing internal audits and regular updates of security-related training are a great way to keep website security top of mind for all of the people that work in, on, and for your company.

2. Install an SSL onto Company Websites

If you don’t have an SSL for your website(s), you’re telling your customers that your website isn’t safe without even realizing it. When they type your address into their favorite browser, they are likely getting met with a notice that says your company’s website is “not secure.”

To make matters worse, they might never even land on your website in the first place if they aren’t already aware of your business. Why? Because search engines like Google are blacklisting websites that don’t have or use an SSL certificate out of the top search engine results making it harder for potential traffic to reach your site. For those that do manage to keep their first page of Google rankings, once their website is clicked the user may receive a warning that reads “Your connection is not private,” “The site ahead is not secure,” or some other notice prompting them to head “back to safety.”

With an SSL, which stands for secure sockets layer, the website instead earns a padlock and an “s” in their HTTP address before the colon. The “s” in your address and your padlock tell the world your website is more secure than those without an SSL.

3. Invest in Automated Security Tools

Did you know there are automated website security programs that can help keep your website safe? From vulnerability scanning and patching programs to malware scanning and removal software, there are tools available that work 24/7/365 thwarting threats to your website, and therefore your organization.

It’s a good idea to invest in a web application firewall (WAF) as well to block malicious traffic to your website as well. And, while you’re at it, consider investing in a virtual private network (VPN) to help your employees initiate encrypted and anonymous browsing sessions over network connections if they must log in outside of the walls of your organization.

These Steps Are Just the Beginning

Winning with website security is a long game. You’ll need to be ever vigilant about the threats, and work continuously to thwart them. Ongoing communication and training your employees, installing an SSL, and investing in automated tools are very large steps in the right direction, however.

If you take nothing else from this article, hopefully, you will begin investigating the threats that exist towards your website, and start taking steps to mitigate them. Your customers, your employees, shareholders, and more are counting on you to keep your website and them safe.

Categories: Others Tags:

Top Features & Challenges of mHealth Development

June 7th, 2021 No comments

There was a time when it took days to get a doctor’s appointment – even for regular health check-ups. But these days, the waiting times are slowly disappearing as physical appointments are being replaced by virtual real-time video appointments.

What’s more, this ease of service story is not confined to the patient’s side alone – the doctors also have a similar positive take on mHealth.

The journey of healthcare from a straight-jacketed approach to a more digitized avatar has contributed to making healthcare available and affordable to all. While there are several benefits of mHealth app development, there are a few challenges as well. 

The global mHealth market is predicted to reach $166 billion by 2028, registering an astonishing growth rate of CAGR 17% over the 2016 – 2028 periods. And this sector is expected to record the fastest CAGR surge from 2021 to 2028 due to the rising demand for mobile apps by both patients and doctors.

The rise in demand for mHealth applications can be attributed to increased mobile penetration, internet availability even in remote locations, and the need for access to healthcare facilities.

While mHealth app development company have gained traction in the healthcare industry, they are continuing to face challenges. In this article, let’s look at some of the features of mHealth apps and the challenges.

Features of mHealth Applications

Doctor’s Appointments

The ease of fixing doctor’s appointments is one of the most basic functionalities required in a mHealth app. A decent mHeath app should make it easier for patients to book appointments and help doctors get a holistic view of their day’s appointments.

Healthcare Tracking

Healthcare tracking is another fundamental feature of a mHeath application. It allows patients and doctors to have a complete understanding of the patient’s health conditions. Healthcare app development companies should pay attention to enhancing tracking features in their application so that it becomes easier to monitor blood pressure, blood sugar level, blood oxygen levels, pulse rate, caloric intake, and more.

Scheduling and Notifications

mHealth App Development should also focus on helping patients and users schedule timing and receive notifications for medicine intake, water consumption, daily caloric intake, track sleep, and more. 

Information Database

This feature is mainly helpful for healthcare professionals and organizations to get real-time access to a patient’s healthcare records, medical history, diagnosis, lab reports, prescriptions, and treatment strategies.

Accessing Healthcare Facilities

This feature helps patients lookout for physicians and specialists near their location using the healthcare application’s built-in map. It is particularly useful during emergencies or when the patient is not in their primary area.

Real-time Video and Chat

When the need to stay indoors is imperative these days, real-time video and chat features have become a standard in healthcare software solutions. Remote assistance has ensured patients have access to healthcare facilities while still being indoors. Doctors can now provide consultation through video or chat, even to patients in remote locations.

Easy Payments

Another feature that makes these healthcare app development companies stand out is the inclusion of payment gateways in their mHealth applications. Integration of wallets, net banking, debit/credit card payments gives patients an easier way of paying for doctor’s services. Moreover, they can also use this functionality to pay for insurance and for treatment. It also makes it easier for documentation and billing.

Review of Services

Sometimes it becomes difficult to select the right specialist when there are doctors practicing at every corner of the city. These apps incorporate reviews and ratings into their system to help patients choose the right doctor depending on their efficiency.  

Analysis

It is a no-brainer and a must-have in any mHealth app. Healthcare app development companies should pay special attention to having analytics in the mHealth app. The app should have a dedicated dashboard to help all stakeholders, including doctors, to have a place where they can track patient count, resources, finances, and other health-impacting concepts.

Cloud Integration

Digital transformation of healthcare is truly possible when apps can protect patient data in a secure system. Cloud integration goes a long way in helping safeguard information and assuages patient’s concerns regarding privacy.

Challenges of mHealth App Development

Regulations and Compliance

Regulatory compliance is one of the biggest challenges faced by those providing healthcare software solutions. Most major countries have their own set of rules and regulations that app developers should follow. For a start-up looking to launch a mHealth app, it’ll become highly challenging to adhere to all rules. Unless you can engage the services of a reputed app development company, it’ll be a hassle to put the apps in the market.

Information Safety

Data privacy is a huge concern for many users, and since mHealth apps gather personal medical data about patients, it is a rather genuine concern that app developers should consider. It is essential for healthcare software solutions providers to abide by the rules laid down by regulatory agencies for data privacy.

Complexity in Integration

Applications that integrate seamlessly with existing systems and are easy to use have much more chances of being adopted by users. Most mHealth apps prove to be difficult to integrate as they run on complex programs.

Applications should integrate well with the systems used by hospitals and doctors, ensure ease of use and not require overhauling of the entire system.

Health Awareness

The true purpose of digital transformation of healthcare is when medical information is available to patients despite geographical restrictions. While the medical fraternity will have immense details, it is highly unlikely that ordinary patients will also possess the same knowledge.

The solution lies in increasing the medical literacy levels of patients by delivering crucial information in a simplified manner to patients and caregivers.

Security of Payment Information

mHealth apps should make it easier to disperse medical information to patients seamlessly and ensure swiffer billing and payment resolution. App development companies should have a system to ensure sensitive data is handled well and is resistant to security attacks.

Wrapping Up

The focus should be on developing apps that can bring affordable healthcare services to patients – regardless of their location – maintaining an iron grip on payment security and information safety. No doubt, there is a lot of hard work and challenges involved. Engage the services of app development companies and get the wheels in motion for a winning application. Digital transformation of healthcare is a powerful force that can solve some of the pressing issues of this sector.  

Categories: Others Tags:

Popular Design News of the Week: May 31 2021 – June 6, 2021

June 6th, 2021 No comments

Every day design fans submit incredible industry stories to our sister-site, Webdesigner News. Our colleagues sift through it, selecting the very best stories from the design, UX, tech, and development worlds and posting them live on the site.

The best way to keep up with the most important stories for web professionals is to subscribe to Webdesigner News or check out the site regularly. However, in case you missed a day this week, here’s a handy compilation of the top curated stories from the last seven days. Enjoy!

Finding Design Inspiration for a New Website

Fresh Resources for Web Designers and Developers (May 2021)

These Are the Hottest Logo Design Trends of 2021

NocoDB: Open Source Airtable Alternative

What Is Generative Design? A Full Guide

9 Sites That Will Pay You To Test Websites

A Guide to the Modern Minimal UI Style

How to Generate Random Background Colors With JavaScript

7 Modern Website Design Examples (and What You Can Learn From Them)

Full Site Editing in WordPress 5.8

Source

The post Popular Design News of the Week: May 31 2021 – June 6, 2021 first appeared on Webdesigner Depot.

Categories: Designing, Others Tags:

Principles for user-centered front-end development

June 4th, 2021 No comments

Colin Oakley:

Accessible — Use semantic HTML, and make sure we meet the WCAG 2.1 AA standard as a minimum and it works with assisted technologies (this sits alongside the DWP Accessibility Manual)

• Agnostic — Build mobile-first and make it work across a range of devices, and user contexts

• Robust — Use progressive enhancement, make sure what we build fails gracefully

• Performant — Optimise our code/assets for the best possible performance across a range of networks and devices

• Secure — Create a secure service which protects users’ privacy. Use strict content security policies and guard against common OWASP attacks.

Direct Link to ArticlePermalink


The post Principles for user-centered front-end development appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Categories: Designing, Others Tags: