Code repetition is one of the more frustrating aspects of CSS. Having to type out the same property values over and over throughout a stylesheet takes time. And when making changes down the road, it’s too easy to miss a value.
The result is an inconsistent design. Things like colors, animation speed and element spacing can vary – simply because a designer didn’t catch every instance. Thus, the user experience is thrown out of whack.
CSS variables (a.k.a. Custom Properties) are a great way to combat these issues. Yet, not all designers know about this simple technique. Today, we’ll take you on a quick tour of what they are and what they do. Let’s dig in!
The Web Designer Toolbox
Unlimited Downloads: 1,000,000+ Web Templates, Themes, Plugins, Design Assets, and much more!
Set a Value Once, Use It All Over
Those who are familiar with programming languages such as PHP and JavaScript may recognize the term “variable”. A variable sets a value (static or dynamic) that can be retrieved later on in a script. For instance, a PHP variable called $user_first_name might be utilized to fetch a logged-in user’s first name to display on a page.
Similarly, CSS variables are there to repeat a value throughout a stylesheet. At bare minimum, this saves us from typing in a font family or hex color code multiple times.
You may also recognize variables from CSS preprocessors like Sass. There, variables serve essentially the same purpose (although the syntax is indeed different). However, they are not native to CSS. That means the preprocessor has to convert a variable into valid CSS.
CSS variables are a native solution. They’ll save you from having to use a preprocessor, unless you really want to. Now, any stylesheet can take advantage of this handy feature.
And you shouldn’t have to worry about browser support – with a caveat. Every modern browser has supported CSS variables for quite some time. But if you’re still targeting Internet Explorer users, a fallback will be required. That is a consideration, but everyone else is good to go.
A Basic Example of a CSS Variable
Color is one of the properties that often gets repeated throughout a stylesheet. For instance, you might use the same color for specific headings, container backgrounds, buttons and more. Using a CSS variable here makes the task of assigning and changing a value much more efficient.
Let’s use the iconic blue color of Speckyboy as an example. First, we’ll set up a variable in our stylesheet:
:root {
--speckyboy-blue: #4F78A4;
}
The variable name, --speckyboy-blue, is set to a hex color code. From there, it’s a matter of calling the variable for each and every instance where we want to use this pretty shade of blue.
If we wanted to use this as a text color on an element in our stylesheet, the syntax would look like this:
color: var(--speckyboy-blue);
The following example shows how the variable can be used in multiple places. For good measure, we also threw in another variable for our top and bottom margin value to keep spacing consistent throughout our design.
See the Pen
Basic CSS Variable by Eric Karkovack
Future changes will now be much easier as well. Because of the CSS variables in the above snippet, we now only have to change the hex color of --speckyboy-blue or the pixel value of --vmargin. Those values will cascade down to every instance in our stylesheet.
CSS Variable Resources
Our example only scratches the surface of what is possible with CSS variables. It’s worth digging a little deeper to see how it can be used in more advanced scenarios. The resources below are a great place to learn more:
The post How CSS Variables Can Improve Efficiency and Consistency appeared first on Speckyboy Design Magazine.
While Advanced Web Application Architecture is still a work in progress, I decided to release another project in the meantime: a book for beginning PHP developers called PHP for the Web.
Of course, there are PHP books for beginners, but most of them aren't very concise.
They cover many related topics like relational databases, CLI applications, and sending emails.
I wanted to write a book that only shows what makes PHP so special when it comes to web development.
Writing this book took me back to the beginning of my own programming career in 2002.
Many things have changed since then, but surprisingly many things are still the same too!
The biggest change when it comes to dealing with the web in PHP: we now have frameworks.
This is obviously a good thing, since it has made our applications much more secure.
For instance, in 2002 I wasn't aware of the need for output escaping, or to escape parameters in my SQL queries, and I didn't know that I should protect TinyMCE's upload script against anonymous file uploads...
On the other hand frameworks hide so many of the lower-level details that I dare to say that many PHP developers today don't know how it all works under the hood.
What are cookies and how do they work?
What's the difference between PHP errors and exceptions?
What is $_FILES and how can I use it?
This new book, PHP for the Web explains it all in over 200 pages.
If you're thinking about learning PHP to build web applications, use the following link to get the book for just $9: https://leanpub.com/learning-php-for-the-web-without-a-framework/c/RELEASE_DAY
And if you know someone who thinks about learning PHP, forward this link to them as well!
Here's the table of contents to give you an idea of what's in there.
If you want to read a sample, go to the landing page and click on Read Free Sample.
- Serving resources
- Serving an index.html file with the built-in web server
- The project root should not be the document root
- Communication between the browser and the server
- Serving PHP scripts
- The response: status, headers and body
- Linking to other pages
- Passing values between requests
- user input can’t be trusted
- Forms
- Submitting form data as query parameters
- Always use output escaping
- Adding a select element to the form
- Submitting data via the request body
- Cookies
- Setting a cookie
- Using a cookie
- Redirecting after processing a POST request
- Sessions
- Session files and serialized data
- Flash messages
- Using flash messages everywhere
- Authentication
- Setting up a login form
- Logging out
- Project structure
- Header and footer snippets
- Bootstrapping
- Routing
- CRUD part 1: Create
- Saving JSON-encoded data in a file
- Adding a tour
- Form validation
- Listing tours
- CRUD part 2: The rest
- Introducing some reusable elements
- Editing tour data
- Deleting tours
- File uploads
- Uploading a file
- Showing the uploaded picture
- Form validation for file uploads
- Error handling
- Producing an error
- Using different configuration settings in production
- PHP errors
- Automated testing
- Using Composer to install testing tools
- Creating our first browser test
- Starting with a clean slate
- Conclusion
Now go get your copy!
Special effects such as smooth scrolling, page transitions or CSS animations can add some welcome personality to your WordPress website. Use them to call attention to important information, enhance UX and take your designs up a notch.
Here are some free WordPress plugins you can use to add a variety of effects to your site:
BUILD WORDPRESS SITES FASTER
Announcing Template Kits. Responsive WordPress Designs Built For Elementor.
Animate It!
Adding CSS3 animations to your site is easy with Animate It!. The plugin combines the Animate.css and Animo.js libraries in one package containing over 50 animations. Animations can be applied on user events like scroll, hover and click.
Page Animations and Transitions
Page Animations and Transitions offer a selection of nine different “in” and “out” page transitions. You can also set duration times for transitions.
CSS3 Transitions
CSS3 Transitions will automatically add (you guessed it) CSS3 transitions to elements on both the front end and (surprisingly) the back end. The transitions are added to any <a>, <li>, <img> and <input> that have a hover or focus state defined in your theme’s stylesheet. It’s an interesting choice for those who want a very quick solution.
Easy Textillate
Add animations to any text on your site with Easy Textillate. The plugin includes the textillate.js, animate.css and lettering.js libraries to provide for all sorts of excellent effects for your typography. Generate Shortcodes with the animation styles you want, place them into your content and watch them go!
Ultimate Hover Effects
Use Ultimate Hover Effects to add some life to your image captions. Select an image from the WordPress Media Library and set up the hover effects you want to use. Then it’s just a matter of embedding it into a post or page. A Shortcode generator is also included.
Page scroll to id
Page scroll to id adds smooth-scrolling effects to in-page navigation using CSS ID elements. You can set the scroll duration and easing – with over 30 easing types to choose from. Both vertical and horizontal scrolling is supported and offsets can be configured for individual links.
CSS3 Rotating Words
CSS3 Rotating Words is a handy plugin with a simple function: Rotating a word or words in a sentence using animation. For example, you might have a sentence where you want to change one word:
- WordPress is Fun
- WordPress is Awesome
Choose from five animation styles and also set the font color and size.
WP Progress Bar
Use WP Progress Bar to add animated progress bars to your WordPress pages and posts. Bars are added via a Shortcode. Customize with options for text, colors, percentage (the amount at which the bar finishes its animation) and width.
Page Loading Effects
Page Loading Effects lets you choose from a selection of animations while the content from your site loads in. Once loading is complete, the animation will automatically disappear. You can customize colors in the plugin settings or go even further with your own custom CSS.
SVG Logo and Text Effects
If you’re looking to add a touch of cool to your text without resorting to using images, SVG Logo and Text Effects is worth a look. The plugin has lots of features, including support for Google Fonts. Text you create will be fully editable and SEO-friendly.
Make Your Site Special
The right mix of special effects can bring elements of both fun and utility to your WordPress website. Of course, it’s best to pick and choose carefully when deciding what to use.
A good rule of thumb is to always keep the best interests of users in mind. If a feature increases usability or makes your site more enjoyable to use, then it might be worth your while.
The post 10 Free Plugins for Adding Animation Effects to WordPress appeared first on Speckyboy Design Magazine.
When a client hires you to design and build a website, they’re making an investment in their organization. And, depending upon their particular sector, that website can play a major role in determining future success.
Yet, it’s not always viewed that way. Some clients will nickel and dime their way through a project, not wanting to spend the funds required to accomplish their goals.
Even worse is when an organization has a website with outstanding potential, but lets it languish. The site’s content and underlying software age out, while previous momentum is lost. It happens again and again, company after company.
You may ask, what is it that these clients are missing? It may just be the most important thing they need to know.
The Web Designer Toolbox
Unlimited Downloads: 1,000,000+ Web Templates, Themes, Plugins, Design Assets, and much more!
A Website Is Not a One-Off Purchase
As a young designer, I used to look forward to finishing off a project as if I’d never have to deal with it again. The website, as far as I was concerned, was “done”. Experience has shown me how wrong I was.
In order to stay relevant, websites need to continually evolve. Content must change to reflect what a business is currently doing – not what they did when the site was first built. Technology needs to be upgraded in order to improve functionality and the user experience.
This applies to virtually every type of website. Although, a case can be made that it’s more of a life-or-death situation for an eCommerce or community-based site than the standard five-page brochure variety.
But so often, clients don’t seem to see their websites as an ever-evolving product. Instead, they view it as something they buy once and use forever. And while there may be some relatively small maintenance and hosting fees, it’s a matter of merely keeping things running smoothly. Growth isn’t necessarily considered.
They’re missing the bigger picture.
How Designers Can Help to Inform and Change Attitudes
Part of the issue may stem from how we as web designers communicate. In my own case, I’ve tended to focus on the task at hand when building a website.
First, it’s all about getting the project requirements. Then it’s on to guiding clients through the design and build processes. These are often major challenges that require a lot of attention in order to get things right.
All of this means that talk of the future can get lost in the shuffle. We may not really discuss the need for evolving content and technology until we’re faced with an issue.
For clients, it’s easy to see why this could bring about a misunderstanding. They’re seeing a website that they’ve invested in that, for one reason or another, isn’t keeping up with the times. It might be content, design or functionality-related – or any combination thereof.
This can lead to confusion. Why is the website now outdated? Shouldn’t it be built to last? These are things web designers may inherently understand, but aren’t necessarily obvious to clients.
Part of our job is to educate our clients on the realities of having a website. To stay relevant, a website requires more than just routine maintenance. There has to be both an understanding of and strategy to keep things fresh and vital.
Keeping It Real
So, what should our clients know about owning a website? Here are a few concepts that will help them better understand what comes along with the territory.
Software and Code Must Be Maintained
Much of what we build these days relies on third-party software. For example, utilizing a CMS and plugins are a very common practice. We might also include a lot of our own custom code as well.
All of these items require updates. It might be a matter of updating your WordPress installation as usual. However, it may also go well beyond that level of maintenance.
Changes to programming languages such as PHP may require rewriting significant portions of code to stay functional. That comes with a cost of both time and money.
And speaking of money, any commercial software licenses also need to be kept up. Letting them lapse could lead to future problems.
Sometimes, a Change Is Needed
The software that seemed like a perfect fit in the beginning may not last. In the case of third-party apps, they might disappear into thin air without notice. That means finding a suitable alternative and making a switch.
A website that uses a CMS and is more than a year old will probably experience this scenario. A theme or plugin breaks, and updates are nowhere to be found. All of the sudden, you’re back to the drawing board.
It’s frustrating for everyone involved. But it’s also out of our control. While we may try to build with tools we think will be around for the long haul, there’s no guarantee. Clients will need to understand that reality.
The Web Moves Quickly
It’s probably safe to assume that most people know that technology evolves at break-neck speed. Anyone who has purchased an expensive smartphone has probably figured that out, as it becomes outdated mere months after release.
Websites aren’t much different. Just think of how your favorite CMS might have changed within the last six months to a year. Then think about how it has evolved in the past five years. The differences are likely very noticeable.
As such, user tastes and expectations change right along with technology. Thus, an organization must be ready to adapt as needed.
Helping Clients to Stay Informed
In the end, this is one more reason why the designer-client relationship is so important. Our experience and knowledge of the industry is something that needs to be shared with those we work with.
If we can better prepare clients for the responsibilities that go along with owning a website, we can tackle these challenges together.
The post The Most Important Thing Your Clients Should Know About Their Website appeared first on Speckyboy Design Magazine.
