How to Build a WordPress Theme from Scratch: the Basics

Original Source: https://www.sitepoint.com/build-wordpress-theme-from-scratch-basics/

In this tutorial, we’ll explore WordPress theme file structure in depth, and learn how to create a basic WordPress theme from scratch.

In the first part of this series, we introduced WordPress theming, and the fundamental terminology relating to WordPress theme development. We covered templates, partials, template hierarchy, WordPress post types, the style.css stylesheet, WordPress filter and action hooks, WordPress loop, conditional tags, and we briefly took a look at a typical simple WordPress theme file structure.

Creating the Bare Minimum Theme

The first thing we’ll do is install a plugin that will enable us to batch create WordPress posts and other content. This way, we’ll be able to quickly populate our development website without losing too much time. One plugin that serves this purpose is FakerPress by Gustavo Bordoni, available in the WordPress plugin repository.

We quickly install and activate the plugin via WP-CLI.

Now, when we log in to the admin dashboard, we’ll see that FakerPress is installed, and we can create all sorts of content in batch, including any custom post types we have.

FakerPress is installed

Now, using this plugin, we’ll create some fake content. This is the result, using the default TwentySeventeen WordPress theme:

The TwentySeventeen theme with placeholder content

Now, we quickly dive in and set up a bare minimum theme that consists of the catch-all index.php file, and style.css, which we need for the WordPress templating system to recognize the theme:

/*
Theme Name: Botega Simple Theme
Theme URI: https://botega.co.uk
Author: Tonino Jankov
Author URI: https://botega.co.uk
Description: Basic WordPress theme for Sitepoint theme building tutorial
Text Domain: bsimple
Version: 1.0.0
License: GNU General Public License v2 or later
*/

This is the style.css, which consists only of meta CSS comments for now. These comments are required.

This is the index.php file. It will catch all the requests for now:

<?php
/**
*
* @package Botega_Scratch_Theme
*/
?>

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<title><?php bloginfo(‘name’); ?></title>
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>”>
<?php wp_head(); ?>
</head>
<body>

<header>
<h1><?php bloginfo(‘name’); ?></h1>
<h3><?php bloginfo(‘description’); ?></h3>
</header>

<?php
if ( have_posts() ) :
/* Start the Loop */
while ( have_posts() ) :
the_post();
endwhile;
endif;
?>

</body>

We now upload and activate the minimal theme we have. I activate it using WP-CLI:

The theme is now visible to WordPress, and is active:

The theme is now activated

We haven’t provided a screenshot, so the display in the backend is basic.

If we visit our website now in the browser, this is what we’ll see:

The current home page

Obviously, we have work to do.

If we view the source code of the home page, we’ll see that the wp_head() function has outputted a lot of default WordPress tags in the <head>, like CSS, JavaScript, link and meta tags.

The bloginfo() function is used to output website information.

Our home page is empty, because we aren’t outputting anything inside the Loop — a pattern that WordPress uses in all of its templates to output content.

The Codex page about the Loop goes deep into details about it. A typical structure for the loop — which is based on PHP while control structure — looks like this:

<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
//
// Post Content here
//
} // end while
} // end if
?>

We need to fill that while loop with content — or with content-outputting WordPress tags.

If we change our loop, by adding the_title(), the_excerpt(), and we add HTML markup and the_ID(), to look like this:

<?php
if ( have_posts() ) : while ( have_posts() ): the_post(); ?>

<div id=”post-<?php the_ID(); ?>”>
<h2><?php the_title(); ?></h2>
<div class=”post-excerpt”><?php the_excerpt(); ?></div>
</div>

<?php endwhile;
endif;
?>

We’ll now get a list of posts on our home page, with no style applied:

Unstyled output

WordPress shows A blog page — an archive page for all the blog posts — by default.

If we now visit single post URL — something like http://my-website.com/2018/11/14/sapiente-ad-facilis-quo-repellat-quos/ — we’ll see something like this:

Our current single post layout

Our loop, albeit very crude, actually works.

The post How to Build a WordPress Theme from Scratch: the Basics appeared first on SitePoint.

The best Apple Black Friday deals in 2018

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/9jkhng0vyTo/apple-black-friday-and-cyber-monday-deals

It's that time of year already. Black Friday and Cyber Monday 2018 are just a few short days away now, and many deals have now been leaked or are live, which is great for those looking to nab a Black Friday bargain. For those looking more specifically for an Apple Black Friday deal, the news is mixed. While some retailers have announced discounts on products such as the iPhone 8 and iPhone X, Apple Watch Series 3, MacBook Air and iPad Mini 4 – more on that below – others have been quiet on the Apple Black Friday front.

What does this mean for those looking to snag an Apple Black Friday 2018 discount? Should you wait for the big day before you grab a bargain or act now while the iron's – or the deal's – hot? Read on to find out. 

Black Friday deals: Quick links
The best Microsoft Black Friday dealsThe best Adobe Black Friday dealsWacom Black Friday: the best dealsThe best Amazon Black Friday deals
Does Apple give Black Friday discounts?

From Apple itself, Black Friday discounts don't usually come in the form of money off products, so you're unlikely to get a cheap Apple laptop directly from the Apple Store. Instead, in 2017, the tech giant offered money off further Apple spending, with gift cards given on purchases made over Black Friday. 

