Web Design Trends 2019

Website Design Trends for 2019

For those who are already thinking about 2019 and what web design trends will be popular, we provide a starting analysis. Technological advancement has revolutionized the way we interact, socialize and do business and there will continue to be significant innovation and improvements in web design in 2019 and beyond. We all want our clients to get greatest and latest when it comes to their sites so it is not too soon to be thinking about 2019 trends in this area.

We found a lot more information about these new design trends in 2019 at Website Trends – 2019.

Graphic depicting computer monitors looking over a cityscape with building displaying binary numbers

10 Predicted Trends of 2019

The Rise of CSS3 Animations – Animations have hit the web market. They are being used in the websites to enhance a site’s experience and make it more interactive. Animations include background videos, motion graphics, scrolling effects, micro-interactions. CSS animation is a powerful feature which has gained serious attraction by the users. SVG animations have set the new standards into the field of web animation. There is no quality loss in SVG graphic even if we render or resize.
Parallax scrolling – Take the visitors on a journey about your product and they will love it. Parallax helps you to grab attention and create a certain sphere around your products. It helps you to promote a greater chance of connecting because the innovative design improves the site’s desirability. Such parallax websites provide a dynamic experience which encourages the user to stay longer on the page.
Typography improvements – A beautiful art of arranging the text and making it more appealing when displayed. Playing with fonts would be risked if you fail to choose. Perfect font, size of font, spacing between the lines.
Material Design – There are a certain minor thing which you change and the users will love. It is a design framework developed by Google which provides amazing benefits to the user. We expect both material design and flat design will continue to be popular in 2019.
. Video Headers – Video headers are becoming popular. The best thing is to keep a dark video with light text. It creates a great impact with good readability. Above that YouTube makes it simple if the user wants to add the embed code for the video. Don’t forget to make certain your video is captioned and accessible for all.
Icon Library – Icons have taken a huge place in the website market. Developers take more advantage in making their design more eye catchy. The best part in using the Icon Library is that we can apply CSS effects to them. Icons have vector graphic, so the image is scalable without losing the quality. The size of the image is small so it helps to load into the website faster and above that, it supports all the browsers.
Card Layouts – Websites now being responsive, the web pages are broken into smaller parts called Card Layout. Each card/the constituent part of the page will have information viz. title, an image, certain icons etc. There might contain a short note/product information. N number of websites have digested the card-based layout.
Hero Images – Using big images has been the latest trend on the website nowadays. It creates a great visual impact on the store visitor. Parallax scrolling works best when you use the Hero Images because the design gets divided into screens which creates uniqueness in your website.
Responsive Design – Any website design having flexibility among all the screen resolutions and the devices are the most important approach among all the trends. The optimal viewing experience makes it easy for the viewers in reading the content at their ease, resizing, scrolling from desktop to mobile is not an issue now. It creates a great user experience and is cost-effective which is also recommended by Google. It is very easy to manage as the website has one URL and HTML, regardless of the device. As it makes it easier for users to share and interact with the link provided.
The Hamburger Menu – Hamburger Menu is simply three parallel horizontal lines which are used as a button on the website. Different themes and project take different types of Hamburger Menu in order to complement the design. It is usually displayed on the top left or right. There are many users who do not have the idea about the hamburger menu. But there is one simple solution if we pair the icon with the word “MENU” it will help to increase the interactions.

Some more 2019 Web Design Trends

Staying current on web design trends is crucial to the success of your website. A lot changes every twelve months in terms of popularity with visuals, algorithm updates, and best practices. In the article 2019 Web Design Trends we can read about more Website Design Trends.

