by Mark | Jun 8, 2018 | State of the Web, Web Design, Web Development, Web Pro Education, web standards
In a couple of weeks, we will be holding our 15th national web design competition in Louisville, KY. This involves competitors from many states at both the high school and post-secondary level. We spend a significant amount of time and money every year making certain this competition happens. Why do we do it? Sure, this is an opportunity for competitors to showcase their best work. It is also our opportunity to reinforce industry “best practices” in a field which is constantly changing. The main reason we do this is that we are influencing (and improving) the careers of these competitors.
Many changes made to our 15th annual competition
We have made a number of changes in our web design contest this year. For example, we will be bringing a server and network to Louisville. Competitors will each have their own container on the server (a sandbox where they can showcase their work, but other competitors can not see their work). Judges will be reviewing competitors work on Wednesday and Thursday evening. We have outlined both our server environment and network on our Web Design Contest site.
We are helping students prepare for jobs in our field
No, really, why do we do this? To paraphrase the old question “how do you get to Carnegie Hall? Practice, practice, practice.” Over many years, we have observed that many students struggle to identify and learn what is important in web design and development. Many do not have the opportunity to take formal classes (this is especially true in nigh schools). In some cases, when formal classes are offered, the materials covered are outdated. By participating in this competition, students learn what is expected in today’s business environment (with respect to web design and development). Practice is important along with the need to test your knowledge and skills against others. Competition brings out the best. Students are exposed to a formal interview (by practicing web professionals). We provide hours of training before the competition on many aspects of web design and development. In many cases, this is one opportunity that students have to interact with web professionals and learn what will be expected of them. While our time with competitors is brief, we do help them better understand what is happening in the industry today. Sure, technical knowledge is important, but process, teamwork, communication and related “soft skills” can make all the difference when dealing with clients. this is why we stress these aspects as well.
We are what we do. And how often we do it. And how we respond to feedback and suggestions for improvement on our work. These students have decided they want to pursue a career in web design and development. By focusing on current practices with web design and development, we are reinforcing knowledge and skills that students need to succeed in our industry. Students also have an opportunity to test what they think they know and see how it stacks up against others throughout our nation. This is why we do this competition every year. It is our opportunity to affect the lives of aspiring web professionals and get them started properly. Sure, there can only be one winning team at the high school level and another winning team at the post-secondary level. But every team participating is exposed to rigor and concepts they may not receive elsewhere. Every participant gets the opportunity to showcase their skills and knowledge.We often receive feedback after the competition that it was a lot of fun and a great learning experience.
International competitor also being chosen
We are also selecting a competitor to represent the U.S. in the next international web design and development competition (to be held in Kazan, Russia in 2019). In order to be considered for this honor, these competitors had to first win our national competition and were involved in a lengthy selection process. Two finalists will be competing in Louisville. One will be selected to represent the U.S. at WorldSkills 2019.
We bring a number of web professionals from different parts of the U.S. to Louisville to help run the two day competition (and provide an additional day of training). We also have judges reviewing competitor work remotely. All projects are uploaded to a web server and judges review aspects of this work with an emphasis on their expertise. For example, we have judges who specialize in UX/UI focus on those aspects on projects submitted by competitors. We have judges focus on graphics, type and related aspects and so forth. Competitors receive general feedback as to what they did well and those areas where they need to improve. In many cases, this is the only feedback they have received on their work.
Good, fast, cheap – pick any two
During our competition, we ask competitors to focus on getting things done quickly. We also ask they spend time creatively solving the problems presented. While we are not always successful, we try to focus on doing things the correct way (including comments in your code and properly naming variables, for example). Sure, it will take a little more time up front, but competitors will be able to submit work which is easier to maintain. Rather than spending money, competitors spend a more valuable resource – time – to complete the work orders they receive.
Comments and observations will be posted on our Web Design Contest site soon after the competition concludes later this month. We will be posting via social media channels during the event.
Are you willing to help our profession?
For those reading this, we are always in need of additional judges. It only requires a few hours of your time. You get the opportunity to see directly what high school and post-secondary competitors are capable of producing these days. You also have the opportunity to provide general feedback to these competitors (and many others reading your summary comments). If you are able to devote a few hours of your time on the evenings of June 27 and 28, please contact us. You will be amazed at how greatly a little of your valuable time helps aspiring web professionals become more successful.
Best always,
Mark DuBois
Community Evangelist and Executive Director
by Mark | Jun 1, 2018 | Industry News, WebProfessionals.org News
We suspect you have received more than your share of GDPR related notifications in the past couple of weeks. Rather than send out another email on the subject, we thought it might be worthwhile addressing the issue in our weekly post. You have thoroughly reviewed every email you received with GDPR in the subject line, haven’t you? We thought not. For those who are not familiar with GDPR (General Data Protection Regulation) [which took effect May 25, 2018], we recommend a quick review of the GDPR and you site. For those who need a reminder – Web Professionals (official business name World Organization of Webmasters) does not retain much in the way of personal information to begin with. We always take requests regarding data seriously and make every effort to keep said data secure.
Minors
If you are younger than 18 years, please use this website only with permission (and active involvement) of your parent/ guardian. Do not provide any personally identifiable information (such as your email address). Have a parent/ guardian contact us on your behalf when necessary.
Information we collect
As with many websites, we collect basic information about all visitors. This may include the date and time of your access, your IP (Internet Protocol) address, the website you visited before arriving at WebProfessionals.org and the website you go to when you leave our website. We track your operating system, screen resolution, and browser details. This is automatically collected. Such data is only used for high level analysis (unless you are trying to hack our website – in which case, such information will be provided to appropriate law enforcement).
We may use cookies and local storage to keep track of your session on our website. You can disable this in your browser if you do not want to have a customized experience when you visit our site.
You may initiate transactions on our website which involve credit cards, debit cards, online payment services and similar financial mechanisms. During those transactions, we will collect some information (such as your email address) and billing address so we can contact you in the event of questions. We do not store your credit card details (only a transaction code).
What we do with your information
We use the information collected to run our business. For example, we periodically send email news to our members. We use the email address you provided when signing up as a member to accomplish that. We do not provide customer data to third parties without your permission. You always have the option to opt out of any of our mailings.
There is one exception. We may (at our discretion) provide your information to law enforcement (or related government agencies) in the event of fraud investigations or other suspected illegal activities.
Login Credentials
Members create a username and password to access some restricted areas of our website. We recommend periodically changing your password (and keeping it long and complex). Your password is encrypted in our data stores and backups. We have no way of telling you what your password is. If necessary, we can issue you a new one (once you have properly identified yourself).
We also recommend logging out when you are finished reviewing that part of our website. If you are extremely concerned about this, we also recommend closing your browser when you leave our site.
Questions
If you ever have questions about what we do with any data collected or wish to have personal information removed from our data stores, please contact us.
As a member supported (and not for profit) organization, we take our responsibility to safeguard any information you provide as safely as possible. We have not (and will not) sell any of this collected information to any third party.
Best always,
Mark DuBois
Community Evangelist and Executive Director
by Mark | May 25, 2018 | Content Management Systems, Web Security
Today’s article is from our member Julia Eudy. Julia – Many thanks for writing this article and providing your insights.
When I think of the industry of web design, I think of the many talented people responsible for populating the internet with information over the past couple of decades. But our job is never done! From continual refinement of responsive design, to developing content worthy of Google’s latest search strategy; our jobs as designers and web managers is an ever-evolving landscape. In today’s market it is essential to stay current with technology and the threats targeting those we serve and those who search online. Without constant awareness and action by our peers in technology, cybercriminals will continue to challenge our time, patience, and livelihood.
Websites have become Key Point of Attack for Cybercriminals
While many believe that email phishing is a key entry point for most cyber criminals, it has become apparent that they are often using an unsuspecting website to hide their activity of malware designed collect valid emails and launch other criminal schemes. While some argue that nothing is hack-proof; content management systems built on open-source code have enabled the unsecure environment we now reside. It goes without saying that sharing code saves time; but is it worth the longer-term cost?
Let’s explore the leading CMS platform, WordPress. It is an easy-to-use interface making it popular among novice developers and DIY professionals, but it is often a prime target of hackers who specifically build robotic scripts designed to quickly search through the openly published source files looking for vulnerabilities. Technical web designers (those who know how to customize the code and apply advanced security settings) understand that keeping current on updates and effectively managing a recovery plan for the sites you have created has become a time-consuming task and one that is raising the overall cost of website management. However, the millions without some technical skillset, have likely already become an unsuspecting victim to one of the many ongoing threats facing the WordPress community.
A prime example of how open-source code created a breeding ground for a cyberattack happened in early 2017 when one of 20 hacking groups launched a digital turf war on WordPress by discovering a flaw found in their REST API script. A wide-spread attack impacted roughly 1.5 million pages of WordPress sites1 across 39,000 unique domains in a matter of days as reported by security plugin developers WordFence and Sucuri. Keep in mind that only 1.5 million of the 24 billion pages running WordPress2 are protected by these firewall applications.
Insurance Companies are Looking at Who to Blame for the Increase in Commercial Claims
From the outside looking in, the internet landscape is under attack, but who is to blame? This is a question many insurance companies are beginning to ask3 as their costs to cover cyber-attacks on commercial policies continue to rise.
Looking at a big picture, here are some general facts to consider…
- According to the Small Business Administration, there are approximately 28 million small businesses in America which account for approximately 54% of all sales in the country. 4
- In a 2017 report by Kaspersky Lab, the average cost for a data breach against a small and medium-sized business in North America was $117,000.5
- An article published in 2017 by INC Magazine, referenced a presentation made at the NASDAQ by Michael Kaiser, the Executive Director of the National Cyber Security Alliance, who stressed concerns about the attack on Small Business and that such attacks are expected to continually rise because of their (the small business professional’s) lack of awareness of the pending risks.6
- A 2016 study performed by Ponemon Institute LLC and Keeper Security revealed that the number one type of cyber attack targeting small and medium sized businesses was through a web-based attack with the web server being the most vulnerable entry point.7
- That same study by Ponemon Instutute cited “negligent employees or contractors” as the root cause of the data breach. 7
So, I ask you, when the Insurance companies follow the facts, who do you think they will turn to recover their loss?
- Will it be the random person who pointed out their vulnerability by successfully holding their web presence ransom? – likely not. That person is too difficult for them to track.
- Will they blame the contractor who their customer hired to create their website? – Yes!
In recent conversations I’ve had with insurance professionals, one question asked was, “Should web designers have an ethical obligation to inform an untechnical customer of the risks involved with having a website?” As a technology professional, I agreed that they should and most likely do, but it is often the customer who elects to not add to their expenses for proper technical support. Their reply – “Ok, show me the proof and we go back to our customer!”
Most web managers are aware that being hack-proof is near impossible to achieve; however, as web professionals we are hopefully more aware and have taken necessary precautions to defend our livelihood. Contracts, authorized “opt-out” forms proving we’ve informed the customer of the risks, and building trusted relationships with supporting contractors are just a few first places to start; but having our own policies to cover mistakes and cyber threats should also be considered.
Like our other certifications, we are exploring resources necessary to develop a comprehensive training and security certification to help web developers stay current with different types cyber threats that they may encounter. This certification would identify specific areas that are being targeted and give the opportunity for continued training opportunities to learn more or improve your skills in specific areas. This certification would also classify you as a Cyber Certified Web Professional which will identify to those seeking a web services provider that you have participated in training that is designed to reduce their web-based risks.
If you are interested in learning more about this certification and the time schedule for training and certification release, please contact us and let us know your thoughts.
CITATIONS:
- 1.5 million pages of WordPress sites
- 24 billion pages running WordPress
- Insurance
- Kaspersky Lab
- INC Magazine Article
- Ponemon Institute/Keeper Security Study
Author Bio
Julia Eudy is a Technology Consultant with specialties in Online Marketing, Web Design and Cyber Security. She teaches Content Management Systems (WordPress) and Social Media Marketing at St. Charles Community College in Cottleville, MO, in addition to managing a small Online Marketing firm (Golden Services Group) that focuses on online marketing solutions for small-medium sized businesses. Additionally, she is working with a group of professionals to create a training program designed to inspire K-12 students to pursue careers in technology and cyber security.
by Mark | Mar 30, 2018 | Web Design, Web Development
As members (and many readers) likely know, Web Professionals runs a national web design contest every year. This year will be our 15th year. For the past decade, we have recorded the technology used by individual team members to create their web pages. As one may expect a number of different editors are used. Each team has their preferred editor. For most of this time, we noticed Dreamweaver as the premiere editing tool being used by high school students and post-secondary students. This morphed in recent years to many using Sublime Text, Atom, or Brackets. We also saw an uptick in the use of Adobe Muse. We recognize many practicing professionals use a variety of tools. We also saw this week that Adobe announced the end of feature updates for their Muse product. We then heard from a number of teachers that they are concerned about the demise of Muse (many teach design students, not those specializing in web technologies). Frankly, we were surprised that so many have come to rely on Muse as an entry to creating web pages. We also have seen Adobe Spark being used. Editor’s note (August 19, 2022) Adobe Spark is now Adobe Express.
We recognize there is a disconnect between what is being taught in schools and what practicing professionals need to know. We see this first hand every year in the comments from judges in our web design competition. As one may suspect, we focus on web standards, process, and user experience (and don’t promote any specific editor). We do see trends and were surprised to see Muse being used in the competition for a couple of years.
This got us thinking about editors in general for web pages. We would like feedback from those visiting this page. What is your preferred editor for web pages? We have included a list of some editors which we have seen being used in our national competition (along with a few others we use). It would be most helpful if you took a moment and voted as to your preferred editor. If you don’t see it on the list, please let us know via comments. We set this poll to display these editors in a random order (trying not to influence the results).
Loading ...
Of course, this brings up the bigger question of what should be taught in schools (particularly high schools). We have been promoting web standards and user experience, not specific tools. Does this still make sense? We are keen to learn your thoughts and look forward to a number of insights and comments.
Best always,
Mark DuBois
Executive Director and Community Evangelist
by Mark | Feb 16, 2018 | Web Security
We are now midway through the second month of the new year. This should be a good time for web professionals to review and update their individual security practices. Do your daily practices keep you secure? Are you certain? It is easy to to become complacent with our practices, credentials and equipment. This might be a good time to review individual security fundamentals.
We have all seen the examples where passwords are taped to a monitor or under a keyboard. We know not to do that. But do we periodically stop to consider our daily practices and how they affect security? This might be a good time to ask ourselves the following questions…
Best practices
With respect to passwords – are yours long and complex? Do you use passphrases? Are they impossible to guess? Do you use a different password on each site? Do you keep your passwords in a vault? Do you change your passwords from time to time?
Do you use two factor authentication (because passwords alone are no longer enough)?
When you are traveling – do you use a VPN (if you must connect to a public network – such as a hotel or airport)? Do you keep your phone and tablet backed up? Do you have the ability to track a device (in the event you lose it)? Do you have the ability to remotely wipe said device (again if it is lost or stolen)?
Do you routinely update your applications and operating system? Do you do this on your phone and tablet as well?
Additionally, do you do a factory reset on devices before you dispose of them (or recycle them)? Do you confirm that all data has really been erased from the device?
Hopefully you have been able to answer in the affirmative to all the above questions. If not, this might be a good time to rethink your practices. This also might be a good time to discuss these topics with colleagues and clients.
Resources
We have found the following resources helpful (you might want to share some of these with your colleagues and clients as well). All are links to the SANS website. I am a reviewer of their OUCH newsletter. These are provided because they can also be easily shared with colleagues and clients. Hopefully you find them useful.
What other security practices do you employ periodically? Care to share stories of “best practices” and how they helped (either personally or a client)?
As always, we look forward to your comments.
Best always,
Mark DuBois
Executive Director and Community Evangelist
by Mark | Jan 26, 2018 | Content Management Systems, Industry News
As a web professional, you are likely aware that WordPress is used as the principle technology for over 25% of the top 10 million websites (actually now 29% based on the December WordCamp US State of the Word 2017). To better understand the reach of this technology – in the above mentioned State of the Word presentation, it was mentioned there are now over 47,000 plugins and said plugins have been downloaded over 633 million times.
Version 5 coming (Project Gutenberg)
We have recently learned that the next major update (version 5.0) will be based on Project Gutenberg. We understand this will be the most extensive update since version 2.0 of WordPress. As a web professional, it is important you understand the implications of this upgrade (and the potential effects with your clients). These include:
- the default editor is changing from the current TinyMCE editor (and changing significantly). If your clients are editing their own content, you need to either train them on the new editor or make certain you use the classic editor plugin (you might want to try both out to better understand the changes). Note this is beta software at the time of this writing so you do not want to install this on any production WordPress sites.
- although you can presently test Project Gutenberg, it is presently available as a plugin (meaning you may not be able to fully test your current themes and plugins at the moment).
- the new focus will be on conceptual editing (similar to what you may have experienced with LinkedIn Pulse or similar approaches).
- the focus is on “identifying and adding meaning to content using blocks and block contests.” See below for what this means.
(more…)
by Mark | Jan 12, 2018 | Industry News, JavaScript, Web Development
As web professionals are undoubtedly aware, many changes are happening with JavaScript these days. Yes, there is a fair amount of churn in frameworks employed on various projects. We did ask the question (some time ago) – are we relying too much on JavaScript? Regardless of your opinion about that question, we need to be aware that major changes are happening to core JavaScript as well. ES6/ ES2015 (ECMAScript 6) is the latest version making its way into browsers near you (and many other places). For those who have been working with web technologies for quite a while, you may recall that ES5 was released in 2009. Yes, nearly a decade ago. (more…)
by Mark | Jan 5, 2018 | Industry News, Web Accessibility
As we begin a new year, we thought it summarize some recent information regarding web accessibility. As a web professional, one should already know that making your pages accessible helps your search engine ranking and much more. As an organization, we have been promoting (and encouraging members) to participate in Project Silver (this initiative is focused on a new version of accessibility guidelines) for some time. We encourage you to consider helping with this initiative.
Of course, it is important to understand what we should be doing now to make certain our projects are accessible. We found the following articles to be a helpful review of what is presently happening with respect to accessibility.
In December, Scott O’Hara discussed the trials and tribulations of the title attribute. This is a great review of the current state of use/ disuse of this attribute. In a nutshell, Scott review this venerable attribute since it’s inception in the HTML 1.2 draft (yes, that was in 1993). One of the main issues with this attribute is that most browsers assume a visitor is using a mouse [for example, to see a title tooltip, you must hover your cursor]. Surprisingly, Internet Explorer 10, 11 (and MS Edge) display tooltips (after a short delay) as if the visitor hovered over them. Additionally, when you long press an image in iOS 11, the title attribute also displays in the popover menu. Of course, these sorts of examples do not help much with overall user experience (and are not consistently implemented). Scott also reviews how this attribute is somewhat useful on select elements for screen readers. NVDA and other readers will announce title on landmark elements (header, footer and so forth), but will not on div or other elements (unless role updates are provided as well). Scott provides a number of use cases where the title attribute can be helpful. The bottom line is that the title attribute can be potentially quite useful, but a number of previous bad practices and lack of consistent support among browsers and screen readers is hampering more consistent use. We encourage readers to review Scott’s entire article. It takes about 20 minutes to review and is well worth the read.
In July, IBM updated their accessibility checklist (now at version 7.0). We encourage readers to review it (if you haven’t already). In addition to providing a thorough checklist, we like the approach of combining the revised US Section 508 standards (which also incorporates Web Content Accessibility Guidelines) along with the additional requirements needed to meet European standard EN 301 549. One central checklist for multiple countries. That alone should be useful for those who conduct business in the U.S. and E.U. We encourage web professionals everywhere to make certain they review (and use) such a checklist.
Dennis Lembree provided a very useful article on the topic of building a culture of accessibility (with a focus on leadership roles). Many of us have encountered situations where initiatives fail because there is no clear leadership. What we like most about this article is the specific breakdown (by corporate division) how individual leaders can contribute to a culture of accessibility. We already look forward to follow ups to Dennis’ post and additional insights. We encourage web professionals to take 5 to 7 minutes and read his entire article.
For those using the React framework, Scott Vinkle provides a very useful overview of React’s accessibility code linter. What we found most helpful is that Scott walks you through creating a new React app and describes in detail how to employ the code linter for maximum accessibility. As a web professional, you are employing linting as part of your continuous improvement strategy (aren’t you?). We encourage you to review Scott’s article (particularly if you are considering employing React in applications you develop in 2018). It will take you a couple of hours to review this article (if you work along with his examples).
For those web professionals who are new to web accessibility, we offer a foundational course on this topic via our School of Web initiative. As a current member of Web Professionals, you first course is free.
As you surmise from the above overview, a lot has been happening in the past months regarding accessibility. We encourage you to provide comments regarding your efforts to incorporate accessibility in your projects and tell us what you have been doing to develop a culture of accessibility in your organization. We may be in contact with you to do a follow up post on the specifics you provide.
All the best for a great 2018,
Mark DuBois
Community Evangelist and Executive Director.
by Mark | Dec 29, 2017 | Job and Resume Tips from the Pros
As 2017 draws to a close, we thought it might be helpful to discuss the tools we use for various activities. These tools are not directly used for web design and development; they help our overall processes. Web Professionals considering freelance work or those working in enterprises may find this list helpful. Obviously, these are the choices we have made; we are not endorsing these particular tools – they just work for us. Your mileage will (and should) vary. We also include a brief overview of why it is important to consider using a tool for a specific task.
- Accounting – many prefer QuickBooks. Others prefer Freshbooks. Regardless of the tool you use, it is important to keep track of income and expenditures.
- Advice – mentoring is particularly important when you are starting. Obviously, Web Professionals members are here to help. Additionally, you may wish to consider the Small Business Administration and SCORE. The latter provides free business mentoring.
- File management – we often work across multiple computers (and need access to files in a variety of situations). We have come to rely on tools such as Google docs, One Drive, Dropbox and similar services.
- Graphics and video – we have come to rely more and more on Adobe Spark. It is a free tool and provides the ability to rapidly create messages for social media and more.
- Networking – we should not be working alone; it is important to network with peers. We often rely on Meetup to find local groups with similar interests. Our members also know we use Slack to enhance member to member communication.
- Password vault – passwords should be long and complex and not reused on various sites. This is why a password vault is so handy these days. If you are not using one, you should be. Examples include Dashlane, LastPass, or KeePass (there are other alternatives as well). You only need to remember one password to open the vault and can then copy and paste passwords for a specific site as needed. We also recommend using two factor authentication where possible (see below).
- Portable Apps – when there is a need to use Windows computers in client locations (or you simply want to take your browser favorites/ bookmarks) with you from computer to computer, we have found PortableApps to be a reasonable solution.
- Project management – we often use Trello (yes, there are many alternatives). Trello fits with our work flows. We find it easy to share boards, checklists and more with others as needed.
- Screen capture – we typically rely on SnagIt. However, there are times when using computers while working with clients, we have used Greenshot. The latter also has a zip version (so we can take it with us on a USB drive) along with other portable apps (see above). Yes, you can use the snipping tool (and the Mac equivalent), but tools (such as SnagIt) provide greater control and the ability to rapidly crop and annotate the screen capture.
- Sharing/ collaborating – we typically use Connect and Zoom. There are many alternatives as well, such as Join.me. The advantage of using these tools (in addition to collaboration) is that you can record your screen (with narration) and use these for training, demonstrations and more.
- Time tracking – Toggl is what we use to keep track of time spent on various activities. It is important to measure how much time you are spending on various tasks and projects.
- Two factor authentication – Passwords are no longer enough to provide access to sites. We recommend using two factor authentication where possible. Google Authenticator, Duo, and Microsoft Authenticator are examples. The SANS OUCH newsletter provided a timely overview of 2 factor authentication recently. Disclosure, I (Mark) am one of the reviewers of that newsletter.
- WordPress site management – if you are running multiple WordPress sites (and roughly 1/4 of all sites in the U.S. these days are based on this technology), you might want to consider using ManageWP. This is a freemium service offered by GoDaddy. It has a number of useful features in the free version (and you can get site monitoring for a nominal amount per site per month). This can save you a lot of time updating plugins, dealing with SPAM and more.
This is our list of tools that we often use. What did we forget? What tools in the above list do you use? Do you have alternative tools you prefer? Why do you prefer those? We look forward to your comments and further discussions. Let us know if you would like to have a separate Slack channel devoted to tools as well.
Best always,
Mark DuBois
Community Evangelist and Executive Director
by Mark | Dec 13, 2017 | SVG
Earlier this year, I had the distinct honor of speaking with Christopher Schmitt about SVG (especially SVG filters). In this 6 minute overview, he discusses why these are important to web professionals everywhere. The full discussion is available to our members (once you login, scroll down to find the link).
Some of the sites mentioned by Christopher in this interview include the following:
Books he mentioned include:
Best always,
Mark DuBois
Executive Director and Community Evangelist
For those who are interested in a transcript of this interview, we provide the following:
[Mark DuBois] I’m speaking with Christopher Schmitt today. Christopher thank you so much for taking the time to be with us and to help web professionals better understand SVG filters.
To use an anology – they are similar to CSS rules; they can enhance text and images and so forth but I know that is an over simplification. Could you help our listeners better understand the technology please.
[Christopher Schmitt] I’ll be happy to. Thanks for having me on Mark.
With SVG filters, I think your analogy is good except that with SVG filters you to actually create a SVG file (which is pretty easy to do) and then you can associate that to an image and apply filters to that. What I really like about it is that you can apply SVG filters to almost any web element you have on the page like a div or the whole page, that is where the power of SVG applies. You can expand to more and more things. Ok.
[Mark] Thank you very much for that. What’s happening with them today? What’s the future looking like with respect to SVG filters. I know you’ve been doing some things recently.
[Christopher] This week my company Environment for Humans we did an online SVG conference are with seven speakers with wide ranging topics. You wouldn’t expect to have an all day conference on jpeg. But you could if you want to be ultra nerdy about it, but just for practical purposes of SVG. We had talks about SVG animation and are we talked about some responsive logos where you actually create a logo that is like a vector image a word type of logo mark. A prime example is like Disney’s castle logo that you see at the beginning of every movie that they do with a simple two color inclusion and the words Walt Disney underneath. One example that always been shown around is that if you have a browser fully expanded you shorten the browser and the castle goes away and you see the words Walt Disney you shorten the browser more and you just see that trademark script D from Disney’s name no matter what size your viewport is, you actually see the Walt Disney trademark.
That’s a great thing you can do to deal with the flexible nature of responsive web design where you have to deal with a lot of the not just resolution independence that you need (because of browser resolutions retina and all that), but you also have to deal with connectivity of the Internet too. Some people have very slow connections to the Internet so you don’t want to be throwing down a lot images for one logo. An example too, we also did stuff with the work flows with Sketch app which is a nice alternative to Illustrator and it’s also great for making wireframe mockups. There is not a lot out there in terms of dealing with Sketch and dealing with SVG exports and high upper level things like that too. There are a lot of things we can do with SVG. I have fun geeking out. There are so many things you can do with it.
[Mark] Definitely, I think the idea that it’s a vector based is very helpful today with all the different resolutions out there. It seems (in my view of the world) a pixel is no longer a pixel. With respect to SVG and filters and so forth why should practicing web professionals care? Why should they be interested in this today other than what you just talked about?
[Christopher] What I like about it is we can jettison Photoshop in some ways to do simple digital imaging effects. So, if you wanted to do a sepia tone, you can do that with SVG filters and can reuse over and over again without having to go back into Photoshop. One example I love was a few years back, Andy Clarke had this great example of making a print style sheet and use CSS filters for converting images to the black and white so when they printout it wouldn’t use color ink which is expensive, so you conserve it. He also did that to old versions of IE so you get a generic black and white version of it (which was pretty funny), but you can also do it with SVG to create images.
There is a kind of filter you can use called color matrix and you can do a whole lot of cool things with it. Before I get to that, I want to say that I’m an old guy in terms of the web. Been on the web since 1993 and I love Photoshop, so when I say get rid of Photoshop, it saddens me to say that. I have been working with Photoshop since version 1.5.
[Mark] Is there anything else you’d like to share with web professionals about this or other technologies, Christopher?
[Christopher] I have a weekly newsletter, I started this year, it’s called UXDesignNewsletter.com. Every week I send out a list of resources at least 10 plus more. That I think are really great. It comes out every Monday. If you want to sign up UXDesignNewsletter.com.
[Mark] Fantastic! We will put the link out there and encourage our members to sign up or anyone else listening to this as well. Christopher, thank you so much for taking the time today in helping us better understand what’s going on in the world of SVG, SVG filters ad more. Thank you again.
[Christopher] Thank you so much for having me.