Last year, if you bought a MacBook or an iMac, you got the maximum gift card of £120/$150, if you bought smaller Apple products, such as a Apple Watch Series 1 or iPhone SE, you got a £20/$25 gift card. We expect Apple to offer a similar deal this year, and while this could be a great way to save if you're an Apple super-fan, there are plenty of other ways to grab yourself an Apple Black Friday discount that may be more satisfying for your bargain-hunting instincts and your purse strings. 

Also note that the newest products didn't come with any gift cards, so if you're after the latest iPad Pro 2018, MacBook Air or Mac mini, you're unlikely to get any money off from Apple – or much off from anyone at all, if we're honest. 

However, Apple's latest product announcements do mean you could be more likely than ever to get a good deal on older Apple products.

Apple Black Friday and Cyber Monday: the best deals

While we expect the Apple Black Friday sale in 2018 to look similar to last year, with gift cards offered for some products, such as the MacBook (2017) and iPhone 8 (but not the latest ones like the iPhone XS), other retailers such as Amazon, Target, Currys, Costco, Sam's Club and John Lewis are likely to slash their Apple prices over Black Friday and Cyber Monday. Some of them have already announced they'll be doing so, and some have even started offering early Black Friday deals. Here's more on what we know so far.

Apple Watch Black Friday US deals

Since the Apple Watch 4 landed we've been seeing discounts on the older Apple Watch models, such as the Watch Series 3, and we expect to see prices drop even further this Black Friday. Keep an eye on the prices of the Watch you're interested in. If you see a price increase over the next few weeks, it's likely that price will then drop down on Black Friday. So be vigilant! 

Below is the best deal we're seeing on the Apple Watch Series 3, with more deals expected soon. Note that all deals are available while stocks last so get in there quick.

Apple Watch Black Friday UK deals
Apple AirPods Black Friday

Despite the rumours, at Apple's latest launch event in New York, there was no announcement of an AirPod update, leaving it uncertain whether they'll get a makeover before the end of the year. That is good news, however, for those coveting the original AirPods, as we are more likely to see discounts on them this Black Friday and Cyber Monday. 

In the US, we've only seen one Apple Airpods Black Friday deal so far and it was an early one from Sam's Club, which had various discounts on 10 November. There was $30 off Apple Airpods, and that's about the best we expect you'll be able to see. Keep checking back here as we'll post more deals when they become live.

In the UK, there aren't really any Black Friday Apple Airpod deals worth shouting about yet. In the meantime, here's today's best deals on Airpods.

Apple 4K TV Black Friday

If you'd like to turn your TV into a smart device with gorgeous imagery and Dolby Vision support, then the Apple 4K TV is the way to go. If you don't need all of that, but just want your TV to become 'smart', then older generation models such as the Apple TV 3rd generation may suit you better, and these are the ones most likely to be discounted over Black Friday. We have yet to hear any announcements about discounts on Apple 4K TVs on Black Friday, but here are the best deals right now.

Apple iPad Black Friday US deals

Those who are after an iPad are in luck. Following the recent announcement of the new iPad Pro 2018, which comes with either an 11-inch or a 12.9-inch screen, and the updated Apple Pencil, it's likely that older iPads will be on sale over Black Friday and Cyber Monday. 

Last year we saw discounts on even the newest iPads, including the iPad 9.7-inch 32GB, which was down to around £300 from £339, and the iPad Pro 10.5, which had £50 off on Amazon. We aren't so optimistic as to expect an Apple Black Friday sale on the latest range of iPads, but we can dream… 

This year, we expect the older models to have their prices slashed further, and we're already seeing some fantastic US deals on a range of Apple iPads: we've listed our favourites below. 

Apple iPad Black Friday UK deals

If you're not sure whether you want the very latest Apple iPad product, or just want to check what all the fuss is about, then see our review of the new new iPad Pro 2018 here. Also check out our post on Black Friday iPad deals for more info.

Apple MacBook Black Friday

Apple's latest event included the news that the MacBook Air is receiving a welcome update, with a Retina display seemingly aimed at creative pros, and even the MacBook Pro got a refresh with the announcement of new AMD graphics options. What does the mean for Apple Black Friday deals in 2018? It's unlikely to be good news in terms of price if you're after the very latest tech, but if you're happy to get an earlier MacBook model, you should see some discounts. 

Apple MacBook Black Friday US deals
Apple MacBook Black Friday UK deals

Last year, John Lewis offered between £50 and £200 off selected MacBooks and iMacs, and we're already seeing some MacBooks on offer this year. Get them while they're still available.

To get the best deal, It's worth tracking the price of the model you're interested in from now on, so you'll know when you're getting an Apple Black Friday discount that's truly worth it. See our post on Black Friday and Cyber Monday MacBook deals this year for more info and deals.

iPhone X Black Friday

In 2017, there were discounts on the iPhone X over Black Friday even though it had only just been released, so this year, we expect big discounts on this smartphone. Seeing as the iPhone X is also being discontinued due to the arrival of the new iPhone XS Max, iPhone XS and iPhone XR, that means retailers will be wanting to shift their stock. 

iPhone X Black Friday US deals

As predicted, we're already seeing deals on the iPhone X and iPhone XR, although Target is following Apple's lead and offering gift cards instead of money off. 

