As new technologies emerge (such as the Internet of Things [IoT]), new opportunities in employment and compensation also emerge. While exciting, these new opportunities usher in new challenges for Web professionals including students and those that teach Web topics. Let’s…
2016 – The more things change, the more they remain the same. Web security is and will continue to make the news in 2016 (and that is not a good thing). Yes, we will continue to see social engineering (never…
We just experienced a major marketing event in the U.S. Some call it the Super Bowl. We all have favorite commercials; these days, there were a number of ads with an associated web link or a social media hashtag. This…
Opportunities abound for the Web professionals for 2016. The percentage of online sales and eCommerce continues to grow (at the expense of brick and mortar). This trend is expected to increase in 2016. The increased growth comes from use of…
In many ways, 2016 is shaping up to be an incredible year for changes in web development. Of course, that statement also applied to 2015, 2014; the more things change, the more they remain the same. That being said, here…
A recent Computerworld forecast reminded us that web development continues to crack the list of the top 10 most in-demand IT skills. Organizations have come to rely on the Web as a key channel for connecting with customers, clients, partners and employees. Most organizations no longer need to establish a web presence; they now need people with the ability to insure their sites are usable, accessible and ready for business.
This is not news to any practicing Web Professional. We have known this for years. Yes, there are many opportunities (both from a technical and non-technical perspective). What is new is the rapid proliferation of technology choices when leveraging the Web for business. A decade ago, few gave any thought to a mobile experience. Now we need responsive websites and many clamor for apps. As Web Professionals today, we are confronted with these key issues:
- What does it mean to have a web presence?
- What does it mean to be ready and open for business?
We also need to help others understand what it means to be open for business. There are many things to consider (such as how you collect payments, what customer information to retain, what metrics to track, how to measure the success of various initiatives and campaigns and more). Web professionals who have a solid understanding of business and marketing (hybrid individuals who understand both the technology and the business) will be the ones most in demand. It is no longer up to small groups or individuals with a narrow focus. We also need to be very aware of security issues and how to defend against many attack vectors as well as how to respond if a site or app is compromised.
Here at WebProfessionals.org, our intent is to help you identify opportunities to prosper in today’s challenging times. There are many different aspects which one can pursue (many with technical skills and many without). Social media, content management, user experience are some of many opportunities which have arisen in the past few years.
As a not for profit organization supporting aspiring and practicing web professionals, we intend to help you navigate through the noise.
- First, focus on what you like to do as a web professional. There is likely a job associated. Make certain you are able to communicate the value you bring to the business (and do so on a regular basis).
- Make certain you have the ability to be a team player. Make an effort to share your knowledge, skills, and abilities with others on a regular basis.
- As importantly, develop a set of talking points to help educate others who may not understand why these issues are important (and why a professional is needed).
- Lastly, focus on how you can keep your skills in your chosen area current. What have you done to “sharpen the saw” this month?
Mark DuBois, Community Evangelist and Director of Education
There are many commentaries covering Web Professional trends for 2016, I chose these to discuss the most common Web design items for you today. Future posts will cover Web development, Web business trends and Web security, to name a few. We will also be covering top IT skills in demand and job opportunities and training.
In a nutshell, here are some of the emerging Web design trends consistently mentioned:
- CSS-3 impacting layouts – this is primarily due to increased acceptance of Flexbox by modern browsers and the emergence of the CSS grid for layout.
- Material design dominating – Google’s material design is being rapidly adopted for UI presentation and development. We should be thinking more in terms of patterns instead of pages. For those unfamiliar with this approach, here is the documentation at Google.
- More prototyping in the browser – to focus on interactions instead of layout. This might be included with the above item.
- Color and typography becoming bolder – again, as modern browsers embrace CSS-3 and HTML5. Many sites will make use of heavily saturated color.
Soon we will be covering Web development trends.
We chose these sources as examples of the trends mentioned above.
- Web Design Trends for 2016 by Sam Hampton-Smith
- 12 good, bad and ugly web design trends for 2016 by Chris Lake
- Quora (primarily because of the crowd source aspect)
Yes, many other trends are mentioned in the above articles. However, these seem to stand out across all the articles I have read these past few days.
Mark DuBois, Community Evangelist and Director of Education
From all of us at WebProfessionals.org, we hope that you had a wonderful holiday season. We are gearing up a busy and productive year, and want to take a moment to thank you for your ongoing support and commitment to our organization that has enabled us to progress on many fronts. We want to make even greater strides in 2016.
In the coming months, we will be focusing on resources that we hope will support your efforts. As a community driven organization we plan to reach out to a number of practicing Web professional experts. For example we’re working on the following articles for the New Year and we would like to invite you to be an active participant.
- Latest Web Design, Web Development and Web Business Trends for 2016
- Web Professional Opportunities including resources for those that freelance, small business, government and corporate Web professionals
- Current Practices that work including Web security and marketing
- Networking Opportunities
- Ethics in our Web Profession including fostering a beneficial and respected professional and ethical approach to professional practice.
- Sustainability including how we continue to advance the relevance, reputation and compensation of our profession. This includes having a steady stream of qualified new talent through education and training.
If you haven’t subscribed yet please do so. We think this is going to be a most exciting year for our organization and our profession. Although the pace of change continues, this seems to be the year when so many aspects of technology are converging.
What do you plan to accomplish in 2016?
Drop us a note and let us know what your plans are. If you have anything to share with the Web Professional community let us know that too!
Mark DuBois, Community Evangelist and Director of Education
Mark DuBois Director of Education I recently returned from the WorldSkills Web Design competition in São Paulo, Brazil and started thinking about web design contests in general. WebProfessionals.org has been involved with these events for the past 15+ years. I…
Thoughts on Cascading Style Sheets (CSS)
By Mark DuBois
Director of Education, WebProfessionals.org
As a professor teaching web technologies, I am often presented with clear examples demonstrating that someone does not fully grasp a concept. In this case, the number in question was 3,547. That was the number of classes in one CSS linked stylesheet to style one website. Yep. Over three thousand separate classes. I know, I counted them. Yes, it was painful.
Clearly, there was a lack of understanding of inheritance and the cascade part of Cascading Style Sheets. For those who would like more information on this topic, please visit http://www.w3.org/wiki/Inheritance_and_cascade [this blog post was inspired by content on that page].
Let’s first review inheritance. If you have ever had a class in genetics, you have likely heard the tired joke – “chances are that if your parents never had children, you won’t either!” Yes. Wait… What?… Ok, bad joke, but we inherit a lot of things from our parents – eye color, hair color, lack of hair, a number of diseases, and so forth. With respect to HTML elements, child elements inherit many of the features of their parent. For example, a within a
element will inherit the font properties and so forth. If this were not the case, we would need to specify all properties for all elements (and we would go beyond 3,500 separate definitions for a page – not something anyone desires. Of course, not all properties are inherited (margins, for example) as it would not make sense.
Now for the more confusing part – deciding which style wins when multiple styles apply to the same part of the web page. These conflicts are resolved by importance, then specificity, then source order. If something is important, it wins. If the importance is the same, then specificity applies. If specificity is the same, then source order wins.
Regarding importance, the lowest choice in the list below wins.
•Browser style sheet (yes, if you have ever wondered why a certain font appears for text in a web page with no styling, this is because each browser has a built in style sheet).
•User defined style sheets with normal declarations. In some browsers (Internet Explorer, for example), someone can define their own style sheet and apply it to web pages they view. For example, they may want to have a higher contrast or larger letters or a specific background color. Although most do not do this, people can.
•Author defined style sheets (those would be the CSS documents we create when building our web pages). We want our pages to have a certain look (font, color and so forth) and do this with CSS.
•Important declarations in author defined style sheets. These would be declarations including !important. Frankly, that one has always confused me. In every programming language the ! symbol implies not. Yet it means exactly the opposite in CSS. Go figure.
•Important declarations in user defined style sheets. This one will always win. If you think about it, this makes sense. If I really need a high contrast to view a web page and go to the trouble of writing my own CSS, I should be able to insist that the browser follows my preferences on my computer.
Ok, I understand importance. I know it is important. But what if there is only a set of author defined style sheets. What if there are multiple rules for the same area of the web page. Now what?
This is where specificity comes in to play. The match highest on the following list will win.
•Inline style (within a document we specify something like
•Id (after all we can only assign one spot on a web page a unique id).
•Class and pseudo-class. There can be multiple uses of a class on a page so this should have less priority/ specificity.
•Elements and pseudo-elements. This has the lowest specificity.
Consider this example:
body nav#top *.home a:link would yield a specificity of 0, 1, 2, 3. Since there is no inline style, 0 is the first value. There is a unique id (#top) which results in a value of 1. There is one attribute (.home) and one pseudo-class(link) yielding a value of 2. Lastly, there are 3 elements (body, nav, and a).
Lastly, there is source order. If there are conflicts within a given CSS document, the last definition wins. Remember that CSS is processed from top to bottom so the last one will override a prior declaration.
If there are multiple linked CSS documents and there is a conflict, the one which appears last in the documents will win). Again, the browser interprets CSS from top to bottom.
Lastly, inline style wins over embedded (within the document) which wins over linked.
If you still have a bit of trouble with these concepts, create a web page and apply different conflicting styles to see what wins. Personally, I typically use background-color within my CSS to make it obvious to students. Having a solid understanding of these concepts is very important. If you are participating in a web design contest or building a site for a client (and two of you are working on the look of the site), this should help you better understand why a given style wins.
By the way, once the particular student had a clearer understanding of inheritance and cascade, they managed to reduce the number of classes to under 50. Yes, from 3,500 to less than 50. This is why it is important to know these concepts.