Web design is both a science and an art. While you could be very talented and creative when it comes to web design, there are scientific principles you must never, ever violate.
For example, do you know that there is a right and a wrong way to go about redesigning a website — and that there is a principle you must never violate? Snapchat wouldn’t have suffered badly after its redesign if it operated in accordance with this principle. Do you also know that you shouldn’t just design CTAs because you like a color, or because a particular color performed really well according to an article comparing the performance of different CTA colors? Instead, there is a principle you must follow.
While there are many web design principles you should gradually familiarize yourself with, there are four key principles you must never, ever violate as a web designer. The principles are listed below:
Principle #1: Fitts’ Law
In the most basic sense, Fitts’ law states that the time it will take a person to move a pointer to a target area will be determined by the distance to the target divided by the size of the target. Consequently, a small target size over a long distance leads to poor UX, a big target size over a long distance leads to better UX, and a big target size over a short distance leads to the best UX.
When you design important elements in violation of Fitts’ law, it becomes increasingly difficult for users to interact with key elements in your design and conversion offers.
The core lesson is this: when designing elements that will require quite some distance to interact with, make them bigger. If your elements cannot be bigger, then try to reduce the distance required by a user to locate them.
Principle #2: Law of Neural Adaptation
There has been a lot of debate in the web design world about the use of color when it comes to CTAs; in particular, designers are crazed about whether the color red, or blue, or orange is the best when it comes to CTAs, but it wouldn’t really matter once you understand the law of neural adaptation.
In essence, the law of neural adaptation states that we eventually tune out stimulus after repeated (or long) exposure to it. For you as a web designer, this affects your use of color. For example, if you designed a long sales page with the blue color scheme in which most of the elements are blue, using a blue CTA as well will result in poor conversions. This is because users are already accustomed to the blue color and are less likely to pay attention to the blue CTA; it doesn’t stand out to them and as a result is ignored.
The solution is simple then: use a color that contrasts with the main color of your design. In our example, a site that uses a blue color scheme that then uses an orange CTA is likely to perform better. This is because the orange color is different from the main color scheme used on the site — users are yet to adapt to it — and it is likely to stand out and be noticed when it is suddenly introduced.
The comparison of website builders in the screenshot below is a very good example that illustrates this point. The site generally uses a blue color scheme but uses an orange CTA that stands out and is easily noticeable.
The lesson for you as a web designer is simple: pay attention to neural adaptation and learn to make use of the power of contrast when designing key elements. Important elements of your web design should use a different color from that of the main color scheme to help them stand out.
Principle #3: Hick’s Law
If you want to design websites that convert, your website must be designed with an understanding of the principle of choice. More importantly, you want to understand Hick’s Law and design your website based on it.
Named after British psychologist William Edmund Hick, Hick’s law states that the amount of choice a person is given will logarithmically influence how long it will take the person to reach a decision: in basic terms, increasing the number of choices presented to users will logarithmically increase their decision time and decreasing the number of choices will likewise decrease users’ decision time logarithmically.
A one-second delay in how long it takes a page to load will result in a 7 percent decrease in conversions.
Removing just one form field can boost conversions by up to 50 percent.
60 percent of online job seekers abandon a web form due to its length or complexity.
As you can see from the above statistics, true to Hick’s law, increasing the number of your form fields will increase the time required to complete the fields and bring about a resulting drop in conversions while decreasing the number of your form fields will reduce the time required to complete the fields and bring about a drop in conversions.
As a web designer, you should avoid violating Hick’s law by limiting the choices presented to users when designing options that will give them choices that they have to act on.
Principle #4: Weber’s Law of Just Noticeable Difference
While, as web designers, we’re very familiar with more than a few instances of backlashes as a result of a web design change, perhaps no web design woe stands out in recent memory like that of Snapchat.
Snapchat’s redesign was such a failure that it got public condemnation from highly-influential celebrity and one of its most high-profile users, Kylie Jenner, resulting in a $1.5 billion loss in Snapchat’s value in just one day!
What web design principle did Snapchat violate to bring about such wide public rebuke? It is Weber’s Law of Just Noticeable Difference.
In Weber’s law of just noticeable difference, “just noticeable difference” refers to the minimum amount by which stimulus intensity must change before it can be perceived by the senses. In other words, if the change is barely noticeable then there won’t be a reaction; if the change is too drastic, however, there could be a backlash.
For you as a web designer, the key lesson is to embrace an iterative approach to web design: spread out your design changes and introduce them gradually until users have a completely new design that they gradually grew accustomed to. Depending on the size of your audience, making design changes that are too drastic can easily backfire.
Ayodeji Onbalusi is the founder of digital marketing agency Effective Inbound Marketing and online reputation management agency BoostMyMedia.com. He’s an experienced content marketing strategist and can be reached via LinkedIn.
Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.
The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.
Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.
Visually Distorted – When Symmetrical UI Looks all Wrong
What I Learned from 6 Months Leading a Design System
10 Small Design Mistakes We Still Make
14 Layout Design Trends
Culrs Mac App
Color Mixer – A Simple Tool that Helps You Mix Two or More Colors
The Teletype Text Element Lives On… at Least on this Site
2019 Design Tools Survey
Why Does Modern Design all Look the Same (and Should It?)
How Ultra-Thin Lines in Web Design Can Create an Impact
CSS Circles
Debunking Color Contrast Accessibility Myths
Adobe Rolls Out Revamped Creative Cloud Desktop App
16 Hours to Launch — a Breakdown of How I Designed, Built and Launched a Product Over a Weekend
We’re not Designing for Screens
Why Consistent Writing Makes You a Better Designer
What Makes a Great Design Leader?
8 Essential Principles of Good Business Card Design
The Freelance Life
Practicing Ethical Design
When GoFundMe Gets Ugly
How to Interview Designers
Chill Out, Work Smarter & Enjoy the Coffee – Freelancing with Aron Leah
How Frontend Developers Can Empower Designer’s Work
Flash is Responsible for the Internet’s Most Creative Era
Want more? No problem! Keep track of top design news from around the web with Webdesigner News.
There are loads of analytics platforms to help you track visitor and usage data on your sites. Perhaps most notably Google Analytics, which is widely used (including on this site), probably due to it’s ease of integration, feature-richness, and the fact that it’s free (until you need to jump up to the enterprise tier which is some crazy six-figure jump).
I don’t take any particular issue with Google Analytics. In fact I quite like it, especially as I’ve learned more about customizing it, like we’ve done here on CSS-Tricks as well as on CodePen.
But there are other options. In particular, I wanted to look at some other options where:
You can self-host the analytics. Always something to be said for owning your own data.
Data collection doesn’t require JavaScript. That’s so often blocked these days, as wariness of third-party JavaScript grows. It’s interesting to consider the entirely unobtrusive server-log based analytics.
I didn’t find a sea of options to look at. The classic one I always think of in this category is Shaun Inman’s Mint, but Mint isn’t taking new customers anymore. Maybe I’m not looking in all the right places, and perhaps you can help with that. Please chime in with a comment if you know of more options — especially ones you have experience with.
This is one Dave Rupert uses on his personal site and has written about. They have a paid hosted version, which is still focused on privacy in the sense that it does not track or store user data. But they also have a free self-hosted version you can run on your own. Actual data collection is done via a JavaScript snippet you put into your site.
Matomo Cloud is their hosted version, and On-Premisis is the self-hosted version. The actual data collection is done via a JavaScript snippet you put into the site.
I personally use matomo for my side projects. Its vast and getten me fall into love. ?
GoAccess is notable because it’s the first in the list that is a “web log analyzer” which means it looks at access logs that your web server creates rather than relying on JavaScript reporting from the client side. Theoretically, this should be more accurate since client-side JavaScript can be blocked. GoAccess generates reporting that can be viewed in the terminal, as well as browser-based charts and graphs.
I use GoAccess as a static site generated on a cronjob (https://t.co/yiQMev7NDu) which seems to work quite nicely for very basic site. Doesn’t (afaik) handle ignoring spiders etc
Netlify Analytics isn’t self-hosted in that you install it yourself on servers you rent. A big point of using Netlify is that it prevents you from dealing with your own servers. The analytics are server-log based rather than JavaScript which can be desirable as they are likely more accurate and don’t impact performance.
Web hosts are uniquely qualified to offer analytics to their users as they configure their own logging and such. For example, I also have analytics on this site through Flywheel, without installing anything, because they can analyze the traffic going through their servers. We wrote up an overview of the service when it was released.
AWStats is the oldest analytics tool on the block. When I started out on the web, all the web hosting providers touted AWStats dashboards as part of their offerings. It runs on Perl, and like the last two services above, it gets data from server logs.
It ain’t pretty but it’s free, open-source, and has the stability of being a software project nearly 20 years old.
Here’s a new book by Andrew Couldwell all about design systems and his team’s experience at Sprout Social. For a while now they’ve been building Seeds, a brand guide that the internal team can and reference for brand and design-related things, including patterns, variables, and components. I’m looking forward to reading the book because it looks like his experience with Seeds will offer a bunch of insightful thoughts and advice.
From the book’s description:
This is real talk about creating design systems and digital brand guidelines. No jargon, no glossing over the hard realities, and no company hat. Just good advice, experience, and practical tips.
System design is not a scary thing — this book aims to dispel that myth. It covers what design systems are, why they are important, and how to get stakeholder buy-in to create one. It introduces you to a simple model, and two very different approaches to creating a design system. What’s unique about this book is its focus on the importance of brand in design systems and creating documentation. It’s a comprehensive, practical guide that’s simple to follow and easy on the eye.
This is the first monthly update that the Smashing team will be publishing, to highlight some of the things we have enjoyed reading over the past month. Many of the included posts are sourced from the most popular links from our Smashing Newsletter. If you don’t get our newsletter yet, then sign up here to receive carefully curated links from the team every two weeks.
SmashingConf News
We’ve just wrapped up our final SmashingConf of the year in New York. Videos of the event will be on their way soon, but we have already published a write-up and all of the video from our Freiburg event held in September. You can find all of those in our post “SmashingConf Freiburg 2019”.
Also, we’ve announced the dates for SmashingConf 2020! Would you like to join us in San Francisco, Freiburg, New York, or our new city of Austin? If so, get your tickets now at super early-bird prices, and keep an eye out for line-up announcements very soon.
Recommended Reading on Smashing Magazine
We publish a new article every day, and so if you’re not subscribed to our RSS feed or follow us on social media, you may miss out on some brilliant articles! Here are some that our readers seemed to enjoy and recommend further:
“How To Use Breadcrumbs On A PWA” by Suzanne Scacca If you’re worried that your PWA is going to be difficult to navigate without some guidance, put breadcrumbs to work. In this article, Suzanne explains just how.
“Design Systems Are About Relationships” by Ryan DeBeasi Design systems can improve usability, but they can also limit creativity or fall out of sync with actual products. Let’s explore how designers and developers can create more robust design systems by building a culture of collaboration.
“A Guide To New And Experimental CSS DevTools In Firefox” by Victoria Wang Ever since releasing Grid Inspector, the Firefox DevTools team has been inspired to build a new suite of tools to solve the problems of the modern web. In this article, Victoria explains seven tools in detail.
“Editorial Design Patterns With CSS Grid And Named Columns” by Rachel Andrew By naming lines when setting up our CSS Grid layouts, we can tap into some interesting and useful features of Grid — features that become even more powerful when we introduce subgrids.
Best Picks From Our Newsletter
We’ll be honest: Every second week, we struggle with keeping the Smashing Newsletter issues at a moderate length — there are just so many talented folks out there working on brilliant projects! So, without wanting to make this monthly update too long either, we’re shining the spotlight on the following projects:
HTML Email
Can I Email…?
We all know and love caniuse.com. Unfortunately, if you wanted to test support for web standards in HTML Email, it wasn’t really easy. Until now. Inspired by the successful concept, Can I Email lets you check support for more than 50 HTML and CSS features in 25 email clients, and since the site only launched last month, more is already in the planning.
Made for and by the email geeks community, the data that fuels the project is available on GitHub and anyone can contribute to it. A nice detail: the Email Client Support Scoreboard which is included ranks email clients based on how they support the features. A useful little helper for anyone who’s wrangling HTML email.
Email Design Inspiration
Standing out from the flood of emails that reach our inboxes every day is hard, not only for promotional campaigns but also for transactional emails and newsletters. So how about some inspiration from how others manage to spark curiosity and interest to save their emails from ending up in the junk-mail folder as a victim on the quest to inbox zero?
Curated by Rob Hope, Email Love showcases well-crafted emails that you can turn to for fresh ideas — a look inside the code of each email is included, of course. Exciting discoveries guaranteed!
Fonts
Tools To Circumvent Web Font Pitfalls
Web fonts are easy to implement, but they can have a significant impact on a site’s performance, too. To help you speed up the time to first meaningful paint, Peter Müller built Subfont. The command-line tool analyzes your page to generate the most optimal web font subsets and inject them into your page. Subfont currently supports Google fonts as well as local fonts.
Speaking of web fonts: To prevent flash of unstyled text from causing layout shifts, you might want to consider choosing your fallback font in relation to your web font’s x-heights and widths. The better they match, the less likely your layout will shift once the web font is loaded.
Monica Dinculescu came up with Font Style Matcher to help find just that perfect fallback font. Before you opt for a fallback font, you might also want to check how well it is supported across different operating systems to not run into issues. Three small but mighty tools to circumvent some of the most common web font pitfalls.
A Tiny Guide To Variable Color Fonts
“The tech is new, the adventure is big!” If you look at the experiments which Arthur Reinders Folmer of Typearture did with variable color fonts, this quote truly hits the mark. Arthur uses variable color fonts to create animations that are not only awe-inspiring eye candy but also explore the full potential of the font technology.
They might allow little customization compared to SVGs, but variable color fonts are easier to implement and they offer a lot of room for creative adventures, too — using input from the microphone, camera, or gyroscope to adjust the variables and animate the illustrations, for example. Sounds exciting? Arthur put together a little guide in which he dives deeper into the tech behind his experiments. A fantastic overview of what’s possible with variable color fonts today.
Performance
Automating Image Compression
The transfer size of requested images has grown by 52% on desktop and 82% on mobile within the last year — with over half of the median page weight accounting for imagery. These are figures that once again make clear how crucial it is that images are optimized before they hit production. Now, wouldn’t it be handy if you could automate the compression step?
Well, the folks at Calibre asked themselves the same question and built a GitHub Action that does exactly that: it automatically optimizes the images in your pull request — without any quality loss thanks to mozjpeg and libvips, so that no image accidentally skips compression. A real timesaver.
Accessibility
Accessibility Support
There are many different ways that assistive technologies interact with browsers and code. Since it’s still not possible to fully automate screen readers and voice control softwares, we are left with having to do manual tests. And that’s where a11ysupport.io comes into play.
Originally created by Michael Fairchild, this community-driven website aims to help inform developers about what is accessibility supported. It’s a project that is active and contributions are always welcome, so start testing away!
Button Contrast Checker
Do your buttons have enough contrast? The Button Contrast Checker built by the folks at Aditus helps you find out. Enter your domain and the tool tests if the buttons on the site are compliant with WCAG 2.1.
To cater for realistic results, the checker does not only test the default state of the buttons but also takes hover and focus states as well as the adjacent background into account. A nice detail: Each time you scan a page, the results are stored in a unique URL which you can share with your team. A precious little helper.
Learning To Code
Taking Your Coding Skills To The Next Level
CSS animation, Grid, Flexbox… The web is evolving at such a fast pace that there’s always something new to learn. And, well, what better occasion could there be to finally dive into the topic you’ve been wanting to tackle for so long as with a fun little game?
If you’ve always wanted to conquer deep space — and learn the basics of object animation in CSS along the way — the CSS Animation course by HTML Academy has some exciting tasks for you to solve. To help your CSS Grid skills grow and blossom, there’s Grid Garden where you use CSS to grow a carrot garden.
If zombies are more up your alley, try Flexbox Zombies. It’ll give you the expertise you need to survive the living deads — all thanks to your coding skills! Or try guiding a friendly little frog to its lily pad with Flexbox in Flexbox Froggy to finally get to grips with the Flexbox concept. Another cool Flexbox learning game that shouldn’t be left unmentioned is Flexbox Defense. Last but not least, if you’re struggling with CSS selectors, there’s CSS Diner to teach you how to select elements. Now, who said learning can’t be fun?
How To Write Better JavaScript
JavaScript is one of the most popular programming languages, and even after more than 20 years since it was born, it is constantly evolving. But how can you get better at it?
Ryland Goldstein shares some of the top methods he uses to write better JavaScript — by using TypeScript to improve team communication and make refactoring easier or linting your code and enforcing a style, for example. As Ryland points out, it’s a continuous process, so take things one step at a time, and before you know it, you’ll be a JavaScript ace.
Learn Regex With Crosswords
If you’ve got a sweet spot for riddles and logic puzzles, then Regex Crossword is for you. Regex Crossword is a crossword puzzle game where the clues are defined using regular expressions — who said regex can’t be fun?
There are different difficulty levels for you to start to cut your teeth on an easy set of crosswords to learn the basics or put your skills to the test as the puzzles get bigger and more complex. A puzzle generator is also included, so if you feel like making up your own puzzles for others to unravel, there’s nothing to hold you back.
And, The Rest!
Tips To Master Your Next Tech Job Interview
The job-hunting process can be intimidating, especially if you’re just about to get your career started. To help you tackle the challenge well, Yangshun Tay put together the Tech Interview Handbook.
This free resource takes you through the entire process; from working on your resume to negotiating with the employer once the interview has ended, while curated practice questions get you fit for both the technical and behavioral questions that might pop up along the way. A good read, not only for prospective web professionals.
Behind The Scenes Of Design Teams
While many companies are driven by features and technology, over the last years it’s rare to find debates about the importance of design. It’s reflected in publicly announced case studies, design systems, large scale design overhauls, and most recently in dedicated pages for design teams — be it Uber, Google, Spotify, Medium, Dropbox, Slack, Amazon or AirBnB.
Recently, Intercom has announced Intercom.Design, a resource dedicated to its design teams, products, processes and public case studies, including internal UI recommendations and expectations from different product and content designer levels. Wonderful sources of inspiration to improve your design team and explore behind the scenes of how products are designed and built. (Thanks for the tip, Kostya Gorskiy!)
Royalty-Free AI-Generated Faces
100,000 photos of faces of different age, gender, and ethnicity. What doesn’t sound like anything groundbreaking, actually is, if the faces don’t exist but are products of artificial intelligence.
The Generated Photos project did exactly that. With the help of AI, a team of 20 AI and photography professionals generated this impressive number of high-quality faces that you can download and use in your projects for free (for non-commercial purposes). But the plans go even further: the aim is to build an API that enables anyone to use artificial intelligence to generate interesting, diverse faces for their projects, mockups, and presentations — without bothering about copyright and distribution rights questions. Will this be the end of conventional stock photography?
Monochromatic Color Palettes Made Easy
If you’ve ever tried to generate a consistent monochromatic color palette, you know that this can be a boring task. After he once again messed around with infinite copy-paste commands to create a nice palette, Dimitris Raptis decided to change that. His solution: CopyPalette.
CopyPalette lets you create SVG palettes with ease. All you need to do is select a base color, the contrast ratio of the shades, and the number of color variations you’d like to have, and the tool generates a perfectly-balanced color palette that you can copy and paste into your favorite design tool. A true timesaver.
The Art Of Symbols
Since more than 40,000 years, humans have been using symbols to communicate complex ideas. And as designers, we still do so today.
Art of Symbols, a 100-day project by the design team at Emotive Brand, set out to explore how ancient symbols inform contemporary brand design. After all, a lot of those symbols which are part of our vocabulary as designers today, already existed a long time ago, as early as in rock paintings and engravings even. If you’re curious to learn more about their origins and meanings and are up for some beautiful eye candy, this project will keep you busy for a while.
Smarter Patterns For Designing With AI
The power of artificial intelligence is huge, but with it also come ethical challenges and a lot of responsibility. Responsibility for the user who might be confused and scared by AI if a clear concept is lacking, who might want to choose the amount of AI they interact with, and who need to be protected against harmful practices.
Based on research of how AI is being used and understood today, the software studio Myplanet put together Smarter Patterns, a library to start a discussion about these topics and help designers tackle the challenges of AI in interface design. The resource currently features 28 patterns that empower designers to create meaningful AI experiences.
Instant Offline Access With Dash
If you’re one of those folks who simply cannot sleep on a plane and wished there was just a super-productive way to get some work done instead, you’re probably always on the lookout for tools that’ll get you through those flights even with spotty WiFi. Well, search no more — we’ve stumbled upon a pretty useful one!
In case you haven’t heard of it yet, Dash is a free and open-source API documentation browser that gives your iPad and iPhone instant offline access to 200+ API documentation sets and 100+ cheatsheets. Folks such as Sarah Drasner use it especially on the day before a long trip; all you need to do is download all the docs you need, and you’re all set! You can even generate your own docsets or request docsets to be included. Nifty!
A Collection Of Personal Sites
With the Internet ingrained in our day-to-day lives, what’s the best way to voice your own ideas, thoughts, and feelings? A personal site, of course! And because there are so many of them out there, Andy Bell decided to keep a collection of some so that folks can discover each other’s work and even receive updates from their RSS feeds.
If you’d like your site to join the collection, you’ll find simple instructions on GitHub that’ll appear in the list once your request has been approved. What a great way to find folks who share your interests and learn new ways of how to develop and design websites!
From Smashing With Love
A month can be a long time to stay on top of things, so please do subscribe to our bi-weekly newsletter if you still haven’t. Each and every issue is written and edited with love and care. No third-party mailings or hidden advertising — promise!
You can also follow us on Twitter, Facebook and LinkedIn — always feel free to reach out and share your projects with us! We love hearing from you!
Keep up the brilliant work, everyone! You’re smashing!
Smashing Newsletter
Upgrade your inbox and get our editors’ picks 2× a month — delivered right into your inbox. Earlier issues.
There are quite a few wireless connectivity options available in the market. And each one has its advantages as well as disadvantages.
Let me name them: 3G, 4G, 5G, WiFi, Bluetooth. These are commonly used for connecting several electronic devices. There are others whose usage is limited like Lower pan wide area networks (LPWANs), satellite communications and RFID.
At some time, WI-Fi used to be the best connectivity option in enterprises. The reason was that it could be easily extended across large properties or facilities with the help of mesh network systems. Moreover, it was cost-effective and provided good performance. The only thing is that it is most profitable for situations like syncing up a transport fleet.
If we compare it with Mobile connectivity (3G, 4G or 5G), the latter one comes out to be more expensive.
Bluetooth is restricted to the consumer market. It is mostly used for connecting mobile phones to smart devices like wireless audio etc. Most of the portable Bluetooth speakers have inbuilt Bluetooth and permit users to sync their devices to play music and media remotely.
Furthermore, Bluetooth comes with more restrictions than other connectivity options, particularly when it comes to technology’s effective range.
But now Bluetooth is becoming more popular and profitable among the Industrial Internet of Things. It is all because of the advancements in the Bluetooth technology that gave rise to Bluetooth mesh networks and Bluetooth’s Special Interest Group efforts.
Bluetooth is Perfect for Industrial IoT- Why and How?
Bluetooth SIG has forecasted that there will be an incredible 5.2 billion Bluetooth device shipments by 2022. There are several reasons that support Bluetooth being an ideal connectivity option for smart industrial use. Let’s consider them one by one.
Allows you to operate a lot of wireless devices in the same space
Various characteristics of Bluetooth together ensure that you can operate large numbers of devices in close proximity. The short data packages that it has are perfect for industrial measurement and control applications. They spend short time periods on the airwaves.
Moreover, Bluetooth’s automatic power control makes sure that data is broadcasted at the required strength. And both these factors help free up airwaves for other devices. And for IIoT, Bluetooth is optimized to coexist with WiFi.
Bluetooth can easily integrate with existing Industrial systems
In industrial applications, serial ports have a wide use. Bluetooth has a serial port profile and hence, it can easily fit in Industrial designs. The serial port profile imitates a full serial interface, complete with hardware handshaking via Bluetooth.
Ultimately, you can replace the serial cable with a wireless Bluetooth link with either multi-point or point to point operation.
Highly resistant to Interference
Bluetooth uses smart ways to send messages to their destinations. However, it uses a busy 2.4 GHz ISM frequency but easily ensures that all the messages reach their defined destinations. All this happens because of the ability of adaptive frequency hopping.
In this hopping, Individual messages are broken into small data packets that are sent over different channels in a predefined sequence. This sequence is known to the receiving and transmitting devices.
Moreover, around 1600 channel switches can take place in a single second. In case, any data packet does not reach its respective destination in the proper way, such data packets are sent again. If the issue was because of a channel, this is put in light so that it can be avoided in the future.
It can easily identify and solve Bit errors
In environments that are quite noisy or whenever data is transmitted over long distances, there are chances of Bit errors slipping into messages. Bluetooth has the capability of recognizing all these errors and can take the necessary action to avoid these unreliable channels.
Moreover, it has the capability of using Forward error correction. In this correction, Bluetooth can rectify errors once the data reaches the receiver.
You can use Bluetooth at any location in the world
The standard of Bluetooth is vast & is global. It means that you can use the same device anywhere on the planet. You do not need to source different components for industrial facilities in different markets.
Moreover, Bluetooth is quite common in smartphones. Hence, you can interact with Bluetooth enabled IIoT devices with the help of devices you probably own.
In-Built Security
Bluetooth is secure enough to transfer crucial data. It has three inbuilt characteristics that make it a trustworthy means of data transfer. The first one is frequency hopping looks at the transmitter sending out data on a pseudo-random sequence of channels.
However, the transmitter and receivers are the only ones who know about these channels. Hence, if someone will try to alter the message, he would require listening on all the channels.
Now, the second inbuilt characteristic is a pairing mechanism that stops in-transit data from being intercepted in man-in-the-middle attacks (LE secure connections).
Moreover, the third inbuilt characteristic is that Bluetooth devices can be set as invisible. It means that hackers would not be able to recognize whether Bluetooth devices are there or not. Hence, connections are only possible between devices that have been paired in the past.
It has an unimaginable range
Many people assume that the Bluetooth technology works at ranges of up to a few meters. But actually Bluetooth has the potential of operating at much larger distances, even in harsh industrial conditions.
Moreover, the latest generation Bluetooth 5 supports long-range mode and it is used to transmit messages up to 1.7 km. There are Mesh networks where data is passed from one node to another until it reaches its destination. They can also help boost range, particularly in dense environments.
Conclusion
I hope that you are now clear about How Bluetooth can be a big option of connectivity in the industrial internet of things. It’s inbuilt security, high resistance towards interference, easy integration with industrial systems and unimaginable range makes it perfect for IIoT.
Various entrepreneurs are approaching IoT development companies to create IoT based apps for their business. The reason is that they very well know the value of IoT based apps. IoT based apps will surely boost their business revenue.
I think those classifications are handy, and help conversations along. But there is a point where nuance is necessary and these classification buckets get a little leaky.
Note, these charts are just intended to paint a spectrum, not to be a comprehensive list of services.
Headless CMSs
A Headless CMS is a CMS that provides an admin area for creating and editing content, but offers no front-end to build the website from. All the content is accessed via APIs.
Imagine WordPress, which has an admin area, but it also has themes from which you build the website from on the server-side, with all kinds of PHP functions for you to use the content data. All that theming stuff is the “head”. So a headless CMS would be like WordPress with just the admin area. And indeed you can use it that way, as it offers APIs.
There is even more nuance here, as there are services that offer an admin area, but don’t actually store the data for you. Plus there is CMSs that are hosted for you, and CMSs where you have to bring your own hosting. Let’s have a peak.
This is tricky to talk about because literally, any web host will host static files, and probably do an OK job of it. I think it’s most useful to consider hosts that only do static hosting on purpose because it means they can optimize for that situation do other useful things.
Sometimes you’ll see people trying to use stuff like Dropbox or Google Drive to do static file hosting (for a website), but I’ve found these services generally ultimately don’t like that and prevent the use for that. If it works today, fine, but I wouldn’t count on any of them long term.
Static Site Generators
You would think this category would be straightforward, without much spectrum. A static site generator takes input and makes statically generated pages that can render without, say, needing to hit a database. But even here there is a spectrum.
The language the generator is in kinda matters. It affects speed. It affects installability on different local platforms. It affects your ability to write code to extend it and hack on it.
But perhaps more importantly, not all static site generators are only static site generators. Some can be run on the server as well, weirdly enough. And there are some that kinda look like static site generators, but are more correctly classified as flat-file CMSs.
In this week’s roundup: multi-column layouts gain wide support, the ADA means more A11y for retailers, and Google is doing something about all the empty image alt attributes in the wild.
The CSS column-span property will soon be widely supported
The CSS column-span property, which has been supported in Chrome and Safari since 2010 (and IE since 2012), is finally coming to Firefox in version 71 (in December).
This feature enables elements that span across all columns in a multiple-column layout. In the following demo, the headings span across both columns.
The Americans with Disabilities Act applies to websites
In the United States, the Americans with Disabilities Act (ADA) applies to websites, which means that people can sue retailers if their websites are not accessible.
Domino’s Pizza’s appeal was recently turned down by the Supreme Court, so the lawsuit against them for failing to make their website accessible to screen reader users will now resume in district court.
Guillermo Robles, who is blind, filed suit in Los Angeles three years ago and complained he had been unable to order a pizza online because the Domino’s website lacked the software that would allow him to communicate. He cited the ADA, which guarantees to people with a disability “full and equal enjoyment of the goods and services … of any place of public accommodations.”
Google announces automatically generated image descriptions for Chrome
When used with the VoiceOver screen reader, Chrome can now automatically generate image descriptions for images that do not have proper alt text ( attribute). Google has already created more than 10 million image descriptions, but they are not meant to replace alt text written by humans.
Image descriptions automatically generated by a computer aren’t as good as those written by a human who can include additional context, but they can be accurate and helpful.
This new accessibility feature, called “Accessibility Image Descriptions,” may not be enabled by default in your version of Chrome, but you can enable it manually on the chrome://flags page.
Here’s a fabulous CSS trick from Bradley Taunt in which he shows how to make tables work on mobile with just a little bit of extra code. He styles each table row into a card that looks something like this:
(Make sure to grab the Pen and make it a bit smaller to see how the design works responsively.)
Bradley’s example markup looks like this – clean, accessible, regular ol’ HTML:
<table>
<thead>
<tr>
<th>Type of Food</th>
<th>Calories</th>
<th>Tasty Factor</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>Type of Food</span> Slice of Pizza</td>
<td><span>Calories</span> 450</td>
<td><span>Tasty Factor</span> 95%</td>
</tr>
</tbody>
</table>
How does he make that card effect? He uses flexbox on smaller screens and sets the span elements to reveal themselves.
However! I’m not a big fan of those spans. They’re hidden on larger screen sizes but the markup is still there, so it doesn’t feel particularly clean to me. I was working on a project a little while ago where we stumbled on the same problem. We decided to use data attributes on each td instead, like this:
<table>
<thead>
<tr>
<th>Type of Food</th>
<th>Calories</th>
<th>Tasty Factor</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Type of Food">Slice of Pizza</td>
<td data-title="Calories">450</td>
<td data-title="Tasty Factor">95%</td>
</tr>
</tbody>
</table>
Then we can grab that data attribute in our styles and render it on the page in a pseudo element:
td:before {
content: attr(data-title);
}
From there we absolutely position the pseudo element to the side and only show it on smaller screens with a media query. I’m uncertain about the accessibility implications of this but it just feels a bit easier to read and understand in my opinion.
Either way, I think this post is a great reminder about all the tricky issues that pop up once you start using tables. There’s so many ways to handle things responsively and those decisions should entirely be made on the context of the design.
Responsive tables…
When you need to compare data up and down columns, it’s probably best to largely leave the table structure alone and allow scrolling.
It’s no secret that web design projects often overshoot their deadlines. Design do-overs, tiny details that take way longer than anticipated and never-ending email exchanges are characteristic of most website projects.
But it doesn’t have to be that way.
If you want to unlock scalable business growth, your web design agency must maximize efficiency. Once you do, you’ll be breezing through projects and be able to take on more clients easily.
In this article, we’ll give you five powerful tools to create more efficient workflows, boost your agency’s productivity and deliver projects on time.
Duda is a web design platform to help your agency easily create detailed websites at scale. In addition to website building, it offers you team collaboration and client management services to smoothen and expedite your workflows.
Here are a few of its features that will save you time and money.
A) Templates
Duda comes with tons of ready-made templates so that you can avoid creating pages from scratch. This speeds up individual projects, but there are additional benefits too. Once you find and edit a template that can work for different projects, or if you’ve built an especially versatile one from scratch, you can save it and use it across your organization for future projects to create websites at scale.
B) Custom Blocks
Duda lets you assign, build and save custom blocks of pages, called “sections,” in shared libraries. These blocks can be utilized in multiple client projects to build and customize designs at scale.This saves you time, as you won’t have to start from scratch and create new elements.
C) Collaboration
You can customize everyone’s access rights and add outside collaborators such as client-side team members into your project workspaces. Letting them publish their own content while leaving you design feedback with pinned comment threads allows you to work alongside your clients to create an end product that they’re genuinely happy with. As a result, you’ll drastically reduce the time wasted in do-overs.
D) Custom Analytics Reports
Duda lets you send clients custom, agency-branded analytics reports to show them how their website is performing, and the reports are deployed on an automated basis. Now, you can concentrate on actually doing project work rather than spend time explaining things to them.
Mockplus is a comprehensive prototyping tool that will help you deliver detailed wireframes for your web projects in no time. Here are some of its features.
A) Quick Design
Mockplus gives you over 3000 icons and 200 components to simplify your prototyping process. Just drag them into your canvas to create a prototype for your design projects in minutes. As you’re using pre-designed components, you’re not wasting time creating them yourself.
B) Simple UI
Unlike other wireframing tools, Mockplus’s UI is incredibly easy to use and hardly takes any onboarding time. This cuts down on employee training time so that they can immediately start working on projects.
C) Instant Feedback
Mockplus can instantly send notification emails to team members whenever a project needs to be reviewed. This helps you get quick feedback and address issues rapidly.
ClickUp is a popular project management tool that’ll instantly boost your team’s productivity. Here are a few ways it will help you work faster.
A) Priorities
ClickUp lets you add priorities to all your tasks to ensure that your team always knows which tasks are most important. As they can easily see what’s urgent, they won’t waste time attempting relatively unimportant tasks. For example, designing the hero section of the homepage is more important than deliberating on what elements should go into the footer.
B) Critical Path
ClickUp can calculate your web design project’s critical path to determine the tasks most vital to a project’s completion. With the critical path, you can identify which tasks aren’t critical to a project’s completion and de-emphasize them to save time and meet deadlines.
C) Custom Statuses
ClickUp comes with custom statuses to let your team instantly know what stage a project is in. This eliminates the need for manual follow-ups and review meetings as everyone’s kept in the loop.
Slack is one of the world’s most popular messaging apps that can help you communicate quickly. Here’s why it helps boost productivity.
A) Instant Feedback
Whenever someone needs feedback on a project, they can message their team on Slack for an instant response. For example, if there’s a question about the color of a CTA, you can quickly message your team for instant feedback.
B) Powerful Search
Slack has a powerful search feature that helps you save time and effortlessly find any important messages and files that were sent a while back. For example, if your client searches for an icon you sent her a month back, she can simply type in its name, and Slack will pull it up instantly.
C) Guest Accounts
Slack lets you add guest accounts to your messaging channels (they’ll only have access to the channel they were added to). This helps you collaborate with clients and work on projects together.
Timecamp is a time-tracking tool that can help your employees make better use of their time. Here’s how it works.
A) Time Tracking
Timecamp lets your employees track the time they spend on particular projects or tasks. This makes it easier to identify how much time they’re spending on each client as well as on specific activities such as designing a menu. For example, if a developer is taking too long to create a wireframe, a manager can talk to them and figure out why that’s happening.
B) Invoice Generation
Timecamp can automatically generate invoices for clients based on the time your employees have spent on their tasks. All you have to do is set the rate and the tool will do the rest. This makes invoicing – a tedious, time-consuming task – a piece of cake!
C) Monitoring Remote Teams
Timecamp can monitor what websites remote employees are accessing during work hours. This can help managers identify if they are actually working or wasting time on unproductive activities like social media.
Conclusion
Web design projects don’t have to be that stressful!
The right combination of tools and processes can make a huge difference to your agency’s productivity. Consequently, you get more satisfied clients and increase your profitability.
What other ways can you think of to boost your agency’s productivity?
