Monday, 19 March 2018

5 Good Habits Every Design Agency Should Develop To Boost Productivity in 2018

These days, everything is about speed and productivity. You need to be able to deliver fast results but at the same time, you need to deliver quality services and products. Times, technology and consumer habits are changing fast. Nobody has the patience to wait for anything anymore and the attention span of the average human being is lower than ever.

For a design agency, this means that you need to adapt to your customers’ needs and also, to the constant changes within the targeted audience. You can boost productivity by working faster and through a deep understanding of how to better organize your work so that you will be able to deliver the best possible results with the least resources.

The main types of resources:

Yes, everything is resource related. Your productivity depends on how you manage them and the good habits you develop over time that will help you do it successfully. In order to understand the concept, let’s discuss first the main types of resources you need in your design agency and why each of them is important.

Human resources

It’s obvious that the most important resource you have are the people who make everything happen. Starting with the unskilled help and up to the high management positions, everyone is important and everyone contributes to the productivity of the company.


Time is of the essence when you work in the services sector. Your productivity depends on how you manage time and how efficiently you get to organize it, delegate tasks and prioritize them.


You get paid for services but you also need a budget in order to pay for all the other resources that you need during the creative process. Therefore, it’s important to also manage finances efficiently and prioritize expenditures according to the company’s needs.


This resource is strongly related to the human resource. You cannot manage or organize creativity but you can stimulate it and reward it accordingly.

Now, based on these four resources, let’s try and find out the best habits that will allow you to perform better and find the balance between costs and income.

How can you boost a design agency’s productivity?

Let’s start by admitting that there are numerous ways you can improve your management and boost productivity. For this article, however, I chose the most important five of them.

1. Get a CRM

What is a CRM?

CRM stands for Customer Relationship Management. It is a system that allows you to manage effectively all business relationships and the data associated with them. Everything related to customers, contact information, sales, accounts, leads and market prospects can be stored and managed from just one place, a central location, with a CRM system.

Usually, all these data are stored in a cloud and as a consequence, made accessible almost instantly when needed. If you want to check this option out, Hubspot offers a free CRM subscription to small business.


Why use a CRM?

Well, if you want to boost productivity, the first thing you need is a good client and market management. You need to keep all the information organized and at hand so that you will be able to save precious time and precious human resources easier and more effective than ever. You will save money as well, by automating this organizational process.

As you can see, a CRM allows you to save on three of the four main resources I have listed in the previous chapter. And, this is the main reason I have started with this suggestion. It can really make a difference.

Now, let’s move on to some tasks that are more specific to a design agency and take a quick look at what else you can do in order to boost your productivity:

2. Get informed

Getting to know your clients is a vital step when you are doing any type of job, not only creative work. Therefore, make sure you have a reliable process for gathering valuable information in place, before starting to work for your clients.

What does this mean and why is it important?

Well, whether you were asked to design a simple banner or a whole marketing campaign, you need to know who are your clients, who are their targeted customers, to what audience you are addressing your designs etc.

The data you gather through this process is important because it will help you organize your work better and delegate tasks more efficiently. Considering you know the strengths and weaknesses of each of your team members and the clients’ demands in detail, you will be able to assign tasks according to skills and competencies and thus, save not only time and money but also stimulate creativity.

TIP: If you want to do this even more efficiently, create a standardized template with questions and key ideas that will guide your team through the entire process.

3. Organize

There are several levels your productivity depends on. And, each assignment, task or campaign, engages several members of the team who work together or side by side to complete them in due time. As the manager, team leader or member of a design agency, you probably know already that the actual design comes last.

The sales team comes first, at the first level. They are responsible for landing the clients but also with the information gathering process. Then, the creative team comes in, at the second level. Their job is the take over the data provided by the first team and do the actual designs projects. Then, it’s up to the revision team to review the campaign and give it a green light or, if it is the case, to recommend adjustments, error corrections etc.

You can manage the flow of information between these levels and among members of the teams with a project management tool.

There are several choices in this area and many tools you can choose to work with, depending on your work style and daily processes.

Recommended top project management tools:

A. Teamweek


Teamweek is one of the best choices when it comes to project management tools. It can be used across multiple departments and as a consequence, it makes a great choice for a design agency where communications between different teams are essential. Teamweek allows you to assign projects to specific teams, pass them to another team (reassign) if necessary etc. It also gives you full access to the entire history of the project.

B. Trello


Another great management tool, Trello, is effective when you work with teams, especially if not all members are located in the same premises. In other words, it allows you to communicate easier with remotely located freelancers, contributors or clients. You can integrate Trello into a Gmail account or, you can use it as a standalone app. The app is available for all major operating system, desktop or mobile based.

C. Wrike

Wrike is also a great choice when it comes to project management. In fact, I would recommend it, especially for content management projects because it allows you to easily create project workflows between all members of the teams working on it.

4. Delegate

Every project gets to be done more quickly and more efficiently when everybody knows what they have to do, what are their roles and how to communicate with each other.

For maximum efficiency, project managers or coordinators need to set deadlines, assign tasks and track the progress of each campaign or project individually.

