Our colleague, Colin Cieloha, American author and content marketer at Skilled.co recommended the HTML5 canvas cheatsheet developed by his company (and embedded below).
Colin writes about everything that will draw his attention with a focus on the mobile and e-commerce space. When he is not writing he is spending his time traveling the globe and snowboarding. You can follow him on his Twitter at @ColinCieloha or on Linkedin. We asked Colin a number of questions about this resource. Details are below.
Become a Canvas Master with this HTML5 Cheat Sheet by Skilled.co
Why is it important for web professionals to know/ use this cheat sheet?
It saves time! Instead of having to remember all the coding or search for individual codes, an HTML cheat sheet provides all of the most used codes in one easy place. There’s a lot to be said for having all of that extra effort minimized, the common codes are just a click of your bookmarks away. This is convenient for those freelance designers that are in a time crunch as this allows them to complete their work faster and reach deadlines.
Why should they be focused on canvas now?
Canvas technology is amazing because it’s super easy to use. For example, Canvas can draw colorful text to help your message pop on the screen – and you can even animate it! HTML <canvas> objects can move, too, whether it’s just a few bouncing balls or an intricate animation that tells a story. For designers interested in gaming software, the <canvas> element is a brilliant choice for building characters, worlds, and then setting it all into motion.
The <canvas> element runs into some trouble with older browsers, however, and may not be supported. Canvas is, however, supported in all recent versions of all major browsers, so as long as your browser is updated, Canvas should work just fine. Canvas’s default size is three hundred pixels by one hundred and fifty pixels, width and height respectively, but is customizable. You can adjust the size of the canvas by using the HTML height and width property in the program.
With Canvas, function names are short and easy to recognize, unlike functions written in CamelCase. Identifiers in CamelCase often require lowercase where it would be more convenient to use all caps. For example, acronyms. It’s much easier to identify a function, if acronyms like HTML or SQL are written in full capitalization, but CamelCase sometimes negates this convenience.
This causes a serious headache for designers when two acronyms need to be side by side in a line of script: “parse DBM XML” would become “parseDBMXML” or when the function starts with an acronym, like “SQL server” (which the designer would be forced to convert to “sQLServer”). Even if a programmer considers acronyms lower case words and writes “oldHtmlFile”, “parseDbmXml” or “sqlServer”, it causes a mess because it makes it difficult to discern if it an acronym or not. Best case scenario, the designer wastes time. The worst case scenario, they make a mistake and now must comb through complicated lines of script to amend the problem.
Hopefully this sheds light on the massive benefits of the Canvas cheat sheet. Using this cheat sheet will save you time and help you to become a more efficient programmer, web designer, or even help you gain more solid experience as a beginner in this field. I encourage you to go check out Skilled.co‘s Canvas cheat sheet below and begin to create using their helpful, easy to read codes. Have fun creating and I hope this saves you more time!
This article was written by Junaid Ali Qureshi. He is a digital marketing specialist who has helped several businesses gain traffic, outperform competition and generate profitable leads. His current ventures include Elephantation, eLabelz, Smart Leads.ae, Progos Tech and eCig.
Learning web design techniques and tricks is easy. No matter whether you have the right skills or not in the start; by repeating and learning from the mistakes and polishing the weak areas you can easily step up a notch and fall among the highly experienced and professional web designers. The problem that many web design experts encounter here is the challenge to keep up their good reputation and to improve the skills they already have.
Do you have a lot of projects lined up? Every professional web designer does. The real question is whether you have different, innovative ideas for each of them or not? Wouldn’t using the same web design techniques on each project make your style monotonous? This is something every design expert worries about. To help you get through this transitional phase with ease; we have compiled 5 essential tips that help to rejuvenate the web design skills of every expert.
There are several tutorials and videos through which you can learn how to advance your web design skills level; but, every designer needs some instant tips as well. These tips help them achieve goals earlier than expected. One thing is assured; these tips are no shortcut to success but merely the best techniques used by experts worldwide.
The 5 tips that will help you improve your skills are as follows:
Always sketch a rough design of your web before working with the tools. Have you ever seen an architect work? He lays down all the plans on a sheet of paper, reviews them, goes through them again and again, gets the approval of the client and only then proceeds to the next step. The number one tip here to improve your skills is to adopt the routine of making a rough draft of the website you are planning to develop. Once you have made a rough sketch, you can make changes if needed or move towards developing the final website. If you aren’t comfortable with the pen and paper idea, you can use various prototype building websites and apps to get a view of the rough version of the website.
Stay in touch with the latest style guides. Make sure you have your own style guide or you follow a well-written style guide to design the web page. This will help you build the website in a uniform fashion. Keeping in view the template of the website and the effect you would like to add or not; you can either improvise the pre-written style guide or make a new one. Try to make an exquisite design that differentiates you from the other competitors in the market. Large font size is in fashion these days. Try to use it in your template and make some space for typography as well.
Upgrade, expand and re-evaluate your web tools. Web design is not simple at all. You have to use several tools to achieve the effect you are trying to present. It requires using old as well as new tools to bring an innovative idea into a real form. Tip number three states that you need to upgrade your web tools. Make sure you are using the latest version of the web tool and get its updates on regular basis. Add more tools to your toolkit and experiment with new ideas. Only then you can bring versatility to your work. Our company offers new tools and features every now and then. It is the job of the web designer to incorporate them properly into the website using their skills to gain maximum benefits.
Keep your SEO knowledge up-to-date. We have seen that this tip has been repeatedly offered to the readers on different platforms but the truth is, no matter how much we try to escape it, SEO rules and regulations are the standards that every website has to meet. Thus, strengthen your grip over the SEO guidelines. Use SEO optimized keywords, headings style, high-quality content and other linking features to stay in the game. Practice merging SEO techniques in your work project to revamp your skills to a better scale.
Pick catchy and original images for your web page. A web page is defined by the images, content and its style. You need to make it perfect to get a better ranking and to impress the clients. Many web designers use free Google images that are available (but that’s old news now). You need to go for the options other than this to improve your skills. Try investing in premium stock images or create an image from scratch appropriate tools. You can also capture high-quality photographs and combine them with your own sketches as well.
As web designers, we are already familiar with all these tips. However, it is always good to review these basics periodically. Make sure you follow them and you’ll see positive results within no time!
We had the opportunity to communicate with David Braun (co-founder and CEO of TemplateMonster.com) recently. TemplateMonster is a marketplace featuring 46,000 templates for many different types of websites.
Why should Web Professionals care about this?
TemplateMonster can save you time
Templates exist for major platforms (WordPress, Drupal, and much more)
This means you can speed your workflow
David Braun is a co-founder and CEO of TemplateMonster.com. This company is the oldest and the most experienced on the market in this area. We invited David to talk and provided some questions for our discussion.
David Braun, co-founder and CEO of TemplateMonster.com
What is TemplateMonster.com from your point of view?
TemplateMonster has become a marketplace now. It features 46,000 pre-designed templates crafted for different types of sites, business niches, and engines including the most popular platforms: WordPress, WooCommerce, Joomla, Magento, Drupal, PrestaShop, and Moto CMS. Our aim is to meet the requirements of as many customers as possible. We offer plenty of cool stuff apart from the ready-made templates. For instance, landing pages, plugins, email templates and many other products. 100k people are visiting the site every day. A team of 427 geeks is working for TemplateMonster. Their joint efforts let TemplateMonster reach $15M in revenue.
Why should web professionals care about companies like TemplateMonster?
Because it’s beneficial for them. Cooperating with TemplateMonster frees their time, speeds their workflow, and lets them earn much more money.
Today all business owners understand how important it is to promote their services/products online. But not every entrepreneur is ready to pay for custom design, hire a developer, and create their online presentation from scratch.
They want to get their website within a reasonable budget, they want it to be quality, to look good, work flawlessly, and don’t wait for ages before their project will go live.
Web design agencies can cater to all these needs if they use our templates.
Tell me about the history of the company and how it was launched.
TemplateMonster was founded in 2002. Can you imagine that: people around the globe used our products when you knew nothing about Facebook and YouTube. We watched the evolution of the web and were proud to contribute into it. Hundreds of thousands websites you see today were built on the basis of our templates.
How everything started… I had been working at a custom design studio then. We tried our best to deliver top-quality products, but, unfortunately, most of our potential customers considered our services too expensive for them.
One day, I saw a designer who used a ready-made template to simplify and speed up his job. That was the moment when an idea to launch TemplateMonster crossed my mind. Eventually, this idea started to turn into a successful business.
Our company has held a leading position in the market for almost 15 years. Of course not all days were fine for us. We survived the rainy ones when something went totally wrong with our products. We got negative testimonials. And the bitter truth is that some of them were true. However, most of them referred to our outdated templates. What did we do? We just removed them from our marketplace.
They say “What doesn’t kill us makes us stronger”. And even negative feedback can be useful. We thoroughly analyzed it and took the right turn. We got deeper understanding of what our customers need, and gave it to them.
Thanks for sharing your history. Why should one rely on a template?
Both entrepreneurs with little to no development skills and professional developers use our templates. All our customers get their benefits from our products.
The best thing about templates is that TemplateMonster’s customers see the final result, a ready-made product before paying any money for it.
Templates save time, money, efforts, nerves, whatever, and guarantee satisfaction with the future website.
What are the advantages of this approach instead of coding all by hand (or using Foundation or Bootstrap or other frameworks)?
Entrepreneurs get independence from designers, coders, and other professionals who sometimes overrate their work and don’t meet the deadlines. They don’t need to spend hours and hours searching for a responsible, skillful freelancers who may design something that they may be disappointed with in the end. As I have mentioned above, at TemplateMonster you see the final result at once. In other words, you see a ready-made product you are paying for. All you need to do is just replace the default content with your own.
Suppose you are just getting started and have no idea how to install the template, add your logo and other content, change colors, etc. You think only about the ways to generate more revenues and have no desire to mess with all those things.
So, you want to skip installation, customization or, say, integration with Google Analytics. Then, contact our Service Center. Our trained professionals will take care of everything and deliver you a ready-to-use site within 24 hours. Some tasks are completed even faster, i.e.: we install the template and plugins within 3 hours. There’s no issue members of our Service Center can’t cope with.
As to the coders knowing Bootstrap and other frameworks. Developers who are able to build sites themselves pay money for our products because it is advantageous for them.
With the help of our templates, developers considerably speed up their working process. They deliver more projects and earn more money respectively. We have a vast choice of templates in stock, which means that anyone can find the theme that meets the requirements even of the most picky customers. Creating something from scratch simply makes no sense if our marketplace offers so many ready-made designs. It’s like reinventing the wheel. Smart developers prefer to customize something here and there and deliver the website to the customer as quickly as possible.
I would like to tell you about the project we have launched not so long ago. It gives developers from all over the world an opportunity to get an official certificate from TemplateMonster that proves their skills. They just need to complete a course and then pass a final test (or pass the quiz at once) at our Certification Center. Having a certificate from a globally recognized web design company is a great way to improve your online image and look more credible for the customers.
Besides, having the certificate from TemplateMonster lets you get into Web Studios Catalogue, which gives a heap of additional opportunities.
You raise good points about certification. That is why Web Professionals has been certifying web designers, developers and more for so nearly 20 years.
What are the disadvantages of using a template?
Ok, you caught me;). It’s a tricky question, but I will answer it.
There is an opinion that using a template you fall under the risk to be unoriginal. If you’re going to use a template, then the chances are that you’re not alone, that’s the truth. But what is your chance of seeing a similar website on the Internet among millions of websites if you have bought your template from a marketplace like TemplateMonster with its terrific choice especially after customization? To my mind they are next to nothing. However, if it is crucial for you to be the one and only owner of the design, you can buy it out.
The quality of available templates varies, but in some cases, you might find the choices are rather basic. Some templates rely on you to fill in most of the gaps, and may have a poor set of graphics or visual elements. Frankly speaking I don’t see a big problem here as filling the template with your own content makes your website unique.
Using a template is unchallenging. Relying on templates to put together your projects, means you don’t get the benefits of learning the ins and outs of the software you’re using. But don’t you think that this is the essence of the template – to speed up and simplify the process of website launch? Not all entrepreneurs want to learn to code, design, and so on. They just want to get their benefit from the brand new website asap. A template gives them this possibility. In case they want to study everything that was left behind the scenes, they can sign up for one of our free educational projects (like “Your web studio in 61 days marathon“) and make up leeway.
Templates are naturally designed to help you get the results as quickly and easily as possible, but in many cases the customization options can be limited, restricting what you can do with your files. That’s why it is important to read the template’s documentation carefully before the purchase. Don’t want to read? Watch the short video from our playlist on YouTube. Don’t want to watch the video or can’t find the relevant one, ask the support manager. They are always available to answer all your questions and help to choose the right template for your purchase. Don’t worry, the guys will work until you are 100% satisfied.
What other products/services do you offer?
2016 became the year when our team focused on developing flagship templates. They are much more multi-faceted compared to our regular products. Let me explain the things with using flagships on the example of WordPress templates. Of course I can’t help mentioning the recent release of Monstroid2 – Multipurpose WordPress Theme. It’s not an ordinary template, it’s a whole toolkit to build an online magazine, business site, personal portfolio, web store, whatever. You can create a complex portal combining several types of sites into one as well. Supposing you want the impossible from a single template: to present your company, plus share some interesting info with clients and sell products at the same time. It’s hard to believe, but using Monstroid2, you can build a business site, add blog and store functionalities to it. Monstroid2 is a one size fits all solution for all the needs you may have.
Here’s how it was. At first we created a flagship for WordPress because it’s the most popular CMS in the world. But then we decided to develop flagships for all popular engines: Joomla, OpenCart, PrestaShop, etc.
But that’s not all, we didn’t forget about the guys who don’t use any CMS at all. You can find new flagships among HTML5 templates. You already know that it’s one of our goals to meet the needs of everyone who comes to TemplateMonster marketplace.
Please note that we don’t charge more for flagship products. You can get any of them for the price of a regular template. Considering professional 24/7 support that we provide for a lifetime, our flagships are the best deals you can find on the market today.
It also should be mentioned that the users can figure out everything by themselves, without professional help. Every template comes well documented. The instructions guide the users through all ins and outs of using it. There are also numerous detailed tutorials at our Help Center and Startup Hub for those of you who are just at the start or want to learn how to handle their template by themselves. What’s more, we run a blog to share a lot of educational content with our audience, particularly, free eBooks, webinars, tips, tools to become more productive, and much more. At TemplateMonster, you won’t just learn how to build beautiful and functional websites lightning-fast, you’ll learn to enjoy the job.
What differentiates you from the competition?
The cost and value of our products comes to my mind first. Our prices are not higher than the ones of our competitors. If you want to save, just search Google and you will always find promo codes to reduce the price by 10%-40%. We always offer great discounts on Christmas, Independence Day, and other public holidays.
Sometimes you find out that the price for this or that template is a bit higher, but, remember about the value we provide. All our customers get more goodies as bonuses to their templates. For example, all our products, except for GPL WordPress themes, are delivered with HD images shown in the demo. It’s a good opportunity to save, as there’s no need to buy stock photos. At TemplateMonster, you can also benefit from free professional technical support.
How long are your templates supported?
TemplateMonster is the only website developer that provides this service for a lifetime without charging any extra payment now. Our competitors provide it for free only for a limited period.
I don’t think it’s fair. Some people don’t use the template straight away. It’s your right to decide when to use the product you paid for. But with a time limit on free support, you’ll have to pay extra money to get consultation, say, in half a year or stay on your own with your issues.
This is not our method. We are ready to help our customers any time at TemplateMonster (the same day, in a week, in a month, in a year, and so on). What’s even more important, our team of experts works until it’s over. Every customer should be absolutely satisfied.
Though, words are not a weighty argument. Thanks to our unsurpassed customer service, we entered the top three of web design companies per the TrustPilot rating. Do you believe this bullet-proof resource with verified customers reviews? So many people can’t be under a delusion.
Here is a video to prove my words.
David, what happens with a purchased template as web technologies continue to evolve?
It’s a good question. You need to update your site regularly and redesign it from time to time if you don’t want to look outdated. Trends are changeable, you’d better not miss the moment when your site starts looking rusty. Customers never take your seriously if your corporate web presentation looks outmoded.
I also recommend you to check how user-friendly your site is in terms of navigation, readability, and other essential aspects. It’s very important to test how it works on smartphones and tablets all of us use to browse the web on the go. Your site must adjust to all modern mobile devices, otherwise you will lose clients. If your site is not mobile-friendly, you can forget about high SEO rankings. Google doesn’t like such kind of sites.
BTW, flagships owners may not worry about the matter. Their websites will serve them for many years to come as regular updates are included into templates packages prices.
Thank you very much, David. You provided lots of thought provoking information for both practicing and aspiring web professionals. Have any more questions for David? Ask them in the comment section below.
I recently spoke with Ben Forta (Adobe) about Adobe Spark (a new set of free tools to allow individuals to create compelling and creative content quickly.. In this short overview, he discusses those aspects important to web professionals everywhere. The full discussion is available to our members (once you login, scroll down to find the link).
For those who desire a transcript of the above captioned interview, we provide the following.
[Mark DuBois] Today, I have the distinct pleasure of speaking with Ben Forta, Senior Director of Education at Adobe.
Ben, thank you very much for agreeing to this; we’re going to talk a little about Adobe Spark. I’m wondering if you could share with our listeners what Adobe Spark is. [Ben Forta] Great, thank you Mark. Happy to be chatting with you and Happy New Year. Adobe Spark is a new product. It has only been out since mid-last year, so it is relatively new
Spark is a tool that is made available either through a series of apps in iOS or as a web experience running inside the web browser. It’s a way to create content, content that is designed to be easily shared and easily distributed so you can do things
create really interesting graphics designed specifically for social media videos for story telling or idea sharing or create long form stories in text format. It is a way to take ideas that are really important that you want to share and publish in web friendly, very shareable social friendly formats and do it quickly and easily and it is fun. It is important to know that the kind of content you create in Spark, you could create in our other tools. You could create images in Photoshop and you can create videos in Premiere and web pages in Dreamweaver; sometimes you want a tool that does less but does it really quickly and easily and guarantees good looking professional results. That is problem Spark tries to solve. Getting something done very quickly and efficiently and looks really good and is designed for sharing. And I should add that Spark is designed for a very shared, very social space, which also helps. [Mark DuBois] That is very encouraging. If you had a single message to share with web professionals, what is the single biggest message you want to convey to the web professionals listening to this? [Ben Forta] The single most important thing to know if no matter what you are trying to do, time is of the essence. Our job has always been to give tools to be able to create content and publish get the work out there and share create and be as expressive as possible. Spark just continues that mission and solves the problem we haven’t really addressed before that is getting things out there really quickly. In today’s age of instant information, campaigns that are run on line on Twitter or Facebook, for example. The days of spending many days, weeks or months on assets are still important, but not always. That is not the only way to create content anymore. Spark is a complement to the tools you already have in that it solves the problem of creating compelling content that is designed specifically for online use and social engagement very quickly. It is a new tool. It is easy and fun to use. It has no learning curve. Runs on multiple platforms, synch built in. It solves a new set of problems in a new era. Everything we are hearing from hundreds of thousands/ millions of users is it works very well. [Mark DuBois] I am personally quite pleased with it as I said earlier I could live without it at this point. And for those that are listening, I’ll include the URL. It is Spark.Adobe.Com and you can sign up and use it. Ben, thank you very much. Do you have any last thoughts, comments about Spark in general? [Ben Forta] You really should give it a try. Spark.Adobe.com. It runs on Windows, it runs on Mac, even Chromebooks for younger users. If you go there from an iOS device, iPhone or iPad it will give you access to the apps. Try it, nothing to lose. Login with Adobe login, login with a social login and give it a try and I think you will be amazed at how quickly and effortlessly you can start creating very compelling content that is fun and engaging and interacts with everything else we have done. And another nice thing about it is these apps are small and focused. We are innovating very quickly. In the last few months alone there have been multiple new features all the time. We love hearing from users especially very creative users. How to improve them. Let us know. The team is available. The Spark team is on Twitter, Facebook, Instagram, they are everywhere. We love rolling in new features all the time. Give it a try and give us your feedback. [Mark DuBois] Excellent. Ben, thank you very much for your time today.
We have previously mentioned this infographic in some of our social media feeds (Twitter and Facebook). We thought it might be helpful to provide this on our blog as well (with the author’s permission). In our opinion, it is a good perspective of the three major content management systems. Clicking on the infographic will open a new browser window/ tab with the full article.
Presented by Skilled.co (they have further information supporting this infographic on their site)
As we all know, SSL certificates help protect the information transmitted between the web server and the client. Given the increasing cyber security attacks (and associated media coverage), data breaches and theft of payment processing data, we thought it appropriate to remind readers of the importance of SSL certificates.
Vivek Ram is a Technical Blog Writer from Comodo. He writes about information security, focusing on web application security. He provided the following information we wanted to share with readers of our blog. Many thanks to Vivek for providing this article.
“As a small business owner or even the owner of a larger company or ecommerce site, cyber security news about a data breach in payment processing on a website may be just one of the things that keep you up at night.
The good news is that cyber security consultants and professionals can develop plans, run a network security audit and even develop a network security policy that is designed to keep this type of data safe from hackers and breaches.
However, there are also some very simple security measures that can be put in place to provide encryption security between the server and the browser. This is known as SSL or Secure Sockets Layer and it has been the technology in place to protect data transmitted online since its introduction in 1994.
Today, the use of the new version of SSL, Transport Layer Security or TLS, is based on the early SSL technology. Even through TLS is the correct name, most of the Certificate Authorities and IT professionals still refer to it as SSL.
To protect your website and the information transmitted between the web server and the client, SSL certificates provide authentication and encryption. To understand how this provides both customer and user protection as well as protects the site itself, consider the following essential features, factors and functions. ”
The Trust Factor
“When existing customers or new prospective customers arrive at your website, the first thing they will look at is the quality of the landing page. However, once they start adding items to their cart and going through the checkout process, most customers will have taken a glance up at the address bar or to the sides of the page.
What they are looking for is the universal sign of online security. This is the padlock in the address bar that indicates they are on a site using SSL technology. Now, there is also the full green address bar which signifies the use of an EV SSL or Extended Validation certificate. This is the highest level of validation possible through any CA and for any type of website. Most customers aren’t certain about how the technology works, but they do recognize the need to have that padlock and perhaps the green bar present.
Glancing to the side or the bottom of the page will confirm the use of a specific Certificate Authority (CA). All of the major CAs will have their own site seal. This is a graphic that is used to designate the security of the website and the use of a particular product by a particular CA.
With these things in place, your website will have a decrease in the amount of abandoned shopping carts, something that is common if the customer gets through the selection process and then realizes on the checkout page that the padlock or green bar isn’t present.
However, and even more importantly, it makes your website safe for your customers to use. This preserves the reputation of your website and your company.”
Full Encryption at 256 Bits
“The use of SSL/TLS certificates also provides full encryption at the industry standard 256 bits. This encryption and decryption are done through the use of a pair of keys. These two keys use Public Key Infrastructure or PKI to provide internet security protection for online data.
The public key is used to encrypt data between the browser and the server. The public key is available to all because it is public. However, it is only recognized by one unique private key.
The private key is located on the server that hosts the website. When data comes in encrypted by the public key, it is unreadable unless it is decrypted by the private key. This protects all data transmitted from the website including financial information, personal information or even general information.
The public and private key are actually a long string of what looks like random numbers. They are able to recognize each other through a complicated mathematical relationships that is never duplicated and is completely unique.
The 256 bit encryption is virtually impossible to hack or break, even with brute force types of hacking attempts. The level of encryption offered by SSL certificate technology has changed over time and will continue to evolve as computer systems advance.”
Validation and Verification Process
“To further provide complete protection to your website against spoof websites or fraudulent website trying to look like your site, the CAs have to follow a rigid and very complex process to verify and validate the application for any type of SSL certificate.
This is based on the AICPA/CICA WebTrust for Certification Authorities Principles and Criteria and outlines what verifications must be completed for the various SSL certificates at the different validation levels.
As hackers or spoofing sites have to provide the necessary information and this has to match with records on file with a wide variety of databases and trusted sources, it makes it impossible for these criminals to be able to obtain an SSL certificate for those fraudulent sites. This not only protects your website but with the SSL certificate in place, it will also protect your customers.”
I had the opportunity to speak with Glenda Sims (Deque) about all the activities happening with WCAG (Web Content Accessibility Guidelines) these days. In this 5 minute overview, she discusses those aspects important to web professionals everywhere. The full 22 minute discussion is available to our members (once you login, scroll down to find the link).
In a nutshell, there is a great need for those who have a solid background in making sites accessible. The demand far exceeds the available work force.
During our discussion, Glenda mentioned these resources. Interested parties may wish to check them further.
As you know, we are big proponents of accessibility. We believe that content should be available to anyone at any time on any device. As 2016 draws to a close, it has become apparent that many web pages rely heavily…
If you design or develop websites for a living, more than likely you’ve heard about the importance of web sites which are accessible and usable for everyone. So, what’s new and newsworthy today and why should you care?
Accessibility has a far reach
In a nutshell, today’s Web Accessibility and Usability best practices reach beyond the blind, the disabled and the hearing impaired to include today’s busy power users and a multitude of mobile devices. People want access to information. The web is the de facto “go to” location these days. This is why it is so important to make certain everyone has equal access.
Why does that matter? Accessibility is a civil right.
Monetization – if your site is not accessible, you may face a number of issues (from complaints to lawsuits). It is so much easier to incorporate accessibility into your site development process.
Differentiation – accessibility helps in other aspects (including helping with search engine rank and overall user experience).
Web Accessibility Summit findings
To better understand the value of what this means to today’s Web professionals, I participated in the Environment for Humans Web Accessibility Summit in early September, 2016. Here are some of the key take-aways:
Accessibility helps the overall user experience for many who do not have a disability (consider those working in bright sunlight/ experiencing screen glare).
It takes a team (know what aspects of accessibility you are good at and where you need help – and it is sometimes important to know when you need to ask for help).
Individual experiences vary significantly and the way we perceive a site often has to do with the context while we experience said site (for example, consider your willingness to tolerate page loading delays while you are trying to re-book a flight because you are at the airport and yours was just cancelled).
Some groups are working very hard to develop new technologies to assist those with disabilities.
For project managers
If you are reading this (and manage projects), it is important to champion accessibility because it improves the overall user experience at your site. One should not think of accessibility in terms of edge cases; think in terms of those who have temporary issues (whether holding an infant and trying to look up information about your product or suffering some motor impairment due to a stroke). As a project manager, you may need help developing a business case for accessibility. There are sites which can help (such as http://www.w3.org/WAI/bcase/Overview.html).
For accessibility testing
If you are testing for accessibility, it is important to include screen captures in your report. Identify the exact problem (including the snippet of code). Also provide examples of how this problem may be repaired. Keep in mind that when multiple people report a problem, they will likely word it differently. This is why screen captures are important to include. It may also be helpful to include video of you interacting with the site using tools like VoiceOver (Mac), NVDA (Windows) or ChromeVox (for Chrome browser and ChromeOS).
Smart Charts Project
During the Summit, I learned about the Smart Charts project (for example, http://describler.com/#intro is a prototype data visualizer) from Doug Schepers. Surprisingly, if you are using a screen reader, you can gain more information from a chart than is presented visually. The above site should be examined visually and with a screen reader to experience the difference.
There are many resources which one can use to test for accessibility and to better understand how to code properly. At a minimum, you should be aware of the ADA site – https://www.ada.gov/access-technology/. We are developing a list of accessibility resources which will be available via our SchoolOfWeb.org site for our members. A couple of short courses at our SchoolOfWeb.org site will soon be offered covering the fundamentals of web accessibility.
We encourage you to strive to make your sites accessible, not just for legal reasons, but because it is the right thing to do.
This year’s national web design contest in Louisville, KY, was another fantastic and inspiring event. It is always great to be among so many talented and passionate web designers and developers. We saw a significant improvement in the level of knowledge, skills, and abilities competitors brought.
We also trained competitors further in areas such as web accessibility, security, and web design process. Web accessibility is an area which is too often overlooked. Yet, by making your web pages accessible, you actually increase search engine rank (after all the search bots visiting your pages are blind). There was an increased awareness of ARIA (Accessible Rich Internet Applications) after our training. ARIA helps make web pages accessible when more advanced techniques are applied to these pages. Security was also highlighted in our training. Anyone reading this is likely aware of many data breaches which routinely make the news. We covered the fundamentals (such as two factor authentication and strong passwords) and also reviewed secure coding “best practices” one should employ. Many competitors also learned about the process professionals currently follow (and emerging trends) as they design websites for clients.
Training session on web accessibility, security, and design process “best practices” before our competition.
Best practices stressed
We believe it is critical to help set standards and confirm web design educational pathways include what is happening in the industry today. This is why we hold this national contest every year. It is also why we reach out to those running state competitions so we have a common approach. The fact that we are seeing improvement from year to year means our message is getting through (to students and those who teach these topics).
There was a palpable sense of excitement on the competition floor this year as everyone tested their knowledge and skills against other teams (each team had to win first place in their respective state to compete; we had first place winners from 29 states competing in either our contest for high school students or our contest for post-secondary students). It was inspiring to see how some approached the tasks laid out in the client work order. Some broke their time into segments and put together a project plan and measured their performance throughout the day. Others worked closely as a team. We observed some who finished each other’s sentences during the interview process. That was real teamwork in action.
Competitors trying to complete tasks outlined in a work order during the competition on July 22.
What employers look for
Our efforts are also important to employers. We are helping competitors understand the knowledge, skills, and abilities employers look for in applicants these days. Those who conduct the onsite interviews of teams are the same individuals who hire web professionals. They asked many of the same questions one would anticipate in an actual interview. This means competitors had a chance to experience an actual interview (many for their first time). They should be better prepared when they are actually seeking employment in the field.
We are helping competitors better understand what is expected of them in the workforce, but we are also helping industry by raising the bar so those competing are better prepared when they enter the workforce in this dynamic and rapidly changing field. We are also helping them better understand what tools employers look for when hiring.
Gold, silver, bronze medals awarded
Winners were announced as part of the SkillsUSA National awards ceremony on Friday at the Kentucky Exposition Center. Roughly 18,000 people applauded those who earned gold, silver, and bronze medals in Web Design. First place winners received an annual subscription to Adobe Creative Cloud. Many thanks to Adobe for providing these. Winners also received a number of scholarships from various schools.
Riley Johnson (part of the team which won gold in our contest for secondary students) told us why he participated in the contest. “I participated in this competition to gain valuable web design and business skills from industry professionals. I also participated in it to meet and network with some of the other most talented web design students from around the country.”
Riley also offered this advice to those planning to compete next year. “To do well in this competition you have to focus on more than just web design. There were many skills being tested including interview ability as well as creating and presenting your development process. I think this competition is an excellent opportunity for aspiring web and software developers and I have been able to use the skills I gained here in other competitions as well as interviews.”
National web design contest champions on stage. June 24.
“Thank you” to those who helped
We also want to give a big shout out to all who helped with our competition. Jon, Steve, Chris, David, and Jonathan were onsite and did an amazing job of helping me coordinate the competitions. Shari, Brandy, Chandler, James and others spent hours analyzing the work of the competitors. We mention these 4 judging super stars as they have been judges for multiple years and always step up to the challenge (even though it means a couple of very long nights for them – and they all have day jobs). We appreciate your efforts immensely.
Every year, we ask members of the Web Professional community to help us review our competition rubric; serve as judges (we do all the judging remotely), and help in many related tasks. If you are reading this, what do you plan to do to help us next year? Sure, we are all busy, but we must make an effort to consistently train the next generation (and train them well). Otherwise, we are doomed to repeat past mistakes. We look forward to your involvement next year. You can always get in touch with us at: https://webprofessionals.org/about/contact/.