Why Cybersecurity Should Affect Your Web Design


Cybersecurity should be at the core of your design before you consider any other elements of your site. Hacking is a serious problem, especially if you collect sensitive data. Your customers need to know they can rely on you to protect their personal information.

About 64 percent of companies have experienced some type of web-based attack. From the smallest business to the largest corporation, all are at the mercy of hackers if they don't put some security measures in place.

A hacker attack occurs every 39 seconds and impacts one in three Americans. With those statistics in mind, put your site users at ease by implementing the following security measures into your website designs:

1. Collect Less Data

One way to protect your customers is to limit the amount of data you collect and store online. Collect only what is an absolute necessity for you to complete an order. If you don't need their birth date, then don't ask for it. Minimize the information so if the worst happens and you do have a security breach, the hackers get less information than they otherwise would.

Some sites collect all types of information in an attempt to market to their users. While there is value in knowing the names of your customers' children and their ages, this also puts them at risk. This type of information is often used to gain access to sensitive accounts with qualifying questions.

2. Secure Your WordPress Site

About 75 million sites use WordPress as their content management system (CMS). Unfortunately, if not appropriately secured, it is vulnerable to hackers. Take the time to secure your WordPress site.

  • Use complicated usernames and passwords that aren't easy to crack.
  • Use a plugin to block anyone trying to log in with the username admin.
  • Change your dashboard location from wp-admin to something with a different name.
  • Utilize SSL.
  • Add a firewall.

Those are some basic things you can do today to protect your WordPress site. You should delve a bit deeper into the topic of securing your WordPress site and close off any backdoors that allow hackers to gain a foothold.

3. Secure Your WordPress Database Prefix

The default database prefix is wp-. Hackers are well aware that most people will stick with the default settings. You can throw them off and hopefully drive them away by changing the prefix you use for your database. Changing your database prefix isn't complicated, but you should always back your site up before making changes.

Changing your prefix protects you from SQL injection attacks. There are plugins you can install that allow you to quickly change your database prefix without a lot of PHP knowledge, such as Brozzme DB Prefix or iThemes Security.

4. Create a Privacy Policy

The European Union's General Data Protection Regulation (GDPR) now requires website owners to list clear policies on how they protect user data and how they use that data — even if you don't live in the EU. If you have even one customer who falls under GDPR, you must be compliant. You've probably noticed that some sites have privacy policies that are so complex you'd have to be a lawyer to understand them.

Don't do that to your site visitors. Keep your language clear and readable, so site visitors understand what you plan to do with the information you collect and the measures you have in place to protect them. Keep privacy policies simple and to the point. It's probably easier than you think to get GDPR compliant, but it is essential to pay attention to this aspect of your security plan.

5. Secure Your Own Devices

One way hackers gain access to websites is through your devices. No matter where you're working, upload files via virtual private networks (VPN). A VPN lets you remotely upload files without using a public network that might be vulnerable to attack. A VPN works similarly to a firewall to encrypt and protect your data from hackers.

If you are working in a public location and using their guest internet access, secure your device by choosing a public location in your Wi-Fi settings. Limit who can see your device to avoid a situation where another patron gains access to your files and thus to your website.

6. Do Frequent Backups

Let's say the worst has happened and a hacker gained control of your site. They've infiltrated every single file and you have no idea how to fix the problem. If you back up your site frequently, this is less of an Armageddon scenario than if you don't. There are programs you can install that run backups on a regular basis and many website hosting companies do their own nightly backups.

No matter how many safeguards you install, there is a possibility hackers will overtake your site. However, if you have a complete backup, then it isn't as much of a problem. You simply work with your hosting company to find the way they entered your site, secure it and wipe out the old data, uploading your backup in its place. Your site is only down a fraction of the time it would otherwise be.

One of the biggest challenges as a designer is getting into the habit of backing up your work every time you make the slightest change. It's easy to forget this step and lose hours of work because a hacker takes over your site. Either set up automated backups or get into the habit of doing one each time you finish changes.

Cybersecurity Matters

The most beautifully designed site in the world isn't useful if it gets hacked. Consider the backend of your website's design to prevent hackers from getting in. Make your site user-friendly, but also consider the type of information you collect and how you can keep it safe for those who entrust you with it. Cybersecurity is just another element of web design that makes your work better than your competitors'.