Speed – How much time get to make a good impression with a potential customer
Flat Design – Flat design doesn’t mean that everything is reduced down to two dimensions and it’s all about minimalism and usability. This is Apple’s approach and is somewhat counter to Google’s Materials design. We expect to see both increase in popularity next year. For those who need a refresher on these terms, we recommend this article at 99designs.
Mobile First – With mobile sites taking priority away from desktop sites, it’s no wonder that mobile first design has become a trend. Mobile first web design is about changing the way that websites are designed fundamentally. We expect this trend to continue for the foreseeable future.
Broken Grid/Asymmetrical Layouts – When we talk about broken grids or asymmetrical layouts, this refers to the grid system that has been used for decades on all kinds of layouts, from web pages to newspapers to print and outdoor ads.
Shapes – As a middle ground trend between the minimalism of flat design and the controlled chaos of broken grid lies the trend of geometric shapes.
Single Page Design – Speed and minimalism are the trends that come up again and again when talking about web design in 2019, which is a major reason why single page design, also known as page-less design.
Video Backgrounds – with speed being such a huge factor this year that videos would bog down a site too much, but, interestingly, video backgrounds have been shown to increase conversions.
Micro-Animations – Micro-animations are a powerful way to provide an intuitive and satisfying experience to your user as they browse your website. This is accomplish through small animations that help the user understand the site and validate them when they mouse over or click on an element, such as changing the color of a button when the cursor moves over it.
Chatbots/Machine Learning – Over the last several years, interacting and communicating with bots has become more and more normal. Bots, or chatbots, are becoming increasingly common on websites and micro-interactions across digital media.

More Resources

In this week we reviewed web site design trends for 2019. If you are working with clients or thinking of redesigning a site, we recommend you think about these trends. As always, we are interested in your comments and insights.

We encourage members (and non-members) check out our social media channels. If you aspire to be a web professional and don’t know where to start, we offer a number of beginning classes to our members via our School Of Web learning management system. As a member, your first class is free.

The post Web Design Trends 2019 appeared first on Web Professionals.

View full post on Web Professional Minute

Rating: 0.0/10 (0 votes cast)

Rating: 0 (from 0 votes)

Why web design contests matter

Students from many states compete each year in our web design and development contest in Louisville

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

The post Why web design contests matter appeared first on Web Professionals.

View full post on Web Professional Minute

Rating: 0.0/10 (0 votes cast)

Rating: 0 (from 0 votes)

How Cyber Security is changing the web design industry

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. ⁴
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.⁵
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.⁶
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.⁷
That same study by Ponemon Instutute cited “negligent employees or contractors” as the root cause of the data breach. ⁷

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:

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.

The post How Cyber Security is changing the web design industry appeared first on Web Professionals.

View full post on Web Professional Minute

Rating: 0.0/10 (0 votes cast)

Rating: 0 (from 0 votes)

February Updates – Mobile and Responsive Design

We thought it would be helpful to review the fundamentals of web design for aspiring web professionals in this article.

Responsive Web design is a Web design approach aimed at crafting sites to provide an optimal viewing experience. This is also aimed for easy reading and navigation with a minimum of resizing, panning, and scrolling across a wide range of devices.

What Is Mobile Responsive Design?

When a website is responsive, the layout and/or content responds or adapts based on the size of screen they are presented on. A responsive website automatically changes to fit the device you’re reading it on. Typically there have been four general screen sizes that responsive design has been aimed at: the widescreen desktop monitor, the smaller desktop or laptop, the tablet and the mobile phone.

Josh Byers 2012 article – A Beginner’s Guide to Mobile Responsive Design – StudioPress has examples given as the screen gets smaller, the content shifts and changes to the best display for each screen. This article also has more detailed information about

Why Should I Care About Mobile Responsive Design? These days we need to think of mobile first.
We first need to optimize the layout of the content.
Next, we need to adapt the content that is shown (and only show content that is really needed).
It has been amazingly easy to create a mobile responsive website for some time.

Why Responsive Images?

In article Responsive images by MDN Web Docs we can learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools HTML provides to help implement them.

It also has a detail overview of

How do you create responsive images?
Resolution switching: Different sizes
Useful developer tools
Resolution switching: Same size, different resolutions
Art direction
Active learning: Implementing your own responsive images

Why Responsive Design?

Use of responsive web design is highly recommended because it