iPhone X Black Friday UK deals
Where to find the best Apple Black Friday and Cyber Monday deals

As we said previously, the Apple Store isn't usually the best place to grab a bargain in the Apple Black Friday sale. Keep an eye on retailers such as Currys, Amazon, Target, Best Buy, Walmart and John Lewis, and don't forget to check back here, as we'll be curating the best deals as they come in.

How to get the best Apple Black Friday and Cyber Monday deals

To get the best deal possible, it's best to have a product and a price in mind. This will keep you from being overwhelmed by the options and becoming unable to make a decision (or making the wrong decision). 

Once you've decided on the product you're after, you can start tracking its price on various retailers – or even simpler, bookmark this page and keep checking it. You could also set up a Google Alert for the prices you're after. Here are some more tips here on how to make the most of Black Friday.

3 Apple products to look out for on Black Friday

Not sure what to go for after looking at all of Apple's great products? Our money is on the best discounts being on the MacBook Pro 15-inch, Apple Watch 3 and the iPad Pro 12.9.

And you may also find now's a good time to pick up an older MacBook Air.

Apple Store on Black Friday 2018: opening hours

Will you have to queue up round the block to get the best Apple Black Friday deals? This seems unlikely, because as far as we know, most Apple Stores will operate their usual opening hours across this period. You can check your local Apple Store opening times here.

As mentioned, however, the Apple Store may not be the best place to bag yourself Apple Black Friday deals, so you may be better off going to another retailer or shopping online. Don't forget that we'll be reporting on deals as they come in, so you can keep checking this page to bag yourself an Apple Black Friday bargain.

Read more:

Microsoft Black Friday: what to expectAmazon Black Friday and Cyber Monday: what to expectAdobe Black Friday: the deals we expect to see

3D Typography by Jonathan Ortiz

Original Source: http://feedproxy.google.com/~r/abduzeedo/~3/PS7Zzjfd5zw/3d-typography-jonathan-ortiz

3D Typography by Jonathan Ortiz

3D Typography by Jonathan Ortiz

abduzeedo
Nov 19, 2018

Jonathan Ortiz shared a beautiful collection of calligraphy and typography compositions. They are super colorful and stylish. There are some clever ideas on some of them, like a anagram style animation. One of my favorite pieces is the Pinterest one, it has a bit of a paintbrush feel but with a lot of depth. It feels that is was done in 3D. Actually most of the work that Jonathan shared takes a advantage of the clever use of shadows to add depth and movement. Super cool!

For more information about Jonathan make sure to check out his Behance profile at https://www.behance.net/joins

3D Typography

 

Typography


Collective #468

Original Source: http://feedproxy.google.com/~r/tympanus/~3/tUbRJxmfgp4/

C468_WOTW

Inspirational Website of the Week: Mathieu Lévesque

A portfolio with nice typographic effects and interesting details. Our pick this week.

Get inspired

C468_NW

This content is sponsored via Syndicate Ads
Northwestern’s Online MS in Information Design & Strategy

Build skills to translate data into compelling visuals and narratives and learn how research and analytics can drive communication strategies and tactics.

Find out more

C468_dev

Web.dev (beta)

A new site by the Chrome Developers team that aims to help developers learn and apply the web’s modern capabilities to their own sites and apps.

Check it out

C468_

Web High Level Shading Language

WebKit introduces a new graphics shading language for the Web inspired by HLSL. Follow the interesting discussion on HN about this.

Read it

C468_squoosh

Squoosh

This great web app by Google lets you optimize images and reduce their size dramatically by editing the advanced options of various image compressors.

Check it out

C468_spinning

A Brief History of Flickering Spinners

An interesting article by Mikael Ainalem on the troublesome case of too quickly ending loading animations.

Read it

C468_cashe

Inlining or Caching? Both Please!

Scott Jehl explores caching inlined files and shows a proof of concept.

Check it out

C468_vis

VisBug

Make any webpage feel like an artboard with this browser extension by Google. Watch the video.

Check it out

C468_turtletoy

Turtletoy

Turtletoy allows you to create generative art using a minimalistic JavaScript Turtle graphics API. By Reinder Nijhoff

Check it out

C468_tabindex

Why using ‘tabindex’ values greater than “0” is bad

Karl Groves lists the reasons why defining a number for tabindex should be avoided.

Read it

C468_devconcept

Developer page concept (digital design)

Dulov Evgeniy’s delightful developer page concept.

Check it out

C468_surma

State of Houdini — Director’s Cut (aka. Honest Edition)

The uncensored version of a great Chrome Dev Summit 2018 talk by Surma.

Watch it

C468_json

Why Facebook’s api starts with a for loop

A very interesting article by Antony Garand on the JSON hijacking vulnerability.

Read it

C468_font

Free Font: Wanderlust

A unique looking slab serif font designed by Jan Henkel.

Check it out

C468_heros

Head: Free header starter kit (Sketch)

A nice set of hero starter templates by Stefano Peschiera.

Get it

C468_jelly

#codevember 7/2018

A lovely jellyfish demo by Noel Delgado.

Check it out

C468_WritableFilesAPI

The Writable Files API: Simplifying local file access

Pete LePage explains what the idea of the Writable Files API is and what you could do with it.

Read it

C468_emojious