Lexie is a graphic designer and typography enthusiast. She spends most of her time A/B testing websites and creating style guides. Check out her blog, Design Roast, and follow her on Twitter @lexieludesigner.

Read the full post

How to download YouTube videos safely


.

You need a very good downloader to download YouTube video safely. Even though there are hundreds of such downloaders available, finding the right one can be little time-consuming and you may need to do some good research. The best downloader will have some definite advantage over the general downloaders which are available today. The following factors are very important in choosing a downloader which will help you to download you Tube video safely.

Speed up the downloader

Speed of the downloader is very important. There are some downloaders which are very sluggish and they need few hours to download a simple video. You cannot wait hours for the downloader to download a video. You need a downloader which will download your videos with a fast speed. There are some YouTube video downloader apps which will download a two-hour full HD video in just four minutes. Such fast downloaders use the multithread technology and as a result of that you get the benefit of getting your video within few seconds.

Supports any format

Find a video downloader that will allow you to download You Tube videos in any format. Which should download the videos in MP4, WebM, 3GP, FLV formats. You should also be able to save any YouTube music as MP3 files. Such a downloader should be able to rip web links to AVI, MKV, WMV, iPhone, PSP, Android, phones, etc.

Save several videos at once

Your downloader should allow you to save several videos at once. There are many downloaders which does not allow this feature. Would you like to keep downloading videos one by one doing everything manually? Definitely not. You need a downloader which will help you to save time by saving several videos at once as you want.

Original quality

Just make sure that the downloader you are using preserves the original quality of the videos. If you get a low quality video that you cannot use or which is very much pixilated, what is the use of downloading the video? It is just a waste of your time and Internet. You need a downloader which will preserve the original quality. Some of the downloaders may even help you to improve the quality by allowing you to download in a higher resolution. It is also important that your downloader allows you to download 4k and full HD videos. With time, the quality of the videos in you Tube and other sites are increasing and so you downloader should be able to handle the latest type of videos and download it for you within a short time. Find a downloader that supports different qualities such as 4K, 1440p, 1080p, 720p, 480p, 360p, 240p, 180p.

Ability to limit download speed

It is important for people with slow Internet connection to limit the download speed. However, most of the downloaders are not sophisticated enough to allow such ability to limit download speed. However, there are some very good downloaders available which will allow you to limit download speed according to your wish. Choose a downloader which has this facility.

Ability to download from different sites

There are some downloaders which will allow you to download videos only from a few sites. On the other hand there are downloaders which will help you to download such videos from 10,000 sites. Which one will you choose? You should be able to capture online videos easily from YouTube, Facebook, Vimeo, Dailymotion, Twitch, LiveLeak, Veoh, local and adult sites.

Freemake Video Downloader is a downloader that have all the above mentioned features. It lets you download YouTube videos and 10,000 other sites; save videos, playlists, channels in HD, MP4, MP3, AVI, 3GP, FLV, etc. It is absolutely free. Download it here

Read the full post
Seamless Lite New Features: Custom Shapes & Shape Galleries (How-To)

Seamless Lite New Features: Custom Shapes & Shape Galleries (How-To)


COLOURlovers spend countless hours creating amazing Patten Templates using Seamless Lite. Today, we are happy to announce some amazing new feature updates to the in-site seamless pattern design process.

Share this Post Pin It
 

Along with the new features, Seamless Lite has been given some big love and a smoother, speedier designing experience should be noticeable.

How-To: Custom Shapes + Shape Gallery from COLOURlovers on Vimeo.

How-To: Custom Shapes + Shape Gallery

"Save as Shape" Tool

You can now save individual elements using the newly installed “Save as Shape” tool. This will allow you to keep those wonderfully complicated design elements you have been creating for a single Pattern Template. Only NOW, you can re-use those awesome pieces in any number of Pattern Template variation by using, “My Shapes” located in your Shapes Library on Seamless Lite (when you are logged in).

 

 How To Use "Save as Shape"

In Seamless Lite, create a shape from multiple shapes using the preexisting shapes in the Shape Library. Select all layers that make up this custom shape. No need to group these either, when you save the shape as a single element it will automatically group it and give it the name you give your shape upon saving,

Select your shape layers and click, Save as Shape" in the layer tools area. 

Preview your shape element, give it a title, description if you want, tags and then Save Shape.