Makes it easier for users to share and link to your content with a single URL.
Helps Google’s algorithms accurately assign indexing properties to the page rather than needing to signal the existence of corresponding desktop/mobile pages.
Requires less engineering time to maintain multiple pages for the same content.
Reduces the possibility of the common mistakes that affect mobile sites.
Requires no redirection for users to have a device-optimized view, which reduces load time. Also, user agent-based redirection is error-prone and can degrade your site’s user experience (see Pitfalls when detecting user agents” section for details).
Saves resources when Googlebot crawls your site. For responsive web design pages, a single Googlebot user agent only needs to crawl your page once, rather than crawling multiple times with different Googlebot user agents to retrieve all versions of the content. This improvement in crawling efficiency can indirectly help Google index more of your site’s content and keep it appropriately fresh.

Google provides many more details in this article.

Other Resources which may be helpful

We always try to deliver something new in our Web professional’s world. Also we hope you find these overviews useful and always look forward to your comments and feedback (whether you are a member or not).

If you aspire to be a web professional and don’t know where to start, we offer a number of beginning classes to our members via our School Of Web. As a member, your first class is free.

The post February Updates – Mobile and Responsive Design appeared first on Web Professionals.

View full post on Web Professional Minute

Rating: 0.0/10 (0 votes cast)

Rating: 0 (from 0 votes)

Including Innovation in your Web Design

This is a guest post by Junaid Ali Qureshi (a digital marketing specialist who has helped businesses gain traffic, outperform competition and generate profitable leads. His current ventures include Elephantation, eLabelz, Smart Leads.ae, Progos Tech and eCig).

Your website should reflect you

We live in an era of digitalization where the Internet has taken over our lives and woven itself into our everyday routine whether we like to believe it or not. We use it for our personal use or business growth. It is safe to say that all of us have access to the internet. Each and everything is connected to the internet or is either done on the internet. Nowadays, businesses are thriving and reaching new heights of prosperity, all thanks to the internet. The internet has been evolving and thus the digital marketing has changed, throughout the years. The thing is that it is rapidly turning into an essential part of our lives as well as, of the brand business. The digital marketers or anyone who works on or around the internet know how important it for your website to be unique as well as up-to-date. In the world of digitalization, you cannot simply go online, share, and be recognized by your targeted audience. It is rather hard to get where you want to than this, with your audience. One of the most powerful tools today is that your website should be the reflection of your work. We are all well aware that digital marketing moves hard and fast. One also needs to master the tricks and secrets of digital marketing that will surely mesmerize the audience advertising companies in Dubai help your website to reach its targeted audience and give you the desired results.

The thing is when it comes to innovative web design; it’s safe to say that the users are the greatest source of inspiration. Whether it is building off a fully customizable template, or creating their site from scratch. Statistically, about 40% of the people are just not going to be good at innovating whereas, the 5% are born with the instinct. There are things that they do and ways that they think that is intuitive. There are a few things one can do to help reach the place of experimentation and think out of the box; this article shares a few of the techniques by which you can bring innovation to your web design. Here goes:

Start with a blank canvas

You always need to start with a blank canvas always start with a blank slate. Don’t even set the background color to white, black or any neutral color; you may not know if that’s the color you want to go with yet, so you need to keep your ideas open. Try not to restrain yourself to starting at the top of the page layout or starting with a wireframe layout. In this way, your website will have a unique layout. You can always find sudden inspiration for a fantastic way to display the page. For a change, create the product and then challenge yourself to a new solution. So, instead of curbing your ideas around these restraints, build the idea and find a way to make it work around the problems.

Empathize

You need to make sure that you can empathize with your consumers and what they demand of your website. It all starts with empathy. Truthfully, strategic design thinking only has one single goal that is, to understand and solve a problem for its consumers and in order to understand and then solve the problem, one must start by empathizing with the people who are experiencing that problem. The essence of this evolution turns out to be the first principle of design thinking-empathy.