Emojious Free Icons

More than a hundred free icons from the adorable Emojious icon set.

Get it

C468_icons8

Icons 8 Beta

An update of the useful icon web app with thousands of free icons.

Check it out

C468_firstinputdelay

What is First Input Delay?

Ire Aderinokun’s summary on the First Input Delay (FID) metric.

Read it

C468_1111

The 1.1.1.1 App

Private internet by Cloudflare now as a mobile app.

Check it out

C468_trees

My journey had lasted seven hours

Gerard Ferrandez created this demo of randomly and recursively generated trees.

Check it out

C468_pageflip

From Our Blog
Page Flip Layout

A template with a two-sided, magazine-like layout and a flat page flip animation. The layout is powered by CSS Grid.

Check it out

Collective #468 was written by Pedro Botelho and published on Codrops.

Motion Design for SEAT Arona Global Launch

Original Source: http://feedproxy.google.com/~r/abduzeedo/~3/AEhGnGL3n0U/motion-design-seat-arona-global-launch

Motion Design for SEAT Arona Global Launch

Motion Design for SEAT Arona Global Launch

abduzeedo
Nov 16, 2018

Marco Salemi and Romina Giarrizzo shared a super stylish motion design project titled SEAT – Arona Global Launch. It features a lot of elements that made graphic design really awesome to me. I am talking about simple elements, textures and typography. There’s definitely a 90’s feeling too if you pay close attention. Some spray textures and style alongside with a lot of black and white. So enough said, check out below and I hope you get as inspired as I got.

Graphic and Motion Design

Credits

Work done for NERDO
Graphic Designer: Romina Giarrizzo, Marco Salemi
Motion Designer: Marco Salemi

motion design


Easy UX Tactics to Improve Your Content Strategy

Original Source: http://feedproxy.google.com/~r/Designrfix/~3/DMuxUfs3X3Q/easy-ux-tactics-to-improve-your-content-strategy

Content without context is meaningless. In a similar manner, your site’s content strategy becomes obsolete if your site’s User Experience is not on point. This is so because if your website isn’t capable enough of keeping the visitors looped, how will it be able to deliver them the content.   Content can only be delivered […]

The post Easy UX Tactics to Improve Your Content Strategy appeared first on designrfix.com.

Inclusive Design For Accessible Presentations

Original Source: https://www.smashingmagazine.com/2018/11/inclusive-design-accessible-presentations/

Inclusive Design For Accessible Presentations

Inclusive Design For Accessible Presentations

Allison Ravenhall

2018-11-15T13:45:14+01:00
2018-11-15T17:08:15+00:00

To all the presenters of conferences, workshops, and meetups: I truly enjoy hearing your anecdotes and learning things from you. I like laughing at your jokes, especially the puns. Unfortunately, some people in your audience aren’t getting as much out of your session as me. They may not be able to see your slides, or hear you speak, or make out the details on the screen.

A few tweaks will make your presentation more inclusive. Here are some tips so next time you’re on stage, everyone in the crowd can laugh at your bad jokes.

1. Create Accessible Slides

Make Your Text Big. No, Bigger.

The back row of your presentation room is a long way from the projector screen. It’s much further than the distance between you and your laptop screen as you create your slides.

Small text in the middle of a large slide

Small text in the middle of a large slide. (Large preview)

People up the back will appreciate every extra pixel you add to your font size. People with vision impairments will appreciate the larger text too — they’ve got a better chance of being able to read it.

Go big or go home. This goes for all text, even “less important” stuff like data labels, graph axes and legends, image captions, footnotes, URLs, and references.

Web forms are such an important part of the web, but we design them poorly all the time. The brand new Form Design Patterns book is our new practical guide for people who design, prototype and build all sorts of forms for digital services, products and websites. The eBook is free for Smashing Members.

Check the table of contents ↬

Form Design Patterns — a practical guide for anyone who needs to design and code web forms

Is Your Slide Font Readable?

I love fonts; they can really set the tone of a talk. However, before you jump into the craziest corners of Google Fonts, think of your audience members with reading difficulties. Using handwriting or script fonts, particularly ones whose letters link together, makes text much harder to read. Using uppercase reduces scannability by removing ascenders and descenders, as well as being shouty.

There’s more scope to experiment with fonts on slides than web pages due to the larger text size, but here are some best practices:

Sans serif is typically the most readable.
Be generous with spacing (between letters, words, and lines).
Use bold for emphasis — underline and italic change the letter shapes, making them less identifiable.
Use mixed case, not all caps.

(Reference: British Dyslexia Association Style Guide 2018)

Does It Make Sense In Greyscale?

Do a print preview of your slides in black and white. Does it all still make sense without the color? If you send out your slides post-talk, some people may not have access to a color printer.

There’s also a good chance that someone at your talk is color-blind. If you’ve used red text for negative items and green text for positive items mixed together in a single list, they may not be able to tell them apart. If the datasets in your graphs only use color to differentiate, think about using patterns or labels to tell each bar, line or pie segment apart.

Don’t rely on color only to tell your story — enhance color with labels, icons, or other visual markers.

Recommended reading: Getting Started In Public Speaking

It’s A Slide, Not A Novel

Every time a new slide goes up, you lose the crowd while they scan the new content. If the slide is full of text, it’s going to take a long time for their attention to come back to what you’re saying.