That simple! At this point, shapes cannot be shared with one another (unless you do that privately - it's your choice).

Shape Galleries: A Place to Show Off  Your Abilities!

A new gallery for all of your custom shapes, will be added to your profile page the moment you create and save your first shape with the "Save as Shape" tool.

 

Gallery element for your Shapes (above)

Gallery view of your shapes allows the same filter-view options as other creations on the site.

Each shape has its own information page just like the other creations on CLCOLOURlover.com. Everyone has the ability to LOVE, FAVE and SHARE this shape made by you! Additionally, you have the ability to download the .SVG file, located under the, made "with Seamless Lite" link and DELETE or EDIT the shape profile under the OPTIONS drop-down.

Shapes will also stream on to the homepage of COLOURlovers.com as they are being created. So let's see what you got?!

Read the full post
Reaching More Lovers of Color: Color Stream iPhone App Acquired

Reaching More Lovers of Color: Color Stream iPhone App Acquired


We've known developer/designer Sahil Lavingia for a while now and have continued to be impressed with the apps and services he puts out. One app in particular we've had our eye on is his color app Color Stream, an iPhone app that helps create & save color palettes... Something near and dear to our hearts.

Share this Post Pin It

So when the opportunity came along to acquire the app and provide continued color inspiration to the tens of thousands of Color Stream users, we jumped at the chance. And one of the reasons we made our iPhone app free is so all Color Stream users could switch over to our ColorSchemer app without having to re-buy anything. They'll be joining the nearly 100,000 users of the ColorSchemer app and can continue to get the updates for our top color app at no extra cost.

If you're a Color Stream user, now's a great time to join the family and get the free ColorSchemer app to continue to receive updates with the latest and greatest features and integration with the COLOURlovers community.

The Color Stream app was a well-designed and built app that worked great for creating palettes from scratch, or from a photo... but the biggest thing it was missing was an awesome community of creative people to share those palettes with, and now that's changing! We're excited to extend our community to more and more creative people and we look forward to even more inspirations that this growing and diverse mix of new users will create.

Download ColorSchemer for iPhone Now.

Read the full post
ColorSchemer Studio 2 for Mac (+COLOURlovers)

ColorSchemer Studio 2 for Mac (+COLOURlovers)


Some people call them color palettes and some people call them color schemes... Now we're all part of one big family. We've known Aaron from ColorSchemer for a few years now and have talked on and off about how we could work together. Well, I'm excited to announce that we're not just working together, we're joining color forces.

The new release of ColorSchemer Studio 2 for Mac of is the first hint at what the future holds for that partnership with the integration of the 1,000,000 COLOURlovers palettes directly accessible via the software gallery browser. Pretty soon you'll not only be able to browse palettes from COLOURlovers, you'll be able to save your palettes right to our site from your desktop. You'll see the best of what we've been building and the best from what Aaron's been building begin to form together here and in ColorSchemer Studio.

ColorSchemer Studio 2 for Mac OS X

ColorSchemer Studio 2ColorSchemer Studio 2 is a professional color-matching application for your Mac that will help you build beautiful color schemes quickly and easily.

Use ColorSchemer Studio to identify color harmonies for the web (RGB) or print (CMYK), create palettes from photos, search over a million existing color schemes, mix colors, create gradient blends, and much more!

ColorSchemer Studio 2 takes color matching and management to a new level with a number of advanced new features and tools, including:

CMYK Support

RGB, CMYK, color management, color profiles

One of the most common feature requests we get is for adding CMYK support, and now ColorSchemer Studio 2 has it!

Not only that, but this new release goes even further by color-managing both RGB and CMYK colors, so you can specify color profiles (just like in Photoshop and other pro graphics apps) to make sure your colors look exactly as you intended.

Color Management/Color Profile Support

RGB, CMYK, color management, color profiles

ColorSchemer Studio 2 now color-manages all displayed colors. You can now work with specific color profiles to ensure your color-critical work comes out right the first time, whether it’s for the web or print.

COLOURlovers Integration

GalleryBrowser

Connect to the COLOURlovers community to browse, search, and download over a million color palettes right from the program.

LiveSchemes – Color relationships that you define

LiveSchemes SchemeBuilder

The new LiveSchemes tools help you to visually create color harmony relationships as easily as dragging colors around the color wheel.

Create custom LiveScheme formulas based on color theory, or your own creativity. You can also reverse-engineer and color-shift existing color schemes with a simple drag & drop.

LiveSchemes SchemeBrowser

Browse your saved LiveSchemes to apply custom color theory relationships to any color to build a ready-to-use color scheme.

QuickPreview Layout Templates

QuickPreview

ColorSchemer Studio 2 now comes with 13 different QuickPreview layout templates that you can use to experiment with color scheme ideas in a variety of different settings, including website, blog, print and pattern layouts.

Color Variations

Variations

Use the new Variations palette to find colors that are similar or related to any starting base color.

Color Groups

Color Groups

Organize your colors into groups or folders within your Favorite Colors when building your color schemes.

ColorSchemer Studio 2 also adds a bunch of other enhancements to give you more control over your colors:

  • New ways to pick colors: Use the new spectrum picker, or select from among the included color libraries.
  • New import/export formats: Including Adobe Swatch Exchange (ASE), PNG, and XML formats.
  • Enhanced Contrast Analyzer Check text and background color combinations for sufficient contrast and readability, based on W3C, WCAG, or HP accessibility recommendations.
  • Drag-color-to-text Drag a color from ColorSchemer Studio and drop it right into your HTML and it will automatically be converted into a hex value in your code.
  • Improved UI: Most tool windows have been combined into an easier-to-manage single-window interface.

 

Happy Huesdays: Special COLOURlovers Offer

clspons

In the spirit of Black Friday... we're extending a more colorful offer. If you purchase a license of ColorSchemer Studio in December and get a FREE Sponsored Membership on COLOURlovers as a thank you (a $20 value).

Just email us with your Order Number for ColorSchemer Studio and your COLOURlovers username and we'll upgrade your account. (Already a Sponsored Member? We'll give you a gift credit to use next year or give away.)