TIP: Take into account that people need breaks in order to be able to perform at maximum capacity. Also, tasks need to be delegated according to every designer’s skills.

5. Prioritize

This is also an important step in your productivity boosting process. Learn how to prioritize better and differentiate between urgent tasks and important tasks that can be delayed. Assign jobs according to priorities and choose deadlines based on actual relevant data.

If you need help, try using a time tracking tool such as “Tracking Time”, “Timely” or “Harvest”. They are both effective and useful and they can help you save precious resources while optimizing and boosting productivity.


TIP: You can combine a time tracking tool with a project management tool for better results.


There are many professional, capable and efficient design agencies out there. They are all aiming at a small piece of the same pie. The competition is fierce and if you want to succeed, you need to work constantly on developing new and better strategies to boost productivity and stay on top.

If you are looking for valuable advice on how to get better at what you are doing, I advise you to start with the above five steps: Get a CRM, get as much info as possible from your clients, organize your tasks and learn how to delegate and prioritize them better. If you commit to including all these steps in your management strategy, I am sure that you will rise above the competition.

What do you think about these five pieces of advice? What other important habits would you include in a design agency strategy that wants to boost its productivity?


Read More at 5 Good Habits Every Design Agency Should Develop To Boost Productivity in 2018

from Web Design Ledger

Getting Started with Chrome Developer Tools: Advanced DevTools

The most common tool in Chrome Developer Tools is Inspect Element. As we’ve covered, this tool allows you to view the CSS and HTML associated with specific on-screen elements. But there’s more power than that within DevTools. You can also access additional tools to do far more. You can debug JavaScript, monitor network performance, preview media queries and control cookies. And there’s even more than just that! Google lists dozens of functions within DevTools. We’ll look at some of the most useful and popular advanced functions within Chrome Developer Tools.

Using the JavaScript Debugger

Visiting the Console

Console is probably the second-most commonly-used part of Chrome’s Developer Tools. Using Console, you can view messages posted by your code.

Viewing JavaScript

With the debugger, you can view and adjust your JavaScript in detail. You can learn more about Chrome’s debugger in our introduction.

1. Click on the Sources tab in Chrome Developer Tools.

chrome developer tools

2. Select the appropriate JavaScript file from the left-hand menu pane.

chrome developer tools

3. JavaScript is often minified before deployment, making it hard to read. If necessary, click the Pretty Print button to de-minify the code.

chrome developer tools
chrome developer tools

Setting Debugging Breakpoints

Breakpoints are used to “pause” the execution of your code at a certain point. Set a breakpoint, then move through your code gradually to see why things aren’t working as expected.

1. Click on the “Sources” tab

2. Select the correct JavaScript file from the menu pane.

3. Click on a line number to set a breakpoint at that line.

chrome developer tools

Using Conditional Breakpoints

Conditional breakpoints will only trigger when certain conditions are met.

chrome developer tools

1. Right click on a line number.

2. Select “Add Conditional Breakpoint” from the context menu.

3. Enter your conditions in the dialog.

4. Press “Enter” to activate the breakpoint.

Emulate Devices

Set Media Queries

As covered previously, the Device Toolbar can be used to change the viewport size and emulate smaller devices. You can adjust specific pixel dimensions as well as the device pixel ratio to preview appearance. Common devices can be selected from the drop down to test specific devices.

1. Click the Device Toolbar icon or press Command + Shift + M (Mac) or Control + Shift + M (Windows).

2. Adjust viewpoint values directly.

3. Click “Reponsive” to view device presets.

Network Throttling

Use the “Online” dropdown to emulate various network conditions. This helps simulate poor connectivity or slower connections.

Emulating Sensors

If your site is responsive to accelerometer or geolocation values, you can emulate those device sensors from within Chrome Developer Tools.

1. While in the Elements panel, press the “Escape” key to open the Console Drawer.

2. Click the menu dots and choose “Sensors.”

3. Click the dropdown to select a geographic location, or select “Custom location” and enter specific GPS coordinates.

4. Click the dropdown to select a device orientation, or select “Custom orientation” and enter your own degree values.


Monitor Network and Performance

We can use DevTools to monitor network performance and bandwidth utilization. This can help us get a sense of what’s slowing down our site and how to improve our performance.

Network Filmstrip

The filmstrip will capture screenshots of your webpage as it loads. This will help record the elements that have been loaded so far, making it easier to understand what the site resources are loading.

1. Click on the Network tab.

2. Click on the camera icon.

3. Press Command + R (Mac) or Control + R (Windows) to reload the web page and capture the filmstrip.

4. Review the results below. Double-click on an image to zoom in and see what elements have loaded at that point.

Analyze Site Performance

The performance tab captures more than the loading order. This lets you analyze frames per second and CPU load, finding bottlenecks more quickly.

1. Click on the Performance Tab.

2. Click the “Reload” icon to reload the page and record performance characteristics.

3. Wait for the performance recording to finish.

4. Review the performance results and graph.

You can also record mid-page performance for web application. Click the “Record” icon to arbitarily capture performance data (click Stop when you’re done.) This will record animation performance, letting you capture results with user input without reloading the page.

View Local Storage and Cookies