People with attention deficiencies will struggle to read your slides and listen to what you’re saying at the same time. Audience members with reading difficulties may not finish reading text-heavy slides before you move on, and never mind what you said while they were concentrating on the screen.

Slides aren’t speaker notes. If you need prompts, write up some cards or use your slide program’s notes function. Use keywords and short phrases in your slides, not whole sentences or paragraphs, to share the essential ideas of your talk. Write and refer to a long-form companion piece if you want to share loads of detail that doesn’t translate well to slides.

Animated Slide Transitions? Really?

My high-school self-loved slide transitions — the zanier, the better. Look, my slide is swirling down a plughole! It’s swinging back and forth like a leaf on the breeze! Fades, swipes, shutters, I was all for it.

Microsoft PowerPoint contains 48 (!) animated slide transition options

Microsoft PowerPoint contains 48 (!) animated slide transition options. (Large preview)

I have since discovered that slide transitions are overrated. More seriously, they can make the audience feel sick. Slide transitions and other animation such as parallax scrolling can trigger nausea, headaches and dizziness in people with vestibular (inner ear) disorders.

Make your audience groan with your punny jokes, not because they feel ill.

Readability Applies To Slide Text, Too

If you’re presenting, you probably know a decent amount about your topic. You likely use specialist words and phrases and assume a minimum level of audience knowledge.

Be mindful of using jargon and acronyms, even if you think they’re well-known. Explain them, don’t assume everyone knows them. Better still, use plain language for everything.

Don’t mistake using simpler words and shorter phrases for “dumbing it down”. Slides are for clear and concise ideas, not showing off your vocabulary. Save your fancy words for your next crossword puzzle.

GIFs Aren’t Always Funny

Animated GIFs are used in lots of presentations — usually as a killer quip or a laugh out loud punchline. They’re an easy way to add fun to dry tech talks but use with care — and I’m not talking about your bad sense of humor.

If the GIF content strobes or flashes rapidly, it may trigger seizures in people with photosensitive epilepsy. It’s happened: in 2016, disgruntled Trump supporters caused a Newsweek writer with epilepsy to have a seizure by deliberately tweeting flashing images to him.

While a GIF is looping on the screen, I’m half-listening to the presenter at best. It’s so distracting. If there’s an animation on screen while you relate an anecdote, I’m going to miss the story.

When you create an animated GIF, you can configure the number of times it loops. This is a good compromise — have some fun with your audience, then they can focus on what you’re saying without distraction.

How Good Is Your Color Contrast?

The word 'Binary' on the bottom-left of this slide is presented in a large, readable font, but the color contrast is very poor.

The word ‘Binary’ on the bottom-left of this slide is presented in a large, readable font, but the color contrast is very poor. (Large preview)

There are recommended color contrast values for text on the web. The idea is to ensure text is visible even if you have a vision impairment or color-blindness.

Color contrast is important for slide content too. You probably won’t have much control over the environment, so it’s a good idea to use color combinations that go beyond recommended contrast ratios. I guarantee it won’t look as clear on the projector as it does on your computer.

Don’t be subtle with your color palette. Use bold colors that make your text stand out clearly from the background. Be careful about laying text over images — do it, just make sure the contrast is good. Use a color contrast checker and aim for a ratio of at least 4.5 : 1.

(Before you flame me about the big text minimum ratio being 3 : 1 for WCAG 2.0 AA, I figure it’s big up close, but it’s smaller from the audience’s perspective. They’re not likely to complain that it’s too high contrast, are they?)

Downloadable color contrast checker by the Paciello Group (for Windows & Mac)
Online color contrast checker by Lea Verou

If you know the setup in advance, light-colored text on a dark background is more audience-friendly in a darkened room; a white background can be dazzling. Some people have even resorted to wearing sunglasses when they were blinded by too much glare!

Enable Your Audience To Follow Along

If you plan to share your slides or you have complementary materials, include links to these on your first slide, and mention it in your intro. This enables your audience to follow along or adapt the presentation on their own devices. People with low vision can zoom in on visual content, and blind audience members can follow along on Braille displays or with a screen reader and earbuds.

Keep Your Links Short

If there’s a web link in your slide, there are two reasons to keep it as short as possible:

Readability: Long URLs will wrap onto multiple lines, which is hard to read.
Say-ability: You should say your URL out loud for people who can’t see the screen. A long URL is very hard to say correctly, particularly if it contains strings of random characters. It’s also very hard for listeners to understand and record in real time.

Use a URL shortener to create short links that point to the destination. If you can, maximize readability by customizing the short link to contain related word or two rather than a random string.

Does Your Presentation Contain Multimedia?

Video and audio clips are a great way of presenting events, interviews, and edited content that doesn’t work in real time.

If you’re playing video, think about audience members who can’t see the screen — is the audio descriptive enough by itself? Can a blind or low-vision person get a sense of what’s going on, or who’s speaking, purely from the soundtrack? You may need to introduce or summarise the vision yourself to add context.

If your video has an audio track or you’re playing a separate sound clip, are the visuals enough for someone who is deaf or hard of hearing? You should provide captions of decent size and contrast. Given an audio clip doesn’t have a visual component, you could display equivalent text or graphics while the audio is playing.