The thing is empathizing with your consumer allows you to better understand their needs; in turn giving you the tools to meet those needs and give them the desired results. These innovations are a direct result of the design thinking model one can follow. Taking the first step of empathizing with their customers gives the insight needed to serve the consumers in a new and unique way.

Provide unique constraints

The third most important thing to bring innovations to your web design is that you need to put innovation at the heart of your strategic plan, plus tout and convey it in every message possible. However, if you are fighting a mental block or finding struggles then you need to take advantage of your newfound freedom because one of the best methods for generating some unique ideas is to bound yourself and give yourself some restraints but the thing is you do not want to slap on the same old limitations you always face; instead, you must give yourself some clever limitations and see how you can bend the rules in order to play with your design.

Another thing is that you should also consider the question of intellectual property. You can divide your knowledge between the projects you want to protect; the pieces on which you’ll build the value-capturing part of the business and the other one, the knowledge that you are going to put into the public domain.

Collaborate with others

The most important thing is to collaborate with others. You can share your ideas and hear others’ ideas in order to make a great design. Partnering up with another designer can be helpful, fun, and inspiring. The thing is working as a member of a team can be wonderful for you and a wonderfully frustrating experience. On one hand, when dedicated experts come into the specialized areas of a websites’ production, it will often yield better results in less time, especially if you are suffering from a block. On the other hand, communicating your own thoughts and ideas with another person can be a challenging as well as tiring. Designing based on another persons’ work and experience is a great way to force creative results based on the unpredictable efforts of a different designer with limited restrictions.

Once your website is unique and stands out from the rest. Advertising agencies in Dubai advertise amazing websites in return you need more consumers and more exposure. The thing is to go from idea to a successful innovation. It requires a great deal of support, hard work, and collaborations. When people are surrounded by positivism, constant communication, and encouragement, they can find it in themselves to try, fail, rise and then try again.

The post Including Innovation in your Web Design appeared first on Web Professionals.

View full post on Web Professional Minute

Rating: 0.0/10 (0 votes cast)

Rating: 0 (from 0 votes)

New Responsive Design Mode: RDM Lands in Firefox Dev Tools

Firefox Developer Tools now includes a completely redesigned Responsive Design Mode (RDM for short) that’s just landed in Firefox Developer Edition, thanks to hard work from the DevTools team.

In a mobile-first world, it’s essential to prioritize performance for low-bandwidth and offline mobile experiences and design progressive web apps that can deliver across a range of devices. We aim to design developer tools that prioritize empathy for users and developers. That’s why we’ve put so much effort into the Responsive Design Mode.

We want to make it easier for developers to build web experiences that load and respond on screens of all different sizes and support a multitude of browsers, platforms, and device types. RDM is a significant upgrade to the Firefox tools themselves, reflecting our commitment to people who build for the web.

To access the RDM tool, make sure you’re running an up-to-date version of DevEdition. Next, open any web page to view the Responsive Design Mode via Developer ? Responsive Design Mode.

There’s a lot in this new tool, and many new features still to come. Check out the video walk-through to see the tool in action with all of its features enumerated, including:

Popular device emulation
Network throttling
Touch-event emulation
Ability to set DPR (device pixel ratio) of devices
Screenshotting devices at certain sizes

Firefox Developer Tools already has a series of improvements planned for the next release of Responsive Design Mode, including:

Making viewports fit to screen (bug 1213951)
Restoring a saved workspace on restore (bug 1248619), and
Previewing multiple windows at once (bug 1130173).

View full post on Mozilla Hacks – the Web developer blog

Rating: 0.0/10 (0 votes cast)

Rating: 0 (from 0 votes)

New blog design – I let the browser do most of the work…

Unless you are reading the RSS feed or the AMP version of this blog, you’ll see that some things changed here. Last week I spent an hour redesigning this blog from scrarch. No, I didn’t move to another platform (WordPress does the job for me so far), but I fixed a few issues that annoyed me.

So now this blog is fully responsive, has no dependencies on any CSS frameworks or scripts and should render much nicer on mobile devices where a lot of my readers are.