Licenses/Upgrades

 

ColorSchemer Studio 2 remains $49.99 per license, and discounted upgrade licenses are also available for registered users of ColorSchemer Studio v1.x for $29.99.

» Purchase a license
» Upgrade your license
» More info

Also, if you purchased ColorSchemer Studio v1.x after Oct 1, 2009, you are entitled to a free upgrade to ColorSchemer Studio 2. Visit the myColorSchemer section and enter your Order Number to upgrade your license key.

 

As Always... You Can Make it Better

This isn't just a product to sell you... this is a product for us to grow together. We've always taken special care to only work with quality products and never compromise the wonderful community and culture we have here. The partnership with ColorSchemer is brand new, so we've only had a little amount of time to work on integrating our services. We plan on bringing the best of both worlds together in the future and you can help us with that.
-What would you like to see ColorSchemer include from COPASO?
-What would you like to see COLOURlovers bring online from ColorSchemer?
Aaron is now a part of the COLOURlovers family, so welcome him and and let him know how he can help you share the love.

+D

Add some color to your project! Check out Creative Market for more design solutions.

     

Read the full post
Free Advanced DHTML Color Picker

Free Advanced DHTML Color Picker


When we were developing COPASO, we found that we needed to have a more advanced color picker to work inside the application... and since COPASO is built with DHTML it was easy enough to pull out the picker to use on the other creation pages of our site. Once we'd modularized the color picker code it made sense to offer it to others to use on their own sites and projects. So here is the code to get our Color Picker working on your site for free. (We'll even host the files)

License: Attribution-Noncommercial-Share Alike 3.0 Unported
If you have a need that doesn't fit the license above, contact us.

COLOURlovers Color Picker Demo

 

Here is the Code You Need & Examples...


Put this Code into Your HTML <head> Section:
<link rel="stylesheet" href="http://colourlovers.com.s3.amazonaws.com/COLOURloversColorPicker/COLOURloversColorPicker.css" type="text/css" media="all" />
<script type="text/JavaScript" src="http://colourlovers.com.s3.amazonaws.com/COLOURloversColorPicker/js/COLOURloversColorPicker.js"></script>
Put this Code into Your HTML <body> Section:
<div id="CLCP" class="CLCP"></div>
<script type="text/JavaScript">
_whichField = "hexValue_0";
CLCPHandler = function(_hex) {
// This function gets called by the picker when the sliders are being dragged. The variable _hex contains the current hex value from the picker
// This code serves as an example only, here we use it to do three things:
// Here we simply drop the variable _hex into the input field, so we can see what the hex value coming from the picker is:
document.getElementById(_whichField).value = _hex;
// Here is where we color the BG of a div to preview the color:
document.getElementById("CLCPUpdateDiv").style.background = ("#" + _hex);
// Giving you control over this function really puts the reigns in your hands. Rewrite this function as you see fit to really take control of this color picker.
}
// Settings:
_CLCPdisplay = "none"; // Values: "none", "block". Default "none"
_CLCPisDraggable = true; // Values: true, false. Default true
_CLCPposition = "absolute"; // Values: "absolute", "relative". Default "absolute"
_CLCPinitHex = "0039B3"; // Values: Any valid hex value. Default "ffffff"
CLCPinitPicker();
</script>

 