Don’t Put The Punchline At The Bottom Of Your Slide

This is more of a general usability tip. Don’t bottom-align slide text unless you know that the bottom of the screen is located well above the audience, or the audience seating is tiered. If the bottom of the projector screen is at or below the audiences’ head-height, and the floor is flat, people seated beyond the first few rows will likely not see what you wrote at the bottom of the slide.

Recommended reading: How To Transform Your Next Conference Takeaways Into Real-Life Results

2. Presenting Tips

Have A Clear Beginning, Middle, And End

It can be tempting to structure your talk towards a big reveal. This is a great device for building interest, but you run the risk of losing people with attention deficit disorders. More generally, if you find yourself running out of time, you may have to rush or cut short your final grand flourish!

Set expectations upfront. Start with a quick “Today I’ll be covering…” statement. You don’t have to give the whole game away, just tantalize the crowd with an outline. They can then decide if they want to commit their brain power to focus on your talk. Let the audience know that it’s OK for them to go if they wish.

Don’t be offended if someone chooses not to stay. They may have a limited capacity for focused thought each day, so a conference of back-to-back presentations and loud breakout spaces is challenging. They must pick and choose what is most useful to them. Hopefully, they’ll come back to your talk if it’s shared later.

Give The Audience Time To Read Your Slides

Complex content like graphs with multiple datasets take time to read and understand. If your slide is a slab of text, your audience will get annoyed if you summarise it and skip onto the next topic before they’ve finished reading.

Consider how much time your audience needs to read and understand each slide, based on the amount and complexity of the content. Remember, they’re seeing it for the first time, and they don’t know as much about the topic as you. Structure your talk so complex slides stay up on the screen long enough to be read completely.

You worked hard on those slides, it’d be a shame if they weren’t appreciated!

Provide Captions And Foreign Language Translation

I’ve attended events that have provided sign language interpreters or live captions to translate or transcribe what the speakers say in real time. They’re invaluable for people who are deaf or hard of hearing. International events may also provide foreign-language translation.

If you present at an event that provides these services, send your slides or speaker notes to the interpreters and captioners in advance. They can then research and practice unfamiliar terms before the day.

Many events don’t provide captioning or translation. They’re beyond the budget of most conferences, being both specialized and labor-intensive. In this case, you can potentially provide your own captions.

MS PowerPoint has a free Presentation Translator plug-in to add real-time captions and foreign language translation. I saw a demo at A11y Camp Sydney last year:

A live demo of @Microsoft Translate as transcript by @mastersofdavid at #A11yCampSyd pic.twitter.com/DW3K4J7wfH

— Allison Ravenhall (@RavenAlly) September 13, 2017

Google recently added real-time captioning to its Slides product, too.

Mind Your Language

Your choice of words may be offending or excluding some of your audience, and you may not even know you’re doing it.

Not all people that work in technology are “guys.” When a speaker says “I talked to the guys about it,” I imagine a group of men. If they’d said “I talked to the developers about it,” then my imaginary group also contains women.

There’s also ableist language. Using words like retarded, insane, lame, and crazy incorrectly is degrading to those with mental and physical disorders. What’s a normal user? Are you making assumptions about gender, sexual orientation, race, family unit, technical knowledge, physical or mental abilities, or level of education?

Then there’s swearing, commonly used to get attention or add some spice. Be careful about deploying this weapon. If you’ve misjudged the room, you could put people offside. If you’re traveling, that fairly tame curse word you use at home could be deeply offensive elsewhere.

Stories Aren’t Universal

When I discussed color contrast at A11y Bytes 2017, I moaned about not being able to see my phone screen in bright sunlight. Attempting to relate, I asked “we’ve all been there, right?”, expecting a few nods and smiles.

The retort was lightning-fast: “Can’t say I’ve found it a problem!” Laughter rippled through the crowd as I realized I’d just been heckled by a blind woman. She graciously laughed off my hasty apology.

I still tell my sunlight story, but now I’m mindful that not everyone can relate to it directly. Learn from my mistake, don’t assume your audience has the same abilities and experiences as you.

Interests And Pop Culture References Aren’t Universal Either

My most recent presentations have been about WCAG 2.1, including the need to provide alternatives to motion-based inputs. I use three Nintendo Switch games as examples.

I don’t assume that the audience has used a Switch. I briefly explain the premise of each game and the motion input it uses before I move on to how it relates to the new success criteria. It’s a courtesy to those people who don’t share my interest in the Switch.

Similarly, much as I’d love to do a Star Wars-themed accessibility talk, I won’t because I’d be putting my own amusement ahead of informing my audience. Some people aren’t into Star Wars, just as I’m not a Trekkie or a Whovian. It’d be a shame for them to misunderstand me because they can’t translate my tenuous Star Wars associations — or worse — if they saw the themed talk title and skipped my session altogether.

Have some fun, by all means, include a pop culture reference or two, but don’t structure your entire talk around it. Make it work for someone who hasn’t watched that movie, or heard that band, or read that book, or seen that meme.

A Picture Is Worth A Thousand (Spoken) Words

Photos, graphics and drawings all add interest to your slides. You may have screenshots of a website you’ve built, or photos of people or places you’re talking about.

When your slide imagery is part of the story, remember to describe the pictures for those in the audience that can’t see it. Try not to say “As you can see here…” because someone may not be able to see there.

