And developing a website with accessibility in mind means precisely that: to write your HTML code for screen readers. For those website visitors who depend on assistive technologies to fully enjoy the user experience delivered there.
Therefore, the way you'll configure your HTML elements will have a sure impact on your website's overall accessibility: good or bad.
In this respect, here's a checklist of the most effective (and handiest) ways to make your HTML elements fully visible and comprehensible to screen readers:
1. Provide Alternate Text for Every Image on Your Website
By far the handiest way to write HTML code for screen readers: just grow a habit of adding a succinct, yet perfectly comprehensive “Alt text” description to every new and old image on your website.
Make it descriptive enough, but do look out for overly specific (and long) descriptions. Keep in mind to provide context...
You'd thus prevent awkward situations where the assistive technology would just let that website visitor know that... there's an image on that page.
2. Writing HTML Code for Screen Readers: Use ARIA Attributes
One of the best HTML accessibility best practices is to add ARIA (Accessible Rich Internet Applications) to your HTML elements.
Why bother?
Because this way you're providing visually-impaired users with more information about specific elements on a web page
Take this example: the “role” attribute gives more context; it makes it easier for the screen reader (and the assisted user implicitly) to see what that element's “role” is in the context of that specific web page.
Just add the “navigation” value to that “role” attribute and the screen reader can then interpret the HTML element as being a... menu. And then present the user with all the options listed there.
Something intuitive for a user, but not so much for a visually-impaired one.
And this is but one of the many functions for ARIA attributes that you could add to your HTML code to enhance its accessibility.
3. Declare A Page's Language in HTML
You can and should do that via HTML.
This way, if your website's accessed:
from a different country
by a visitor with different language settings
… the screen reader “detecting” its default language will be quick to translate it.
Note: if you have snippets of text in a language different from the default one on your website, remember to add a new language tag to each snippet.
This way, you'll be signaling to screen readers that those specific parts should be translated accordingly.
4. Keep Your Links Short, but Not Too Short
Try to find that ideal balance between confusingly long and ineffectively short text for your links.
It's one of the “trickiest” parts of writing HTML code for screen readers:
if you use too many words, since the link will get read out loud by the screen reader, it might just confuse the visitor in question
if you make it too short, those users who rely on screen readers but still use their mouses to navigate websites might just... miss it
5. Use Semantic Tags: Make Your Content Readable and Understandable
What do you think of when you say “semantic tags”?
Tags like <b>, for bold text (and, therefore important information) or <i> for italicized text (which might indicate a quote) might be the first the come to your mind, right?
But still, these are indicators for how the text should be displayed. And that's irrelevant for visually-impaired users...
By comparison, 100% semantic tags, like <strong> and <em> indicate to the screen readers how that text should be interpreted. They're valuable “stage directions” on how it should be read to enhance the users' understanding.
6. Structure Your Pages so They... Make Sense to Screen Reader Users
Writing HTML code for screen readers means also structuring your web pages with accessibility in mind.
So, ask yourself common questions like:
when a visitors tells his/her screen reader to jump to the main context section on a page, are the links there short enough not to confuse him/her and long enough not to... miss them?
does that main context make sense to someone who can't interpret visual details like color scheme, layout, route of navigation?
Would he/she still be able to make sense of your web page's structure?
The END!
Needless to add that the list of ways that you could tweak your HTML code for screen readers, for enhancing accessibility, is a... never-ending one.
Start by focusing on these 6 aspects that will help you develop the right mindset for accessibility then... keep adding on more techniques.
Silviu Serdaru / Mar 23'2019
About to build your very first Angular app? Then you must be planning to create an Angular project with Angular CLI, right? The much-acclaimed tool that the Angular team built precisely to jumpstart the whole development process.
… to have a simple app scaffolded, generated and deployed in no time, by entering just a few commands (so they say, at least).
And since I'm sure that you don't want to waste these bundles of convenience by letting yourself tangled up in overly complex explanations instead, I've kept things simple with this guide.
So, here's how you create and run your first Angular project via the Angular command-line interface:
1. But How Precisely Can Angular CLI Jumpstart Your App's Development Process?
Take this command-line interface as a starter kit “present” that the Angular team has nicely wrapped for you:
it's practically geared at empowering you to get up and start developing a new Angular app in no time
it takes just one short command to generate a default Angular project that would include all the needed dependencies (in the node_modules folder), as well as testing files for each component
Now, this is what I call a major kickstart! It's got you covered from the stage of setting everything up, to creating the Angular project itself, to testing it and finally deploying it.
Other key usages of the Angular CLI that we're not going to focus on in this tutorial here are:
real-time server maintenance and support
building applications for production
adding new features to your existing app
running tests on your application units
2. Setting It Up: Install Angular CLI Globally
Before you jump to the part where you create an Angular app using Angular CLI, you need to install the command-line interface itself. Globally!
And this is the “power” command to enter in your terminal with the npm installed:
npm install -g @angular/cli
Notes:
if you already have the CLI installed, make sure it's the latest version
if you need to update it, these are the commands to enter:
npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli
And there's more! A few more must-have dependencies that you need to make sure that are already installed and upgraded to their latest versions:
Node.js: v6.9.x +
npm: 3.x.x +
3. Create an Angular Project With Angular CLI
With your command line interface ON, use it to enter THE one and only command that will generate a new Angular project for you. One incorporating, by default, all the needed dependencies:
ng new ng-yourproject
Tada! A “yourproject” named directory has just been generated. That's where your new Angular project — along with all the requested dependencies — gets stored.
Eager to test it out? Just run the following command in your terminal:
ng serve
Your Angular app will then get built and served up to localhost:4200. Feel free to open this URL in your browser and it's the here-below screen that you should be able to see:
Basically, it's the default application shell itself rendered by the CLI.
4. “Deconstructing” Your New Angular Project: What Does It Include?
Now, before you go ahead and do your “tweaking” on your newly created app, let's see what you've got in there! What are the elements that the CLI has generated for you to help you jump to development right out of the box?
For this quick “scan”, open your Angular project in your IDE of choice and start “exploring” your src/folder:
src/*
styles.css
any styles that you'll plan to apply globally, it's this file that you can add them to; and it's here, as well, that you can import new .css files (Bootstrap or any other styling frameworks of your choice)
index.html
where your Angular app gets started
src/app/*
app.component.ts
this is where your app's one and only (for now at least) component gets stored
app.module.ts
the modules Angular needs for managing your app's components
note: @NgModule marks the class file as a module and this is what makes it similar to @Component
5. Create a New Component
Remember your “one and only component” that I mentioned during the previous “inventory” of all the “bunch of stuff” that CLI has generated in your project?
Well, how about creating a new one now? One that would load under that root component?
Just run the following command to generate it:
ng generate component the-quote
Next, time to “show it off” in your browser:
<h3>{{myQuote.quote}}</h3>
<small>- {{myQuote.by}}</small>
Add the app-the-quote selector to the root component that the CLI generated in your Angular project:
<h1>
{{title}}
</h1>
<app-the-quote></app-the-quote>
6. Apply External Styling
Now you do agree that when you create an Angular project with Angular CLI applying styling is a key step.
So, let's add your favorite CSS framework to your new application!
Me, it's Bulma that I'll be using in this tutorial here:
npm install bulma --save
With our CSS framework installed, we'll need to enable it to load the CSS file into our Angular app. For this, just place the relative path within the .angular-cli.json file., to the file in the styles array more precisely.
...
"styles": [
"../node_modules/bulma/css/bulma.css",
"styles.css"
],
...
“Tempted” to display some icons now, as well? Then go ahead and add the font-awesome library as cdn link.
For this, just include the stylesheet right into your index.html:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Et voila! This is how you create an Angular project with Angular CLI!
What do you think? Is the Angular command-line interface an extremely useful tool to jumpstart your project with or did you expected your “starter kit” to include, right out-of-the-box, more elements to get you started?
RADU SIMILEANU / May 25'2018
Here you are now: your Angular 4 front-end app ready to... wow its users! “Almost ready” actually! For it still needs styling... And what better HTML and CSS framework to go for than Bootstrap, right? But how to use Bootstrap with Angular 4 more precisely?
How do you properly integrate it into your Angular 4 CLI project?
Great news: you have not just one, but 3 options at hand for adding it!
Let me get into details:
On Using Bootstrap in Your Front-End Development Process
Is there any need to list here the reasons why it's precisely Bootstrap that you're planning to implement into your Angular CLI project? Angular 4, to be more specific.
After all, it's the most popular framework for styling websites built in HTML, CSS and modern web & mobile JavaScript frameworks (like Angular here):
It's an open source, feature-rich framework that turns front-end development into a such a “breeze”. Basically, it empowers you to build responsive layouts without the need to be a CSS “expert”.
And now, let's break down further with the step-by-step “tutorial” on how to use Bootstrap with Angular 4:
Step 1: Create a New Angular Project Using Angular CLI
The very first step to take is obviously setting up a brand new project.
Use the Angular Command Line Interface to generate it.
But first, install it to on your system:
$ npm install -g @angular/cli
It's only then, once you've installed its NPM package, that you can go ahead and... generate your new project.
For doing this, just type the following command in your CLI:
$ ng new myproject
Next, feel free to change into that specific directory and to turn on the web server:
$ cd myproject
$ ng serve
“App works!” This is the message that you should be seeing in your browser right now.
Step 2: Install Bootstrap to Your Project
Now that you've launched your new Angular project, it's time to add your Bootstrap library, as well.
And you sure aren't nickel and dimed in options. There are 4 ways to add Bootstrap to Angular 4.
Step 3: How to Use Bootstrap with Angular 4 — 3 Different Ways to Integrate It
Option 1: Install Bootstrap from CDN
And there are 2 particular files that you'll need to install from CDN into your project:
the Bootstrap CCS file
the Bootstrap JavaScript file
Note: keep in mind to add the jQuery JavaScript library file, as well!
Next, open the src/index.html file and insert the following:
the <link> element to add the Bootstrap CSS file at the end of the head section
a <script> element for adding jQuery at the bottom of the body section
a <script> element for inserting the Bootstrap JS file at the bottom of the body section
Eager to see “Bootstrap in action” in one of your project's component templates? Then give it a try:
open the src/app/app.component.html
enter the following code there:
<div class="container">
<div class="jumbotron">
<h1>Welcome</h1>
<h2>Angular & Bootstrap Demo</h2>
</div>
<div class="panel panel-primary">
<div class="panel-heading">Status</div>
<div class="panel-body">
<h3>{{title}}</h3>
</div>
</div>
</div>
And it's the following message that this HTML template code should trigger in your browser:
“app works!”
Note: go for a Bootstrap theme of your choice; once you've downloaded it (from Bootswatch.com for instance), its bootstrap.min.css file will get instantly opened up in your browser.
Just copy the file's URL and use it to replace the string assigned to the href attribute of the <link> element, in the index.html file.
And voila! It's precisely those colors, defined by your chosen theme, that get displayed in the browser now!
Option 2: Install Bootstrap using NPM
And here's another valid answer to your “How to use Bootstrap with Angular 4” dilemma!
Simply enter:
$ npm install bootstrap@3 jquery –save
It's this command that will integrate Bootstrap and jQuery into the node_modules folder of your Angular 4 project directory.
Moreover, it will include these 2 dependencies in the package.json file, as well.
Once properly installed, you can find both packages at:
node_modules/bootstrap/dist/css/bootstrap.min.css
node_modules/bootstrap/dist/js/bootstrap.min.js
node_modules/jquery/dist/jquery.min.js
Note! You have 2 options for integrating those files into your Angular 4 project:
add the file paths to the script array and to the file path of the angular-cli.json file
add the corresponding <script> and <link> elements to your index.html file
Option 3: Add NG-Bootstrap to Your Project
The great thing about this method is that you'll no longer need to add jQuery and Bootstrap dependencies. Ng-Bootstrap comes packed with a set of built-in native Angular directives which are already CSS and Bootstrap's markup-based.
Now, getting back to our initial “How to use Bootstrap with Angular 4” question, let's see how we install this NPM package.
For this, just enter the following command in your Angular 4 project directory:
npm install --save @ng-bootstrap/ng-bootstrap
Next, make sure you also install Bootstrap 4 to your project:
$ npm install bootstrap@4.0.0-alpha.6
And, the final step is to add the following files:
jquery.min.js
bootstrap.min.js
bootstrap.min.css
… to your .angular-cli.json file
Now you still need to import the Ng-Bootstrap’s core module — NgbModule — from its @ng-bootstrap/ng-bootstrap package.
To do this, just type the following import statement into app.module.ts:
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
All there's left for you to do now is to add the NgbModule to the @NgModuledecorator's imports array.
And since we're here, you'll find some more than “enlightening” info (chunks of code here included!) on the 2 different options at hand for importing the NGBModule:
either in your project's child modules
or in your the root module itself
… in this article here on Using Bootstrap with Angular.
Using The NG-Bootstrap Components: Which Are They?
With the NgbModule installed into your Angular 4 project, you're now able to use the Ng-Bootstrap components.
To leverage them in your app.component.html.
Speaking of which, here are the components at hand:
Accordion
Alert
Rating
Tabs
Carousel
Progressbar
Collapse
Datepicker
Buttons
Pagination
Typeahead
Popover
Timepicker
Dropdown
Modal
Tooltip
The END! Does this answer your “How to Use Bootstrap with Angular 4” question?
Which method of adding this front-end framework to your project is more suitable for you?
Silviu Serdaru / Apr 30'2018
What's the deal with the virtual DOM? How React virtual DOM works precisely? It's significantly faster, without question, and it brings a whole series of benefits to coding.
How come?
Which efficiency issues of the “real” DOM does it solve? And what makes the way that React.js manipulates the DOM better than the “standard” way?
Let's get you some answers:
But First: What Is the DOM Anyway?
"Document Object Model."
It's only but natural that, before we get into details on React and the Virtual DOM, we gain a deep understanding of the DOM itself.
Therefore, here's a definition that hopefully sheds enough light on this concept:
DOM is a tree-structured abstraction of (or an in-memory representation, if you prefer) a page's HTML code. One that preserves the parent/child relationships between the nodes within its tree-like structure.
Any better?
The major benefit is the API that it provides, that allows us, developers, to easily scan through the HTML elements of a page and to manipulate them as needed. For instance:
to add new nodes
to edit a given node's content
to remove specific nodes
And What Is DOM Manipulation More Precisely?
It's the very process that enables the content on any of your website's pages to be dynamically updated.
Needless to add that it's JavaScript that you would use when handling the DOM. Also, methods such as:
removeChild
getElementByID
… are included in the API that the “actual” DOM provides you with.
What Efficiency Challenges Does the "Real" DOM Face?
Now, before we go back to your initial “dilemma” (“how React Virtual DOM works”), let's see why a “virtual” DOM was even needed in the first place.
What efficiency issues of the “real” DOM does it address?
So, it's JavaScript that we use as we manipulate the DOM, right? And it used to work fantastic back in the days when static UIs would “rule” and the concept of dynamically updating nodes wasn't yet... “invented”.
Well, since then things have changed...
The DOM manipulation, once the core process of all modern interactive web pages, started to show its limitations. And that because the “real” DOM would update a “target” node along with the entire web page (with its corresponding layout and CSS).
For instance, imagine that:
You have a list of items and it's just one of those items that you need to update. Traditionally, the “real” DOM would re-render the entire list and not exclusively the items that receive updates. See?
Just think of a scenario where you have an SPA (Single Page App). One with thousands of dynamically generated nodes, that would all need to “listen to” lots of future updates and to re-render them in the UI.
It's here that things get discouragingly... slow!
The real DOM can't cope with pages carrying thousands and thousands of components to be re-rendered when updates are being passed through.
It's in this context here that the virtual DOM stepped in! And it's React that makes the most of it.
Clear enough?
How React Virtual DOM Works: Snapshots, Diffing and Reconciliation
Before we get into the “how”, let's shed some light on the “what”. What is the “virtual” DOM?
A light-weight abstraction/copy of the HTML DOM, having the same properties as the “real” one. The only difference is that it can't write to the screen like the actual DOM “can”. Also, it's local to React.
A copy of the actual DOM that you get to update “intensively” without impacting the real DOM.
Note: do keep in mind that it isn't React that introduced this concept since there are plenty of other libraries who're using it.
Snapshots, Diffing and Reconciliation
Now, let's get into details on how React virtual DOM works.
a. First of all, React takes a virtual DOM snapshot before doing any updates.
b. It will then use it (this record of the DOM state) to compare it against the updated virtual DOM, before applying any changes to the actual DOM itself.
And it's a “diffing algorithm” that supports all this comparing and enables React to identify any changes. To detect the updates that have been applied.
Also, the entire process is called “reconciliation”:
Whenever updates need to be made to the actual DOM, React updates the Virtual DOM first, and then, once it has done its compairing, it syncs the Real DOM.
In other words: before applying any of the requested updates, React makes a copy of the virtual DOM, that it will then set against the updated virtual DOM (diffing). It's during this diffing-reconciliation process that React detects the changes that have been applied and identifies the objects to be updated.
And it's precisely those objects that it will update in the actual DOM.
The huge benefits?
virtual DOM updates a whole lot faster
it updates exclusively the “target” nodes, leaving the rest ones of the page alone
Summing Up
To recap, let's try and sum up this whole “How React Virtual DOM Works” guide here to its bare essentials.
So, here's how React updates the DOM in 3 simple steps:
first, it applies the given updates to the whole Virtual DOM
then, it compares it with the snapshot of the virtual DOM that it will have taken, using an algorithm called “diffing” during this whole process of comparing and spotting any changes/contrasts
then, it's specifically (and exclusively) those changed elements that it updates in the actual DOM
The END! Have I managed to make this process any clearer for you? Can you now see what's “under the hood” of the way React updates DOM?
And the specific reasons why it's so much faster than the real DOM manipulation?
RADU SIMILEANU / Apr 26'2018
“It depends...” This is the very first honest answer to your “Jekyll or Hugo?” dilemma. Since your own use case scenario is (obviously) different from all the rest:
Which feature do you value most: extensibility or page build speed?
Do you prefer high performance over simplicity of use?
A massive community to rely on or out-of-the-box experience and simple workflow?
Is it a small-sized website or a content-heavy, large-scale generated site that you have in plan?
How frequently will you (or your team) be updating content on your site?
Once you've answered this “questionnaire” and you've identified your website's profile, delve into the Jekyll or Hugo 2017 comparison that our team of Toronto developers has prepared for you:
Here it goes:
But First: When and Why Should You Go for a Statically Generated Site?
“...instead of a dynamically generated one?”
Remember how the web used to be, back in the old days? “Databases-less” and static! Meaning: ideally simple and blazingly fast!
Well, that's precisely what you get when opting for a static site generator:
a static website made of “pure” HTML and CSS with “a touch” of JavaScript, too, if you prefer
one with no dynamically generated content on the server-side, with no moving parts (which, when not closely “monitored” and kept up to date turn into some major security risks)
just speedy old static and secure HTML pages guaranteeing you a workflow comparably convenient to that of a dynamic site.
“But is a static site generator the best fit for my own website?”
Now, this is just the right type of question to be asking yourself right now. Our answer is:
go for a statically generated site if its content gets viewed more often than edited
... and you don't need dynamic content to be constantly pulled from a database
use a static site generator if it's a blog that you want to set up
What do you gain from using it?
boosted security
you're cutting off unnecessary complexities that dynamically generated content might lead to
higher page load time (practically a static site generator builds a requested page beforehand, not “right after” the user has requested it)
When not to use Jekyll or Hugo or any other site generator:
the most relevant example is that of an e-commerce site since products get added to the customer's shopping cart dynamically; a statically generated site can't cope with this kind of request...
Introducing Hugo
The powerful “younger” rival of Jekyll with an ever-growing community of followers ”seduced” by all those features that it's been equipped with and which Jekyll lacks:
it's way faster (thanks to its Go-based templating)
it delivers you an “out-of-the-box experience”
Key limitations:
it doesn't excel when it comes to extensibility: practically it's distributed in one compiled file
... and it's close to impossible for you to upgrade it with plugins or additional functionalities
it comes with no admin function as Jekyll does
Introducing Jekyll
The most widely used static site generator! Favored for its:
extended features and collection of plugins
recently added admin function
massive supportive community
Github support: get your site/blog up and running in no time, right after you've hosted it using the Github Pages
Jekyll or Hugo? 6 Criteria to Evaluate The 2 Static Website Generators
1. Installation
We need to admit that both Hugo and Jekyll provide you with very good documentation and great quick-start guides. So, you can launch your site with just one simple command:
hugo new site <your_site>, in Hugo
jekyll new site <your_site>, in Jekyll
Still, if we are to compare the two based on this criterion only, we need to add that Jekyll does have a slight advantage: you get a default theme and some example content to start with.
It depends on your own site's needs if you take it as an advantage or not quite (for you might not even use the default theme and content when you start up a new site anyway).
2. Speed
There's no debate here: Hugo is a static site generator way faster than Jekyll!
It's built on Go (compared to Jekyll, which runs on Ruby) and that explains a lot.
So, if:
page build speed is a critical factor for you
your site carries a heavy ecosystem of pages, content-packed pages that need constant, frequent editing, then Hugo might just be the right choice for you
3. Extensibility
“Extensibility” is, no doubt, Jekyll's trump card!
Thanks to its plugin architecture it enables you to easily add extra functionality, to extend your Jekyll-powered website's features once you've set it up.
So, the “Jekyll or Hugo?” question is primarily a “speed vs extensibility” debate.
4. Workflow
The provided workflow for building your website is another aspect where the 2 static website generators seem to be neck-and-neck.
Both the Jekyll server and Hugo server are configured to automatically catch up with any updates that you make to your theme, images, content, or configuration while working on your website.
Also, they both enable you to add new content to your website's backbone structure just by creating new files in the right place.
Note: it's here that we can still “detect” an advantage of Hugo over Jekyll (so they're not THAT even after all); it provides you with certain functions which automatically check that your new files get created precisely in the right parts of your site's frame.
5. Themes
In a “Jekyll or Hugo” dilemma the theming aspect does weigh a lot, doesn't it?
Well, we have 2 types of news for you: a good and a “so and so” one:
each one of them comes with its own surprisingly diversified collection of themes, suitable for all types of websites
some might argue that, as you dig through these impressive collections, identifying the one that best fits your own site, narrowing down your searches isn't really a breeze
... since you're not provided with sufficiently detailed information on each one of them
6. Community
And here we have a clear winner: Jekyll!
Since it was the very first modern site generator ever built no wonder that it gathered such a large community around it!
In short: if support is crucial for you, you'll be thrilled by Jekyll's wide community of peers generating content, backing you up, and being there to answer your questions.
So, which one of them has won you over so far, now that you've defined your site's specific profile and you've scanned through these 2 major static website generators' strengths and weaknesses: Jekyll or Hugo?
Adrian Ababei / Oct 26'2017
Creating web content and deploying it on a plethora of:
platforms
devices (both modern desktops and mobile browsers)
… of different screen sizes
… and running different operating systems
web browsers
markets
… sure has “Mission: Impossible” written all over it, doesn't it? And this is precisely how your business will benefit from using HTML 5: it's been adapted specifically to help you turn all the above-mentioned challenges into... benefits.
It's the formatting language that you can use to:
design rich media web pages/mobile web applications to... entice your users with
implement them (your websites/web-based mobile apps), seamlessly, on all platforms, notwithstanding layout, design and functionality restrictions
This being said, let's get into it!
Let's point out the 10 challenges which you're currently facing, as a business striving to stand still on in the “shifting sands” of the digital web of today. Challenges which HTML 5's built to turn into key advantages for you:
1. Cross-Device Mobile App Development: It Reduces Costs and Development Time
In short, here's how your business will benefit from using HTML 5:
your development team can write code once and use it as... many times as needed (the very same batch of code) on several markets, devices and platforms
this cannot but translate into: lower lifetime cost and reduced maintenance costs, too, obviously
How about investing those “spared” resources of time, money and effort... elsewhere?
2. It Turns Offline Browsing From a Challenge Into an Offline-Cache Web Experience
Another great “app-like” behavior that HTML 5 adopts is that of running without internet connection.
That's right, practically your HTML 5 web pages' code and content get stored via the offline application cache. This way, you can guarantee your business website's visitors a great web experience even while they're ... offline.
Note: locally storing content and code (and client-side data in true SQL database) will not impact just the user experience, but your website's/app's performance, as well. Basically, offline cache makes possible for code and content to be accessed rapidly, locally, in a “no internet connection” context.
3. Better Mobile Access Translates Into Better Access to Business Intelligence
Just a moment (or two) of reflection on these 2 scenarios here:
you ask your team to either use the very same type of device, all of them, or to develop one business intelligence app for each and every type of device there is out there
you use HTML 5 for developing one business intelligence app which will collect, collate and use data on all types of devices, by leveraging browser-based analytics tools
And this is another way that your business will benefit from using HTML 5!
It's nothing but pure logic after all: since all devices run an HTML 5-compatible browser, your future business intelligence app will run smoothly on... them all!
4. Video Content Is King Now: Luckily HTML 5 Comes With Native Video Support
Just imagine: you get to build your video content right there, in the supporting browser!
No plug-ins required!
This can only translate into: faster video distribution to all targeted platforms!
How about using the time you'll gain for crafting high-quality video content that will bring you both the targeted audience and SEO on your side?
5. It Makes Front-End App Development a... Breeze
What is it that you're “cooking” (or planning to) in terms of front-end apps?
Some drag and drop tools? Or maybe some discussion boards? Some wikis?
No matter what type of front-end apps you might have in plan, with its standards and all its new features HTML 5 makes their development quicker and easier.
So, how will you value the extra time that your business will benefit from using HTML 5?
6. Here's How You Will Benefit from Using HTML 5: It's Operating System-Agnostic
“No strings attached”, here's another possible way of defining HTML 5.
For although its runs in a web browser, it's not dependent on the underlying operating system.
How does this translate into a key benefit for your own business? Practically while developing your apps you won't need to:
get tangled up in complex, time-consuming development processes
get dragged down by support overhead
… like it's the case with native apps (iOS, Blackberry, Android)
7. It Turns The Challenge of Cleanly Structuring Your Web Page Into an SEO Advantage
Clean(er), neat(er) and semantically valuable code! This is how you could best describe the “backbone” of an HTML 5 web page.
And this is precisely the type of easy-to-read, logical structure that search engine robots “enjoy” crawling through.
Bottom line: gaining search engine visibility is how your online business will benefit from using HTML 5!
8. Running Your Web Pages/Web Apps on ALL Browsers Is No Longer an Issue With HTML 5
It looks like “all the roads lead to” our preliminary definition of HTML 5: “Write once, run anywhere.”
By implementing HTML 5 and leveraging the capabilities of CSS 3 your design team can easily create a business website/web app that will run on ALL browsers.
9. It Improves User Experience Via Multimedia and Graphical Content-Rich Web Pages
And it's precisely rich-media web pages that create .. enriched web user experiences, right?
Luckily HTML 5 makes adding animations, SVG content, audio content, charts, visually-arresting graphics (and the list of design and media types can go on and on) such a breeze.
Providing your developers with features such as “<video”, <audio>” etc., they can easily integrate media files into your web pages. Enriched web user experiences... crafted with great ease!
10. It Turns Location-Based App Development from a Challenge into an... Advantage
If it's a location-based app/services that you're planning to develop, then here's how your business will benefit from using HTML 5: since it supports geolocation, APIs will make the user's location available to any browser-based app compatible with HTML 5.
As simple as that!
And this is where our list of 10 benefits that you can “reap” from implementing HTML 5 when developing your business website/web-based mobile app. Would you add some more? Or maybe some limitations/downfalls?
Adrian Ababei / Oct 17'2017
Like it or not, Responsive HTML Email is popular and it’s here to stay – over 50% of e-mails are read from mobile devices.
But HTML email design is very out-dated – for some web developers, HTML email design can be a living hell. While most email design experts start off by building tables and layouts styled in HTML attributes, some designers are implementing newer, modern techniques to create responsive HTML email. Here are a few tips:
HTML email is valuable
HTML email is vital for every company and or business. In the marketing department e-mail outperforms social media channels such as Twitter and Facebook. The best thing about e-mail is that it allows marketers to interact with massive audiences in a very personal way. While most users tend to use plain text e-mails, responsive HTML email has plenty of advantages including:
Tracking – it allows you to track engagements in order to optimize marketing efforts
Hierarchy – You can build hierarchy in HTML and make your text or links easily noticeable
Design – the email allows you to reinforce your brand
Hyperlinks – You can link to your website or landing pages from the email
HTML email can be a hassle
HTML email development can be a hassle simply because there are no standards between different email clients. For example, Gmail and Outlook render CSS and HTML differently which leads to lots of problems. With HTML email there is no JavaScript either – all you can use is inline styles.
How HTML email works
HTML email is like designing a web page – HTML attributes, inline CSS, tables, the works. The only thing you need to keep in mind is that email clients rendering engines differ so you need to limit yourself to a tiny subset of CSS and HTML.
HTML email tables
Designers often use tags such as nav, footerfor, article, section, header or div when building web pages – HTML email devs have to use HTML tables in order to create email campaigns.
Styling of these tables will use attributes such as border, cellspacing, cellpadding, align, bgcolor, height and width. Inline styles can include max-width, width and padding. This is the only way to create robust email layouts.
Images
Using images in your HTML emails is quite similar to using them on web page, apart from one little problem – most email clients disable images by default and your subscribers will often get confused. There’s really no way of automatically enabling images but with the clever use of alt-text we can provide subscribers with some context.
Call to action
With HTML emails we can include clickable hyperlinks – instead of placing links within the text, you can use big and noticeable buttons to create call to actions. While many marketers use linked images instead of buttons, these are not effective for the reason stated above – buttons can be built and used in e-mails even when images are disabled.
Responsive HTML email
Responsive sites and responsive email have three things in common: media queries, flexible layouts and flexible images. The only difference between the two is how these components are implemented.
Flexible pictures
This part is not too hard but keep in mind that if you set your width to 100% some email clients may have problems rendering the images at their optimal size, unless you define height and width using HTML attributes.
The first thing you have to do is make sure that your images are properly coded. If you want to make your images fluid simply add a media query in the head of the email:
img {
width:100% !important;
height: auto !important;
}
Keep in mind that social icons and logos usually stay the same size on almost all device – this is why it’s a good idea to target flexible images using a class.
Flexible Layouts for responsive HTML email
Although web designers rely on semantic elements to build responsive design some limitations do still exist when building HTML email. For example, all tables should use percentage as their widths. You can create a container table with specific dimensions in order to constrain the width of your e-mail design – some clients such as Microsoft Outlook can’t handle percentages very well and it may lead to a weird looking email.
Media queries in responsive HTML email
Media queries in emails work the same way like in web design. When you include a media query in the head of the email, you’ll be able to target specific device attributes and adjust styles when needed. For example, if you want to target viewports of 525 pixels or under it, you can use the following example:
@media screen and (max-width:525px) {
table[class=“my_table”] {
width:100% !important;
}
}
This overrides all inline styles and HTML attributes, effectively forcing the table to take the full width of the mobile screen.
If you want to improve mobile user experience, you can also make your test and buttons bigger. Nested tables can be targeted with the code above as well.
Although media queries are great for creating enticing user experience on mobile devices, they are not supported everywhere – the Gmail app, Windows Phone 8 and older generation Blackberries tend to ignore media queries.
Adrian Ababei / May 16'2016
WAI-ARIA or simply ARIA is a set of attributes which can be added to various HTML elements. These attributes are used to communicate property semantics, state and role to assistive technology through the accessibility APIs which are implemented in browsers.
W3C HTML specifications provide information regarding which ARIA attributes can be used on each HTML element.
Developer (un)friendly information
WAI-ARIA’s 3.2.7 section specifies certain requirements but these are not web developer friendly.
These requirements take the form of two large tables which include features with constraints – if you can use an ARIA attribute, the element is not listed. The reason behind this is that the purpose of this information is to be read by conformance checker implements and browsers, not developers.
ARIA attributes can also be used on a particular element – in the past one would have to go to the ARIA section and then go through the tables to find the desired attribute or element in order to locate its ARIA rules.
Developer friendly information
W3C HTML specifications have recently been updated to include ARIA information as well, which until then was absent. Each introduction section of each element definition now features ARIA information such as property attributes or allowed ARIA roles. This means that developers can find the information they need with ease, without having to search for it in the spec.
If an element can have roles set to it, it’s stated in the intro – a button element intro for example includes all possible ARIA role values and indicates the default role of the element, which does not need to be set manually. Each role is also liked to a description within ARIA’s reference section of the HTML spec which also includes a list of allowed aria attributes for each role value with other links to properties states and roles.
The idea behind this is to help developers get all the information they need in order to produce accessible things with HTML.
Adrian Ababei / Mar 27'2016
HTML 5 is currently the latest version of the Hypertext Markup Language. Unforunately, it’s not yet supported by all of the popular browsers, especially when we’re talking about older versions of popular browsers such as Firefox or Chrome. That being said, HTML4 is supported by every browser available, which gives it a bit of an edge.The doctype declaration is also much shorter in HTML5:< !DOCTYPE HTML >As compared to HTML4’s doctype declaration:< !DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""< html" >http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >< html lang="ar" dir="ltr" xmlns="" >http://www.w3.org/1999/xhtml" > HTML also boasts new tags such as:< audio >< video >< article >< nav >< header > What this means is that you won’t use the same tag for everything, as previously done in HTML4 – these tags offer a standardized structure and makes them easier to read.Footer and Header tags don’t only mark the end or the start of a page but can mark the end or start of a section as well. Basically, you can find multiple instances of these tags on the same page you’re working on.Some tags from HTML4 have been found redundant and thus have been removed from HTML5 – browsers don’t support these tags so it’s a good idea to have them removed:< acronym >< applet >< basefont >< big >< center >< dir >< font >< frame >< frameset >< noframes >< strike >< tt >HTML5 also offers error handling, a feature which was much desired by web developers for years – this basically means that each browser you test will give you the same error if something doesn’t work right. Meanwhile, HTML5 is constantly growing and developing, you won’t hear about the “finished” version of it anytime soon – it just gets better and better. With HTML5 you can use 3D or 2D effects and graphics, allowing you to create more interesting projects.HTML5 video is starting to replace Flash very quickly – YouTube started using it due to its better optimization and less resource use. Another advantage HTML5 has over Flash is that it doesn’t require any installation and devs don’t need certain tools to write code, as is the case with Flash. Some developers may prefer Adobe Dreamweaver but it’s not really needed. Edge is a HTML5 animation tool specifically designed to produce animations very similar to Flash.
Adrian Ababei / Feb 25'2016