Picker Attached to a Single Text Field:

Show picker and load the color to the left

Single Text Field Example Code

<input name="YourInputName" id="hexValue_0" style="width: 100px;" maxlength="6" value="0000FF" />
<a href="JavaScript:_whichField='hexValue_0';CLCPshowPicker({_hex: document.getElementById('hexValue_0').value});">Show picker and load the color to the left</a>

 

Picker Attached to Multiple Text Fields:

Show picker at x=300, y=1400 and don't update it's color

Show picker at x=12, y=1400 and load the color to the left

Show picker and load the color to the left

Show picker at mouse click and don't update it's color

Show picker at mouse click and don't update it's color [Example with an image]


Multiple Text Field Example Code:


<input name="YourInputName" id="multipleHexValue_0" style="width: 100px;" maxlength="6" value="FFFFFF" />
<a href="JavaScript:_whichField='multipleHexValue_0';CLCPshowPicker({_x: 300,_y: 200});">Show picker at x=300, y=200 and don't update it's color</a>
<input name="YourInputName" id="multipleHexValue_1" style="width: 100px;" maxlength="6" value="18AB49" />
<a href="JavaScript:_whichField='multipleHexValue_1';CLCPshowPicker({_hex: document.getElementById('multipleHexValue_1').value,_x: 12,_y: 400});">Show picker at x=12, y=400 and load the color to the left</a>
<input name="YourInputName" id="multipleHexValue_2" style="width: 100px;" maxlength="6" value="FF0000" />
<a href="JavaScript:_whichField='multipleHexValue_2';CLCPshowPicker({_hex: document.getElementById('multipleHexValue_2').value});">Show picker and load the color to the left</a>
<input name="YourInputName" id="multipleHexValue_3" style="width: 100px;" maxlength="6" value="FFFFFF" />
<a href="JavaScript:_whichField='multipleHexValue_3';CLCPshowPicker();">Show picker at mouse click and don't update it's color</a>
<input name="YourInputName" id="multipleHexValue_4" style="width: 100px;" maxlength="6" value="000000" />
<img src="http://colourlovers.com.s3.amazonaws.com/images/v3/color_wheel.png" style="vertical-align: -20%; cursor: pointer;" onclick="_whichField = 'multipleHexValue_4'; CLCPshowPicker();" alt="Show picker at mouse click and don't update it's color" title="Show picker at mouse click and don't update it's color" /> [Example with an image]

 

Here is a break down of the object passed to CLCPshowPicker()


{
_hex: "FF4400", // When a valid hex value is passed, it will set the picker to this hex. Otherwise the picker will not change it's current color [if any].
_x: 12, // If a x coordinate is passed, the picker will move to the x value. Otherwise, the x coordinate from the mouse click will be used.
_y: 400 // If a y coordinate is passed, the picker will move to the y value. Otherwise, the y coordinate from the mouse click will be used.
// All of these variables are optional
}

 

Feb. 24, 2008 - Update
Fixed a bug in IE where users couldn't click-drag-highlight other objects within the page.

May 1, 2008 - Update
Fixed a conflict this script had with jQuery. Thanks to Ozh at planetOzh.com for the report!

Read the full post

Search The Blog

Subscribe & Share

Our Latest Tweets

Attention #colourlovers: "9 colors of Christmas" is out! The first color is PINK! 💗 #colors #ChristmasIsComing… https://t.co/ND5EUMP27m
about 1 day ago
Tweet this ArticleFollow @COLOURlovers

Latest Articles

//View More ›

Latest Colors

//View More ›

Latest Palettes

//View More ›

Latest Patterns

//View More ›