It all started with my finding Dan Klammers Bytesize Icons – the icons which are now visible in the navigation on top if your screen is wide enough to allow for them. I loved their simplicity and that I could embed them, thus having a visual menu that doesn’t need any extra HTTP overhead. So I copied and pasted, coloured in the lines and that was that.

The next thing that inspired me incredibly was the trick to use a font-size of 1em + 1vw on the body of the document to ensure a readable text regardless of the resolution. It was one of the goodies in Heydon Pickering’s On writing less damn code post. He attributed this trick to Vasilis who of course is too nice and told the whole attribution story himself.

Next was creating the menu. For this, I used the power of flexbox and a single media query to ensure that my logo stays but the text links wrap into a few lines next to it. You can play with the code on JSBin.

The full CSS of the blog is now about 340 lines of code and has no dependency on any libraries or frameworks. There is no JavaScript except for ads.

The rest was tweaking some font sizes and colours and adding some enhancements like skip links to jump over the navigation. These are visible when you tab into the document, which seems a good enough solution seeing that we do not have a huge navigation as it is.

Other small fixes:

The code display on older posts is now fixed. I used an older plugin not compatible with the current one in the past. The fix was to write yet another plugin to un-do what the old one needed and giving it the proper HTML structure.
I switched the ad to a responsive one, so there should be no problems with this breaking the layout. Go on, test it out, click it a few hundred times to give it a thorough test.
I’ve stopped fixed image sizes for quite a while now and used 100% as width. With this new layout I also gave them a max width to avoid wasted space and massive blurring.
For videos I will now start using Embed responsively not to break the layout either.

All in all this was the work of an hour, live in my browser and without any staging. This is a blog, it is here for words, not to do amazing feats of code.

Here are few views of the blog on different devices (courtesy of the Chrome Devtools):

iPad:
Blog on iPad

iPhone 5:
Blog on iPhone 5

iPhone 6:
Blog on iPhone 6

Nexus 5:
Blog on Nexus 5

Hope you like it.

All in all I love working on the web these days. Our CSS toys are incredibly powerful, browsers are much more reliable and the insights you get and tweaks you can do in developer tools are amazing. When I think back when I did the first layout here in 2006, I probably wouldn’t go through these pains nowadays. Create some good stuff, just do as much as is needed.

View full post on Christian Heilmann

Rating: 0.0/10 (0 votes cast)

Rating: 0 (from 0 votes)

National Web Design Contest – importance

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.

View of competitors and advisors in our training session on web accessibility, security, and design process "best practices" before our competition.

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.

"<yoastmark

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: http://webprofessionals.org/about/contact/.

The post National Web Design Contest – importance appeared first on Web Professionals.

View full post on Web Professional Minute

Rating: 0.0/10 (0 votes cast)

Rating: 0 (from 0 votes)

15th Annual Web Design Contest slated for Louisville in June

Prepares Students for both College and Career

By Tinka Davi

When seeking shops and services, hunting for health advice or pursuing potential clients most people turn to the Web. And those companies and individuals who are the most successful in gaining new business and finding clients have websites that are attractive and attention-getting and trustworthy.

Winning Gold, Silver and Bronze teams

That’s why Web design is so important and is a key class in many schools and colleges. The successful student creates sites that entice the viewer to hire someone, buy their services or product or pay attention to the news and views offered. They also incorporate components to ensure that Web sites are secure and privacy is protected. For the past 15 years, over 3,000 students have utilized their Web design skills and accepted a challenge offered by WebProfessionals.org.

They’ve participated in the National Web Design Contest, established and sponsored by the WebProfessionals.org (aka World Organization of Webmasters). It challenges high school and college students to work in teams and build functional and secure Web sites for non-profit agencies.

This year’s contest will be held June 22-25 in Louisville, KY.

Web Design students participate in training in design, development and Web security

Each participating team is required to meet a series of challenges that focus on several areas. They include layout, story board and design, team work, project management and Web site accessibility issues. There’s also an emphasis on creative aspects, CSS and coding and client side scripting.