Viewing Cookies

1. Click on the Applications tab.

2. Navigate the sidebar to find the “Cookies” dropdown.

3. Disclose the cookies list and select a cookie to view.

Set Dark Mode

1. Click the menu dots.

chrome developer tools

2. Choose the “Settings” menu.

chrome developer tools

3. Select “Dark” under Theme in Appearance.

chrome developer tools

Honorable Mention: Changing Content

While it’s useful to adjust your HTML on the fly, you can also have some fun with it. It’s easy to adjust site content as well, meaning you can create fake news stories and fake headlines while maintaining the parent site’s styling rules. Talk about Fake News.

1. Double-click on an HTML element to edit it.

2. Type your new content.

3. Profit?


There’s even more you can do with the Chrome Developer Tools. Examine Google’s own documentation to see what kind of power is available to you.

You might also like the following posts:

The Powerful JavaScript Debugger You Never Knew You Had

Getting Started with Chrome Developer Tools: Inspect Element

The post Getting Started with Chrome Developer Tools: Advanced DevTools appeared first on SpyreStudios.

from SpyreStudios

Small Business Web Design: Tips & Trends For Usable SMB Websites

Small Business design example

Each small business is very different and has different needs for their website. As a designer you have to understand these needs to figure out the best interface for each company. But there are many trends that overlap in the small business world. I’ve organized my thoughts here sharing what I think are the most […]

The post Small Business Web Design: Tips & Trends For Usable SMB Websites appeared first on Vandelay Design.

from Vandelay Design

Sunday, 18 March 2018

Integrating Security into Your Web Development Plan

Website security breaches have real consequences for visitors and site owners. Frustration and inconvenience from hijacked pages can keep potential customers from engaging with a website, while phishing and data leaks that expose customer information can cost site owners’ reputations, and their bottom line.

Integrating security into a new website or implementing security fixes to an existing website to close a vulnerability, is a critical part of being a website developer or owner. New sites need to be carefully developed to avoid leaving openings for known attack types. Existing sites should be reviewed on a regular basis for vulnerabilities. As risk factors are more widely recognized and blocked, hackers adjust approach, so it’s vital to do security reviews and update your preventative measures over time. Understanding password best-practices is important, but technical solutions go well beyond requiring high-quality login credentials.

It’s well worthwhile taking some time to understand all the potential ways attackers could cause damage and effective preventative measures that you can install on your or your clients’ websites. The Open Web Application Security Project (OWASP) is a good resource to help you understand risks and work on solutions, but to get you started, here are five common attack types to watch out for:

Cross-site scripting (XSS)

One of the most common attack types, this is when attackers piggyback off of your legitimate site. They might plant a malicious script on the site itself in user-input fields like a comments section, or hijack links. Possible use cases would be to redirect visitors or steal their identity. That can be combatted with input sanitization, which deletes or disables markup that would allow scripts to run from user data.

SQL Injection

Websites generally deploy a server database in the backend to store data. SQL injection targets databases and extracts information that shouldn’t be visible, inserts fake information, or sends damaging instructions. Customer or proprietary information can be exposed, and stored data can become unreliable, or lost entirely. Solve this vulnerability by setting limitations on what is allowed and expected or disallowed in user queries. Escaping characters in user queries that would allow sending anything that could change the database itself is a popular approach. Be vigilant about making sure all user inputs are limited in scope to avoid exploitation.


Https is becoming the standard for all websites, and browsers are moving to privilege, and eventually require this. Secure Socket Layer (SSL) uses secure certificate validation to verify trusted sites and encrypt the information sent. While this is a must-have and significantly improves security risks across several factors, it’s not a complete solution. Each third-party function within the site each needs to run with its own developer-signed https protocol.


Iframes generally display another site inline on a page but introduce vulnerability by allowing that outside integration. Ensure you only use iframes to trusted sites with their own https, and avoid them entirely on pages with sensitive content.


Cookies may add convenience for both site owner and end users, but they are also independently vulnerable to attack. It will take some extra work, but you’ll need to review each cookie, ensure it’s encrypted and that any vulnerabilities are closed.

Cybersecurity is increasingly an in-demand skill for IT professionals, making it a good way to improve employability in the immediate future, as well as an area to focus on for greater employment security and opportunity. Those who particularly gravitate toward security solutions could take full advantage of that skill by opening a specialized digital security consultancy. A business degree from lets you make the most of high-value experience and offerings by giving you the skills to launch and operate your own business.

Understanding what clients need and how to communicate the value of what you provide can allow you to improve your profitability and reap the rewards of running your own business. You might focus on how your online security offerings add value to your web development skills or create a specialized business around preventative or post-hack clean-up services for website owners who need a skilled consultant to supplement their in-house or consultant web designers.

The value of good online security practices becomes clearer every time there’s a high-profile hack or a personal experience with the frustration, inconvenience, or outright danger and loss of a security breach. Take the time to understand the risks and solutions available, implement best practices on your own and client websites, and position yourself for success in the future by investing in education to build your online security and business skills.

The post Integrating Security into Your Web Development Plan appeared first on SpyreStudios.

from SpyreStudios