If you think it’s awkward to quickly rehash a sight gag, think how awkward you’d feel if you were in a room full of people that suddenly all laughed and you didn’t know why.

Slow Down, Breathe.

You’re nervous. You’ve never presented before. You’ve got a time limit and lots to share. You haven’t practiced. Your parents, friends, children, workmates, industry idols, and managers are all in the room.

Whatever the reason, you probably talk faster than usual when you present. This puts pressure on interpreters and captioners, particularly if your talk contains tech-speak. Your audience may struggle to keep up too. Note-takers mash their laptops in vain, live-tweeters’ thumbs cramp up, and sketchnoters leave a trail of half-drawn doodles in their wake. International visitors may get lost figuring out your accent. Cognitively, everyone is thinking furiously to keep up, and it’s hard work!

Practice. Slow down. No one knows your stuff as well as you; give everyone else time to take it in.

Respect The Code Of Conduct And Your Audience

Codes of conduct are found at most public speaking events, such as this one by UX Gatherings. They set the minimum behavior standard for speakers and attendees.

Read the code of conduct for every event you attend — they can differ broadly. Know the no-go zones and don’t go there.

If you are talking about sensitive topics that may upset some of your audience, give them plenty of notice so they can prepare or remove themselves from the discussion. A note in the event program, if possible. A mention on your lead slide, and during your opening remarks. Include contact details of support services if appropriate.

Make Your Code Demonstrations Accessible, Too

Well done if you have mastered the art of the live code demonstration. Few presenters can show off something meaningful that also works while providing a clear commentary.

You know what would take your code demo to the next level? Jacking up the font size. Your usual code editor font size is perfect when you’re sitting at your desk, but it’s not big enough for those sitting in the back row of your presentation.

Check your editor’s color settings too. A pure white background might be startlingly bright in a darkened room. Make sure your editor text colors have good contrast as well.

Don’t Drop The Mic

If there’s a microphone on offer, use it, even if it’s a small space.

Many public conference spaces have an audio induction (hearing) loop connected to their AV systems. The loop transmits the AV output directly to hearing aids and cochlear implants. People who are hard of hearing receive the target audio without background noise.

Recommended reading: Getting The Most Out Of Your Web Conference Experience

3. After The Presentation

Congratulations! You’ve done your talk. There are just a couple more things that’ll round this thing out nicely.

Distribute Accessible Slides

Lots of presenters publish their slides after the talk is done. If this is you, make them accessible! Correct semantics, meaningful read order, ALT text on images, enough color contrast, video captions, limited animation looping, reasonable slide transitions, all the good stuff.

Fill The Gaps With Notes, A Transcript Or An Article

Help people that need more time to take in your talk and need more detail than what’s on your slides. Publish your speaker notes or a companion piece that covers your topic(s). If the event is recorded, ask the organizers to include captions or a transcript (but perhaps don’t rely on YouTube’s auto-captioning).

Conclusion

Applying these tips will make a big difference to your whole audience. Your slide content, design, and how you present can all affect how well the crowd gets your message, if at all. This is particularly true for those with physical and cognitive conditions.

Making subtle changes to what you show and your script will help all attendees, not just those with disabilities, to get the most out of your hard work.

Smashing Editorial
(ra, yk, il)

7 Sites to Create Your Own Comics Online

Original Source: https://www.hongkiat.com/blog/create-online-comics/

Contrary to popular belief, comics aren’t just for kids. They have the capability to tell a story in a visual way that is truly unique and an experience on its own. Generally, you can only…

Visit hongkiat.com for full content.

Collective #466

Original Source: http://feedproxy.google.com/~r/tympanus/~3/bmgXFjDzO6I/

C466_WOTW

Inspirational Website of the Week: New Land TV

A fluid exhibition of motion with a timeless style. Our pick this week.

Get inspired

C466_Tractiv

This content is sponsored via Syndicate Ads
Kickstart your next design project!

Tractiv is a FREE fitness app UI kit by Cody Brown that has everything you need to get a kickstart on your very own design and prototype.

Try it free

C466_wink

Wink

Wink is an Open-source, Laravel-based publishing platform carefully designed to only include what matters.

Check it out

C466_gif

Improve Animated GIF Performance With HTML5 Video

Ayo Isaiah shows how you can reduce the size of GIF content by up to 98% by using HTML5 video.

Read it

C466_layerscape

Layerscape

An amazing demo by André Mattos of a layered landscape.

Check it out

C466_json

Fx

A command line JSON processing tool.

Check it out

C466_snakeoil

Less Snake Oil, More Context

Surma’s article on treating performance advice always in a context.

Read it

C466_vim

Exploring Vim

Jaime González García invites us to join his quest of text editing enlightenment and learn vim fully.

Read it

C466_reactcomp

Why the React community is missing the point about Web Components

Ben Halpern summarizes the current dialog surrounding Web Components. An interesting discussion follows.

Read it

C466_demofashion

Fashion concept

A fantastic scroll effect demo by Jesper Landberg.

Check it out

C466_hooksdan

Making Sense of React Hooks

Dan Abramov shares his thoughts on React Hooks, the new experimental proposal to React.

Read it

C466_hookstut

Build a CRUD App in React with Hooks