The purpose of the Web Design Contest is to evaluate each contestant’s preparation for employment and to recognize outstanding students for excellence and professionalism in the field of Web design, Web development and Webmastering, said Bill Cullifer, who served as executive director of WebProfessionals.org for 17 years before retiring in 2015.

The contest includes project management, interview and presentation and promotes professionalism.

“It’s not just about good looks and design; it’s also about user experience, functionality and security,” said Mark DuBois, the current Executive Director of WebProfessionals.org.

Winning teams compete for prizes and scholarships

Teams invited to the Nationals in Louisville consist of individuals who fill the roles of Web Designer, Webmaster and Web Developer.

Past Winner from Nevada

Clark Milholland was a contest participant in 2006 and 2007. He won a “Spirit Award” his first year with a teammate he still is in contact with. In 2007, he and another teammate who were 11th graders at Carson High School in Nevada, won a Gold Medal.

“The national competition was timed, with rules limiting us to creating everything from scratch based off of a scope of work that we were provided on the day of the competition,” Milholland said. “I don’t remember the exact amount of time we were allowed to work but I imagine it was in the range of six hours or so.”

Clark Milholland, 2007 Gold Medal Winner

The first time Milholland saw a mouse move across a screen, he was hooked. That was when he had a Gateway 2000 running Windows 95.

“I built my very first website when I was 14 or so. Its purpose was to showcase prank calls that my friends and I had spent the summer making and recording. Probably not the best use of a summer but it laid the foundation to what turned into a career in Technology,” he said. Later, in high school, a class he wanted was dropped and he was randomly relocated into a Web Design class.

“I am not one for superstition or fate, but still to this date I look back on it as a very odd and specifically perfect occurrence,” he said. “I ended up taking all four Web Design classes through high school. These classes not only allowed me a facet to push myself to success but also provided me with an internship working in technology.” He currently works for a government agency in Carson City, Nevada. as an IT Systems Technician. He also serves as a freelance Web designer in his spare time and supported the Webprofessionals.org as a volunteer Web designer.

Winner at Vanderbilt

Derek Roberts, member of the class of 2016 at Vanderbilt University, was a participant in the 2012 contest just after he graduated from high school.

Derek Roberts, 2007 Participating Student

Here’s an excerpt from his conclusions about the contest:

“The preparation for the Web Design Contest definitely taught me what real practice, or studying, actually means. On the day before the contest, we spent eight hours in a hotel room creating a website from a prompt our faculty advisor had given us. And that wasn’t the first time we’d done a trial run! The actual competition was incredibly intense,” Roberts said.

“The most valuable thing I took away from the competition was definitely confidence. I had never been pushed with such an immediate deadline, but our team actually came through.

“Although we didn’t win the competition, we finished the project and never gave up out of frustration. The focus that required was immense, and I’m proud to know that I have that capability.”

He hopes to work for a major company as a consultant.

For Web design newbies, he recommends finding a fantastic teacher and learning everything from him or her.

“The work ethic and standard of excellence that my teacher/mentor instilled in me is what I still use for every project I do today,” he said.

“Web design competitions gave me intangible skills that I will use for the rest of my life. I would definitely not have gotten to where I am today if I had given up early or not participated at all.”

Contest benefits

Students and contest organizers cite several benefits to participating in the contest, including:

Preparation for Employment
Recognition and Personal Satisfaction
Professionalism and Skills
Demonstration of Industry Best Practices
Growing your Network and Linkages
To Have Fun

Who supports the Contest?

Leading Web and technology companies and those that hire
Hundreds of high schools and colleges across the U.S.
The not-for-profit membership supported WebProfessionals.org, the contest’s biggest supporter.
The SchoolofWeb.org, a training resource for students and those that teach.
Dozens of volunteer Web professionals who serve as contest experts, coordinators and judges.

The Web Design Contests are designed to promote Web standards, industry best practices, professionalism and the elevation of profession, which Cullifer calls “one of the hottest career pathways in the world.”

The role of education

“The goal of Web design classes in schools and colleges is to meet the growing demand and the skills gap through education and delivering to industry and to those that hire Web professionals,” Cullifer said.

And the goal of the contest is to emphasize those skills by putting them into practice in a competition that recognizes the top students in the country.

Changing of the guard

Mark DuBois (left) and Bill Cullifer (right)

Before his retirement, Bill Cullifer served Director of Webprofessionals.org. He established the Web Design Contest to support the Web professional community with the goal of leaving behind a legacy of something meaningful for both students and those that hire.

The all-volunteer, not- for-profit organization is now headed up by Mark DuBois, the current Executive Director and Webprofessionals.org Community Evangelist. He also holds title as Professor, Business & Information Systems Department, Illinois Central College, East Peoria.

Example Challenge

If you are curious, this is an example of one of the challenges from a prior national web design contest.

Challenge Number 1 – Design Process and Communication

Purpose: Demonstrate your understanding of the design process and communicate what you are intending to create and develop with your team mate.

Instructions:

Create and design storyboard including wireframe based on input from the client as outlined by the work order.
Create your storyboard and wireframe on a sheet of 8.5 x 11 sheet of paper.
Your storyboard should include your form of navigation, illustrations or images sequence for the purpose of pre-visualizing your work.
You will bring and present your completed storyboard to your interview with the contest judges during the interview phase.
You will be asked to present your Web design and development company to the review team. In short, why should we hire your team.
You will share your scaffolding of process including storyboard and wireframe.
Present your resume.
You will be allowed to ask questions of the contest organizers and the client.

The post 15th Annual Web Design Contest slated for Louisville in June appeared first on Web Professionals.

View full post on Web Professional Minute

Rating: 0.0/10 (0 votes cast)

Rating: 0 (from 0 votes)

Web Design Contest Reflections

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 have personally run the Illinois Web Design contest for 15 years. We just concluded the 14th year of our national web design contest and we have now been involved in the international web design contest since 2013.

One should ask why we have devoted so many hours and resources to these contests. Yes, lots of time away from home and family and a lot of personal money has gone into making these endeavours successful. Are they really that important? The main reason we have devoted so much effort is that we are promoting professionalism in a nascent industry. Sure, the Web has been around for a couple of decades (I wrote my first HTML in 1992 – yes, that was 23 years ago) but it is still experiencing growing pains. From an educational perspective, we are all over the map in terms of what is being taught in schools (elementary, secondary, post-secondary, technical schools and universities). We need to focus on best practices and web standards. That seems obvious, but we have observed this not to be the case. Hence, the reason for our involvement with these contests. Competitors return from their experience with a clearer sense of what is important in the industry. They are provided with client work orders which encourage established best practices. They realize (those who plan to compete more than once) that they need to adopt these practices. This is what they need to demand they be taught. To help put this into perspective, we have literally touched the lives of thousands of competitors, their peers (they do talk about the contest), and their instructors. We have raised roughly $1.7 million in scholarships and prizes.

Having been highly involved for many years (I have just completed helping with my 30th web design competition at In Illinois, national and international levels), I have begun to realize we also need to focus on sustainability. Yes, this is important, but we have been relying on a handful of practicing professionals. It is time others step up and help. Our profession would benefit from your expertise. Overall the web continues to evolve in many facets. We need to focus on core technologies and have others help us align to emerging technologies as they become important.

If you have read this far, ask yourself what you have done to help the cause for the Web Profession in the area of promoting best practices to aspiring professionals. Our web design contests are a great opportunity for you to become involved in the WebProfessionals.org I encourage you to do so now. Let’s help the next generation build on our accomplishments and make the web even better. Consider a renewing your membership as well as providing insights by becoming a volunteer and actual help in the next round of competitions. They start in just a few months.

The post Web Design Contest Reflections appeared first on Web Professionals.

View full post on Web Professional Minute

Rating: 0.0/10 (0 votes cast)

Rating: 0 (from 0 votes)

« Previous