In this tutorial, Tania Rascia creates a simple CRUD (create, read, update, delete) app that utilizes Hooks and no classes.

Check it out

C466_web

#codevember – 6 – Web

Johan Karlsson’s demo for the #codevember “web” topic.

Check it out

C466_facon

Facon

A tiny utility that makes it easy to create nested DOM elements using template literals and extract references.

Check it out

C466_netflix

A Netflix Web Performance Case Study

Addy Osmani describes how Time-To-Interactive was improved for Netflix.com on Desktop.

Read it

C466_jellyfish

Jellyfish

A lovely jellyfish demo by Rafael Castro Couto.

Check it out

C466_inktober

Inktober 2018

A compilation of Pixel-boy’s amazing Inktober illustrations from 2018.

Check it out

C466_chart

Building a Donut Chart with Vue and SVG

Solomone Baquis shows how to create a donut chart in Vue using SVG circles.

Read it

C466_func

Teaching Functional Programming: Two Big Picture Approaches

An article by Ed Toro on two approaches for understanding the concept of Functional Programming.

Read it

C466_vscode

Why I wrote 33 VSCode extensions and how I manage them

Fabio Spampinato shares his workflow when developing and managing VSCode extensions.

Read it

C466_lights

#codevember 7 lights

Robin Delaporte’s lights demo for #codevember.

Check it out

C466_stdout

$stdout – Mess.css

Stdout raps about the daily grind of working as a programmer. This ode is to messy CSS.

Listen now

Collective #466 was written by Pedro Botelho and published on Codrops.

Fonts and Colors Used by Facebook, Twitter, Instagram + More

Original Source: https://www.sitepoint.com/fonts-colors-used-facebook-twitter-google/

This article was updated in November 2018 to reflect the most recent colors and fonts used by social networks such as Facebook, Twitter, and Instagram. For the first time this doesn’t include Google Plus, which is now defunct. Was it ever really alive anyway?

Social login buttons, links to social media channels — in 2018 this is still a thing in web design and app design. I mean, what business isn’t on social media these days?

Having a collection of brand assets used social networks, so that we can incorporate them into our own designs, is quite handy. It’s something we Google every time we build an app or website (What is the color used by Facebook?, What is the Facebook color code?, or simply, Facebook blue). In fact, I bet that’s how you found this article!

Well, I won’t keep you waiting. Let’s take a look at the colors and fonts used by Facebook, Twitter, Pinterest, Instagram, Snapchat, LinkedIn, Facebook Messenger, YouTube, and Google Material Design. If I’ve missed something, hit me up on Twitter.

Just show me the main colors (Facebook, Twitter, Instagram, YouTube, Pinterest).

Facebook

Fonts and colors used by Facebook

“Facebook Blue” Color Codes

Hex: #4267b2
RGB: 66,103,178

Facebook Fonts

Windows: Segoe UI
macOS: San Francisco
iOS: San Francisco
Android: Roboto

Facebook uses the Segoe UI font for the Windows version of their desktop website, and the Apple-made San Francisco font for the macOS version (both are the default system font). For iOS and Android, it’s San Francisco and Roboto respectively (again, both system fonts, for readability and familiarity. These fonts are becoming a standard.

Read more about Facebook’s Branding Guidelines here.

Twitter

Fonts and colors used by Twitter

Twitter Color Codes

Hex: #38A1F3
RGB: 56,161,243

Combined with variants of “Twitter Grey” (which contains a mix of blue, black and white tones), Twitter blue (#38A1F3) is used as the primary brand color throughout.

Read more about Twitter’s Brand Guidelines here.

Twitter Fonts

Windows: Helvetica
macOS: Helvetica Neue
iOS: San Francisco
Android: Roboto

While Twitter has also defaulted to system fonts for their mobile apps (as most social networks do), the Windows version of the website uses Helvetica, and the macOS version Helvetica Neue — somewhat outdated but I’m sure they have their reasons.

Remember when Twitter randomly trialed Gotham Narrow?

Pinterest

Fonts and colors used by Pinterest

Pinterest Color Codes

Hex: #BD081C
RGB: 189,8,28

Pinterest’s classic red color has never changed!

Pinterest Fonts

Windows: Segoe UI
macOS: San Francisco
iOS: San Francisco
Android: Roboto

Fun fact: while Pinterest uses roughly the same fonts that are standard with other social networks, Pinterest uses the Hiragino font for Japanese and other oriental languages, which reads better in comparison to the fonts used with Roman languages.

Read more about Pinterest’s Brand Guidelines here.

Instagram

Fonts and colors used by Instagram

“Instagram Grey” Color Codes

Hex: #231F20
RGB: 35,31,32

Instagram also uses a combination of different gradients. It’s difficult to understand what the individual colors are and in which scenario they should be used, but you can find all of Instagram’s brand assets here. To be honest, it’s rare to see these colors in the wild — those referencing their social media channels tend to use “Instagram Grey.”

Instagram Fonts

Windows: Segoe UI
macOS: San Francisco
iOS: San Francisco
Android: Roboto

Nothing out of the ordinary here. As you can, Segoe UI, San Francisco, and Roboto are sort of becoming a standard with social networks, with Instagram being no different.

The post Fonts and Colors Used by Facebook, Twitter, Instagram + More appeared first on SitePoint.