Douglas Crockford famously declared browsers to be “the most hostile software engineering environment imaginable,” and that wasn’t hyperbole. Ensuring that our websites work across a myriad of different devices, screen sizes and browsers our users depend on to access the web is a tall order, but it’s necessary.
If our websites don’t enable users to accomplish the key tasks they come to do, we’ve failed them. We should do everything in our power to ensure our websites function under even the harshest of scenarios, but at the same, we can’t expect our users to have the exact same experience in every browser, on every device.
Hey isn’t this a web design site?! Sure is. But I have it on good authority that web designers, along with a lot of the rest of the world love coffee. And, you know, convenience. And quality. I sure do.
Driftaway Coffee is a freshly roasted coffee subscription that is personalized to your taste, delivered directly to your door. All subscriptions start with a tasting kit of four different coffees, you try them out, enter your favorites and based on which ones you like, you will get coffees matching your taste profile.
I’m in! Driftaway is sponsoring here, of course, but my house is a legit paid subscriber. We subscribe to a bunch of stuff at our house, to make our lives easier. Things that we know we’ll use and use at a fairly constant rate. Dog food, paper towels, and Epic bars! Coffee is totally on that list, but I’m not about to buy coffee from Amazon.
I want an online coffee retailer that I can trust. That is incentivized to send me fresh coffee that I like because that’s what they’ve hinged their business on. Fortunately, that’s Driftaway.
My house, in the wee hours of the morning.
So how’s the coffee? I’m a fan. I’d say we’re borderline coffee snobs around my house. We have a gooseneck kettle to get the water to the perfect 205°F. We have an Chemex Coffeemaker with a permanent home on the counter, right next to our fancy burr grinder. All that to say we’ve spent some time and money on our enjoyment of coffee and refining our tastes. I’ve enjoyed all of the profiles they’ve sent us so far, but of course, some more than others.
You really do teach them what you think of the coffees, so future orders can be refined.
The Kitchn (a popular home cooking site) says of Driftaway “This is a great subscription for someone wanting to dive into the world of coffee, as Driftaway makes the process simple yet still focused on what you think tastes best.”
There is a non-standard way to stroke HTML text (SVG has a standard way). It’s not particularly new. There are -webkit- and -moz- prefixes for it. Jen Simmons recently posted about it, with an example:
This CSS isn’t fully-baked or fully-supported. But it’s good enough to be used today, especially since it’s simply offering a visual enhancement. It’s not mission critical to making a website usable.
I’d only perhaps add that if you were going to do something like add a stroke around white text, you could wrap it in a @supports to be extra sure it’ll be OK (just in case a browser exists that supports text-fill-color but not text-stroke-color):
@supports
((-webkit-text-stroke-color: #666)
and
(-webkit-text-fill-color: white))
or
((-moz-text-stroke-color: #666)
and
(-moz-text-fill-color: white)) {
span {
-moz-text-fill-color: white;
-webkit-text-fill-color: white;
-moz-text-stroke-color: #666;
-webkit-text-stroke-color: #666;
-moz-text-stroke-width: 2px;
-webkit-text-stroke-width: 2px;
}
}
That’s the thing that gets me about it. When you set a stroke straddled over the designed edge of a character, you’re losing the integrity of the shape.
And that’s the trouble with text-stroke in CSS: you have no choice. It’s center-aligned stroke only. Either of the other options, arguably, would have been more useful. It’s not the world’s biggest deal. The larger the text and the beefier the characters, the easier it is to get away with.
Set Behind Trick
If you’d like to simulate an outside-aligned stroke, James Nowland shows how you can set psuedo-element text behind the original text and still use text-stroke:
The more I use CSS Grid, the more convinced I am that there is no benefit to be had by adding a layer of abstraction over it. CSS Grid is the layout framework. Baked right into the browser.
Why can’t we apply styles based on the space available to the module we’re designing, rather than looking at the shape of the viewport?
This is, in a nutshell, the disconnect that container queries are trying to address. As our designs become more modular and pattern-driven, the value of media queries has decreased.
Form Maker is the simple name of a not so simple plugin from the WordPress forge WebDorado. Form Maker lets you build flexible forms that also work on mobile devices via drag and drop.
Form Maker: Matured and Free
Form Maker, in its basic version, is a free plugin in active development. The current version on the market is 1.10.7. The compatibility of the plugin with the most recent WordPress edition is confirmed. The minimum requirements for Form Maker are WordPress version 3 and up, a PHP in version 5 and up, as well as a MySQL starting from version 5.
Here’s where to find Form Maker in the plugin repository:
Form Maker’s not so secret power is that it lets you build any form within a simple drag and drop interface. Although the creation is so simple, the form’s functionality can be elaborate. For instance, Form Maker does not only allow you to send data, but it also makes it possible to directly write this data into a database. All form settings that you already know from PHP are available as dialogue options for simple configuration.
Even though this may sound flat, the creation of a new form is child’s play. After the installation of the plugin, which can either be done via FTP, or via install plugins in the backend of your WordPress by searching for WebDorado Forms, you’ll find another menu item in your backend navigation.
The Form Maker in the WordPress Backend
Under the menu item Form Maker, you’ll find a list of your forms with their respective WordPress shortcodes, as well as their PHP functions if you happen to want to integrate them somewhere where shortcodes don’t work. The yellow shift symbol opens a form, allowing you to edit it.
The blue plus button in the top left allows for the creation of a completely new form. Of course, forms can also be deleted from this list. If you happen to have such a massive amount of different forms, you may be happy that you can even find your forms via search terms. The average user probably would not lose track off his forms even without this function. WebDorado calls this overview the Manager.
Under the menu item Submissions, you access the database and have it display its entries, filtered by form. To do so, you have to configure the database storage for the respective form, because otherwise, Form Maker will only send to the accordingly defined email address.
The item Blocked IPs allows you to enter IP addresses that you want to block from filling in your forms. You’ll realize pretty quickly that there are legitimate application cases for this method.
Under Themes, you’ll find a bunch of pre-defined designs which turn out to be customized CSS files, which affect the look of your forms. If you know CSS, you can not only alter existing themes, but also create new ones. The creation of new themes is not visually supported in any way. You have to write pure CSS in a pure editor window.
By clicking on one of the grey stars in the theme overview, it will turn yellow, indicating that this theme will be used as the default for future forms. Of course, you still get to select a different theme in the individual form, but you’re not forced to do that if you have chosen a fitting default setting.
Last but not least, Global Options is where you find the input option for your Recaptcha keys, when working with this antispam method. This is also where you lodge the field delimiter for the CSV export of your form data.
Creating a Form With Form Maker
As I have described already, forms can be edited, or created from scratch in the Manager. If you work somewhat like I do, you may only want to create an entirely new form if there is absolutely no other way around it.
Thus, it’s a good thing that we are able to open existing forms to edit them, and then click the top right button labeled Save as Copy. Here, the entire layout remains, but entered content doesn’t.
If you have turned off the drag and drop functionality, you won’t simply move around form fields with the mouse anymore. Instead, you’ll now find a small editing bar on each form field, letting you change the position, as well as other parameters.
From this toolbar, especially the small, plain, yellow pen packs a punch. Clicking the symbol opens an editing window, within which you have full access to all parameters of the selected form field. In this rather complex example, the goal is to set up a rating scale for a product rating.
The process is not fully self-explanatory or intuitive, so it’s great that WebDorado has created this step by step guide to their plugin.
On the top right of the editor, you’ll find the item Form Options. Here is where you lodge the logic behind the form. A simple Paypal integration (paid) is available, for example. Program specific functions using JavaScript, and even conditional logic can be created with just a few mouse clicks.
Conditional logic means only displaying certain form contents if certain other form field were filled in a specific way. For instance, after the field male/female, the field How many pairs of shoes do you have? would not have to be displayed anymore, if the previous field was answered with female.
Form Maker: the Different Expansion Stages
Form Maker is available in four flavors. The free variant comes without any support, and a limit to seven fields per form. At least, you can create an unlimited amount of forms. You also have to forgo the Paypal integration, the file upload, as well as several other features.
Starting from Personal, you get the full feature set. The differences are related to the support for domains, as well as the support duration. For a one-time payment of 30 USD, Personal nets you six months of support for a domain. The Business plan gets you one year of support on three domains for a one-time cost of 45 USD, and the Developer plan offers twelve months of support on an unlimited amount of domains for 60 USD.
Considering the very reasonable prices, I’d definitely recommend the developer plan for web developers, while ambitioned single users should go for the business plan, simply because the support duration is twice as long as it is for the personal tariff.
Conclusion: Flexible Form Plugin Doesn’t Leave Much to be Desired
Form Maker is a premium WordPress plugin that is definitely worth its price. Even the highest price of 60 USD wouldn’t even get you a plumber for an hour, and if you go to Luigi’s around the corner with three people, that probably wouldn’t be enough either, and in the end, you’d only be full once.
If I had to criticize something, I’d probably mention the not fully matured design of the plugin. In some places, it does seem a bit casual, not very contemporary, but it works.
It’s important to note that good CSS knowledge can significantly improve the looks of the form. The integrated themes are pretty mediocre. But all in all, Form Maker definitely earns a recommendation.
One of the keys to education, is learning how to learn. This was instilled in me at a very young age and was a battle for me to figure out how to do. How do I teach myself how to teach myself. Everyone has their own fool proof plan and take on this, but it never came natural to me.
In high school, I was like everyone else in regards to my education. Which entailed not understanding an array of material, then cramming right before the test, which, taught me a valuable lesson. It works!
What a simple concept! And with this revelation, I carried my head high while never actually completely understanding everything, but with the pride of knowing if given a day, I could pass a test on the finely defined material. This learning method did not hold true with programming….
Every instance of a problem is different, code is implemented in ways I have not used, and I am the sole resolver of the issue. And it was hard for me to adapt to this role. So I had to take a step back and reteach myself how to approach problems and how to resolve them. I had to think of things not in a linear fashion, but understand the full scope of problems that I was about to face and make a conscious decision on how to fix that problem while wasting the smallest amount of time.
What has worked for me was repetition. I always struggled with retention of information. Learning to spend my time, methodically working through issues, and defining solutions in my head prior to jumping right in. Understand the scope of the problem prior to defining a implementable solution. This was hard for me to get used to.
Once I understood my limitations, I could then understand the scope of my problem and build a learning structure for myself to see success. I placed these self defined limitations into different categories of understanding. Vernacular, contextual, applied, and fine arts. Once these pillars of personal development where set, I structured my day to allow time to proactively practice each.
Vernacular Understanding and Learning
I wake of at 5 A.M. everyday, walk upstairs and read for a minimum of a hour and a half to two hours. I am slow to wake up so, giving myself time to settle and enjoy my morning without any thought intensive activity has been key for me. I read two books a month, or at least push to meet this goal switching between fiction and nonfiction. Switching between the two primarily because of informational retention. Learning to enjoy literature to enjoy literature, and enjoying literature as a means to better understand the world.
(A few of the books I have recently read)
Contextual Career Betterment
Contextual being education, is The Flatiron School. I begin working on school work at 8 o’clock and push to complete and retain as much as I can within a 5-hour window that I have set for myself. 5 hours is a personal choice because I tend to get sidetracked and lose my focus around this time.
(Work station)
Applied and Fine Arts
This is something I have a passion for, and is a great way to break the monotony of my average day. The last book I read was from Thomas Korn one of foundational leaders in woodcraft.
“None of us enter our studios because the world desperately requires another painting or symphony or chair. But none of us take the work lightly, either, because it requires too much commitment, discipline, and risk of failure. Those who choose to do it professionally, except for the very few who reach the top, could find more effective ways to earn a decent living. The simple truth is that people who engage in creative practice go into the studio first and foremost because they expect to emerge from the other end of the creative gauntlet as different people…. But whatever our motivation may be, the bottom line is always the same: we engage in the creative process to become more of whom we’d like to be and, just as important, to discover more of whom we might become. We may make things because we enjoy the process, but our underlying intent, inevitably, is self-transformation.”
Understanding this, to become who you want to be, not pushing to correct the flaws you see in your own personal life is detrimental to personal growth. Ideas without application stagnate the potential of creating something greater than yourself. The arts are not just limited to craft skill, but the thought process and learning to think outside the constraints of the box you have build for yourself around “what you do” will allow you to see the other areas of learning you practice in a different light.
(Table I built out of an old 1964 fire hydrant)
Practicing these four pillars of understanding, have bettered myself in ways I can not image. I am not saying that this path is right for everyone. Choosing even one area that you find a weakness in and actively seeking to better yourself in that; you will be amazed at what you may find out about yourself.
Building this structure for myself to practice and follow has helped me immensely in school. I am able to retain and understand more information, and feel like I am not just learning code, but learning to create structure, discipline to see the bigger picture, and the ability to look at problems and resolutions in a proactive manner.
WordPress may not be all that glamorous when it first comes out of the box. Yet, its affinity for easy customization using plugins has made it the most popular and widely-used CMS platform on the market today.
Whenever you need to incorporate a useful capability or function into your site, there is almost always a plugin that will do the task.
In most cases, there are tens or even hundreds that could do the job. The number of available plugins is not limitless, but there are still tens of thousands to choose among. Which can make finding the best one, or even a better than average one, a challenge.
The good news is this: We’ve chosen some of the best WordPress plugins on the market for your consideration.
These 9 plugins are all quite useful. One or two of them could be considered mandatory if you don’t already have the functionality they offer.
The wpDataTables plugin gives you host of useful data management functionalities. wpDataTables enables you to create tables and charts, but it’s capabilities go well beyond that. The tables and charts are interactive, natively responsive, and editable. Editing a table in wpDataTables, is no more difficult than editing a table in Excel. In addition, these tables can be extremely large. At the same time, editing or managing the tables can be done quickly, since the data management functions are controlled by the MySQL server.
The tables you create can in turn be used to create charts; which, like the tables themselves, can be edited in real time; plus, selected cells, columns, or rows can be highlighted. The wpDataTables plugin is also convenient for maintaining existing tables and charts; when it’s important that the tables and charts you create need to be kept up to date.
Good web design depends greatly on the ability to manage content such that it is presented in the most appropriate manner. Content Timeline is a highly useful plugin that enables you to display content in a sliding timeline.
A sliding content timeline is easy to create. It’s primarily a matter of using drag and drop functionality. The resulting timeline will be both responsive and completely customizable. You can add, delete, and sort blocks of content as you so choose. You can also edit an item in a timeline, in its own window. You can also give a timeline a cool or professional look with the 12 customizable Card Layouts, and you can also create your own.
This plugin enables you to incorporate several highly useful features into your timelines; Swipe functionality for one. And posts, for example, can be sorted by category, year, or month, for another.
LayerSlider is a popular plugin. Its functionalities and capabilities can be observed in large numbers of websites built around creative and innovative design practices.
Where this WP plugin really shines is the overall flexibility it provides, and, thanks to the complexity of animations its multi-purpose animation platform can create, the ability to incorporate some truly mind-boggling slideshows, galleries, and landing pages. Or, build a dynamic content slider that automatically adds posts as they appear.
If you can think of it, LayerSlider can animate it. Functionality ranges from random or cyclical actions and multi-step animations, to split text animations, flying letters, stackable transitions, pop-out effects, and on and on.
Purchasing LayerSlider as a standalone tool makes sense since you stand to gain from all the features and benefits this plugin brings to the table, and at lesser expense than its main competitor.
With Logic Hop, you can bring the power of personalization to WordPress, and to a marketing campaign as well. This plugin enables to present the right content, to the right person or audience, at the right time – using real-time data to more effectively connect with your users.
Build powerful CTA logic, display content to selected users based on query strings, or personalize content using shortcodes and widgets. Logic Hop offers a free, 14-day trial.
Wordfence Security, the most downloaded WordPress security plugin, is an open-source plugin (which means it’s 100% free!) that features a protective Web Application Firewall to protect your website from hackers.
Its Scan and Live Traffic features will check or the presence of malware, and alert you in real time should your site be compromised or subjected to a hacking attempt.
W3 Total Cache is a “must-have” plugin, because of the punch it can deliver. This WP plugin can increase your website’s performance and reduce its download times, and do both seriously. As a result, your site should experience marked increases in SEO, the UX, search engine ranking, and conversion rate. It will definitely be worth your time to visit the website to find out everything this plugin could do for you.
Yellow Pencil is a plugin that enables you to edit your website in real time. It’s a CSS style editor that you can use to click on an element an edit it visually, whether you are working directly from WordPress or working with a WordPress theme.
The net result is that thanks to Yellow Pencil’s 50+ style properties, you can have much more control over your website design activities than you thought possible.
The WooThumbs Awesome Product Imagery plugin for WooCommerce gives you added flexibility to modify and enhance your product pages, or your one-page product website. It enables you to easily add multiple images to product variations, create an image carousel with horizontal or vertical slide, and so much more.
The zoom feature comes with multiple zoom effects that allow the user to get up close and personal with a product they are thinking of purchasing.
Final Tiles Gallery makes creating a gallery quick and easy. It’s popular with professional photographers, and is in fact, one of the most highly used plugins by that niche.
You have complete freedom to build the layout you need or want. Final Tiles Gallery is built around a unique grid layout, which makes it possible to create gallery whose images are not constrained to having the same size or aspect ratio.
Summing up
These 9 plugins obviously have a great deal to offer. To add icing on the cake, some of them are available to try out for free. These plugins offer “must have” functionality like website security checks or performance enhancers.
Some give you cool design capabilities you either never knew existed or were unable to find up to now. The bottom line: you’ll very likely find one or more plugins you can put to good use.
Years ago, I spent an awkward patch of my career as an instructional designer, creating courses for online learning. It was a bad fit and I moved on happily, but one part of that job has made me a better UX designer: learning objectives.
Learning objectives are simply what you want the student to learn by the end of the training. If there’s a test, the test questions should be based on those objectives?—?otherwise, what’s the point of the test?
The same approach comes in handy for figuring out whether a design has passed or failed a usability test. Just remember: it’s the design that’s being tested, not the participants.
What does the test participant need to do or say for you to feel confident that the design has succeeded? Do they need to track three hours of time for a particular project? Generate an invoice to a client based on that tracked time? Send the invoice? That’s your test criteria.
Of course usability testing is about observing how users complete tasks, but what will you get them to do, exactly? The beauty of these criteria is that they steer you away from vague testing goals like, “understand how time tracking works.” How will you know they’ve understood it? You get them to describe it. And once they’ve described it accurately, you can say that aspect of the design was successful.
Success criteria help you twice over: they clarify whether your design is really successful, and they make it easier to share those results.
Verbs are magical
The book that taught me about learning objectives, George Piskurich’s Rapid Instructional Design, offers a handy list of behaviours to start your success criteria.
For example, the objectives for comprehension might be “describe” or “demonstrate”. Again, “understand” is no good?—?you need them to say (that is, describe) or do (that is, demonstrate) something that proves to you that they’ve understood.
And then, at a higher degree of difficulty, a participant might “explain” or “organize”; at a higher level still, they might “create” or “evaluate”.
Whatever verb you choose to start your success criteria, the point is that you can observe whether or not a user has actually said or done whatever constitutes task success.
“By the end of this session…”
So, when you’re planning your next usability test, and you’re working on tasks, start by asking, “What should a user be able to do with (or say about) this design?”
Then, you might write something like this:
By the end of the session, the participant should be able to:
track three hours of time for a particular project;
generate an invoice to a client based on that tracked time;
describe the difference between tracking time and logging time.
Now you have three success criteria and, based on those, you’ve also got a pretty clear sense of what tasks you’ll need to give the participants.
One caveat: success criteria aren’t quite the same as tasks. Tasks have more context; they’re written to be read to the participant, and might include some context about the task, particularly if you’re steering them to find something in your prototype. For example:
Success criteria: Generate an invoice to a client based on that tracked time
Task: “Now that you’ve tracked three hours on the Atlas project, show me how you would invoice Acme Products for your time.”
Pretty similar, obviously, but success criteria are for you and your team; the task is for the participant in the context of the usability session.
And you’ll notice that one of the success criteria above is about describing something, rather than completing a task. It might be a follow-up question to a task. These are handy for validating whether your design’s mental model is clear to users. I’ve seen users find their way through a task, but then describe to me a mental model of the app which is at odds with how it was designed. That’s task success for one participant, but more importantly there’s an underlying problem with matching that participant’s mental model.
So, start with your success criteria, then write your tasks and follow-up questions based on your criteria.
Stakeholders love success criteria
Stakeholders don’t necessarily care about your process, but they really care about the results. And if your presentation of the results is vague, they will be rightfully irritated.
“The user managed to track a few hours, but we weren’t sure whether she understood that tracking time isn’t the same as logging it against a client…” Well, why aren’t you sure? Isn’t it your job to figure this out? You’re wasting their time, and not giving them clear direction on how to fix the UX problems?—?which is also your job, right?
Success criteria help you twice over: they clarify whether your design is really successful, and they make it easier to share those results.
We’ve had some success tracking success criteria in a simple table, and colour-coding the results. Like so:
We whip up a colour-coded table of results (green = success, red = failure) on our wiki. In the top row, we list participants; in the left column, we list our success criteria. It’s ugly, but quick and useful.
This is easy to scan, shows pretty clearly where the problems are, and grounds the results in the experiences of actual participants. We also list a bullet-point summary of results and a list of usability problems and recommendations just beneath it. We’ll zero in on those problems and iterate until we believe they’re solved. Your process might be a little different?—?maybe you’re a consultant handing over a report to a client, for example?—?but the benefits are the same.
Customer Relationship Management (CRM) is a system that manages customer interactions and data throughout the customer lifecycle between the customer and the company across different channels. In this tutorial, we are going to build a custom CRM in PHP, which a sales team can use to track customers through the entire sales cycle.
We’ll be creating a simple CRM system for salespeople to:
Here is a list of the essential components of the CRM:
Leads: initial contacts
Accounts: Information about the companies you do business with
Contact: Information about the people you know and work with. Usually, one account has many contacts
Opportunities: Qualified leads
Activities: Tasks, meetings, phone calls, emails and any other activities that allow you to interact with customers
Sales: Your sales team
Dashboard: CRM dashboards are much more than just eye candy. They should deliver key information at a glance and provide links to drill down for more details.
Login: Salespeople and managers have different roles in the system. Managers have access to reports and sales pipeline information.
We will start by creating our custom CRM database. The main tables we will be using are:
contact – contains basic customer data
notes – holds information collection from Contact by sales people.
users – information about sales people
Main Database Tables
The contact table contains basic customer information including names, company addresses, project information, etc.
The notes table is used to store all sales activity information such as meetings and phone calls.
The users table holds login information about users of the system such as usernames and passwords. Users can also have roles, either Sales or Manager.
All other tables are simple lookup tables to join to the aforementioned three main relational database tables.
contact_status – contains contact status such as Lead and Opportunity each indicating a different stage in a typical sales cycle
task_status – the task status can be either Pending or Completed
user_status – a sale person can be Active or Inactive
todo_type – a type of task either Task or Meeting
todo_desc – description of a task such as Follow Up Email, Phone Call, and Conference etc.
roles – a user can be either a Sales Rep or a Manager
Complete Database Schema Diagram
A database schema is the structure that represents the logical view (tables, views, primary and foreign keys) of the entire database. A database schema includes entities and the relationship among them.
It is a good practice to have one primary key for each table in a relational database. A primary key is a unique identifier for each record. It can be the social security number (SSN), vehicle identification number (VIN), or simply auto-increment number (a unique number that is generated when a new record is inserted into a table).
Below is the database diagram of our simple CRM. The key symbol in each table represents the table primary key. The magnifying glass indicates foreign key linking another table in the database. Sometimes we call it the “lookup” table.
install.sql
Once you have an understanding of the database table structure, find the `install.sql` script in the db folder and use a MySQL tool such as MySQL Workbench or Sequel Pro to run the SQL script. It should create a new relational database named custom_crm and its database tables.
Setup phpGrid
Our simple CRM contains many datagrids. The datagrid is a spreadsheet-like data table that displays rows and columns representing records and fields from the database table. The datagrid gives the end-user ability to read and write to database tables on a web page.
We opt-in a datagrid tool from phpGrid to create the datagrid. The reason to use a tool instead of building them from scratch is that developing the datagrid is usually extremely tedious and error-prone. The datagrid library will handle all internal database CRUD (Create, Remove, Update, and Delete) operations for us with better and faster results with little code.
To install phpGrid, follow these steps:
Unzip the phpGrid download file
Upload the phpGrid folder to the `phpGrid` folder
Complete the installation by configuring the `conf.php` file
Before we begin coding, we must specify the database information in `conf.php`, the phpGrid configuration file. Here is an example of database connection settings:
<h1>My Custom CRM</h1>
<?php include_once('../inc/menu.php'); ?>
<h3>Section Title</h3>
<?php
// Your main content, such as a datagrid, goes here
?>
<?php include_once('../inc/footer.php'); ?>
CRM Main Pages
Are you still with me? Good! We can now finally develop the first page in our CRM.
Our CRM for sales team members has four pages:
Tasks
Leads
Opportunities
Customers/Won
Each page indicates a different stage in a typical sales cycle.
Design Mockup
Here’s our CRM design mockup for the sales people.
Sales Team CRM Screen
Tasks
When a sales team member logged in, the first page he sees is a list of current tasks.
As you may recall, our notes table holds all the sales activity information. We can create a datagrid and populate it from the Notes table using phpGrid.
The Tasks page main content is a datagrid. The following two lines will give us a list of tasks of the current sales person.
<?php
$dg = new C_DataGrid("SELECT * FROM notes", "ID", "notes");
$dg -> display();
?>
The first line creates a phpGrid object by passing the SELECT SQL statement, its primary key – ID, and then the name of the database table – notes.
The second and the final line calls display() function to render the datagrid on the screen. Check out the basic datagrid demo for more detail.
Leads
The leads page contains list of current leads that the sales person is responsible for. Each Lead can have one or many Notes. We will use the phpGrid subgrid feature for that.
We also need to use set_query_filter() to display only the leads, Status = 1, and only for the current sales person.
Contact status table
Contact Status Table
<?php
$dg = new C_DataGrid("SELECT * FROM contact", "id", "contact");
$dg->set_query_filter(" Status = 1 && sales_rep = 1 ");
// the detail grid displays notes about a lead
$sdg = new C_DataGrid("SELECT * FROM notes", "id", "notes");
$sdg->set_query_filter(" Sales_Rep = 1 ");
$sdg->enable_edit();
$dg->set_subgrid($sdg, 'Contact', 'id');
$dg -> display();
?>
Opportunities
A Lead becomes an Opportunity once it is qualified. The Opportunities page is similar to the Leads page. The only difference is the filtered status code in set_query_filter is Status = 2.
<?php
$dg = new C_DataGrid("SELECT * FROM contact", "id", "contact");
$dg->set_query_filter(" Status = 2 && sales_rep = 1 ");
$sdg = new C_DataGrid("SELECT * FROM notes", "id", "notes");
$sdg->set_query_filter(" Sales_Rep = 1 ");
$sdg->enable_edit();
$dg->set_subgrid($sdg, 'Contact', 'id');
$dg -> display();
?>
Customers/Won
Customers/Won has the Status = 3. Similar to Leads and Opportunities, Customers/Won can also have Notes.
<?php
$dg = new C_DataGrid("SELECT * FROM contact", "id", "contact");
$dg->set_query_filter(" Status = 3 && sales_rep = 1 ");
$sdg = new C_DataGrid("SELECT * FROM notes", "id", "notes");
$sdg->set_query_filter(" Sales_Rep = 1 ");
$sdg->enable_edit();
$dg->set_subgrid($sdg, 'Contact', 'id');
$dg -> display();
?>
That’s all there is to it for sales people in our simple CRM.
Manager Dashboard
The sales manager will have access to all records in the sales pipeline as well as the ability to manage sales team and customer data.
Each menu item represents a table in the CRM database. $_GET['gn'] will store the table name. It dynamically generates the datagrid based on table name passed.
<?php
$tableName = (isset($_GET['gn']) && isset($_GET['gn']) !== '') ? $_GET['gn'] : 'users';
switch($tableName){
case "users":
$dg = new C_DataGrid("SELECT * FROM users", "id", "users");
$sdg = new C_DataGrid("SELECT * FROM contact", "id", "contact");
$dg->set_subgrid($sdg, 'sales_rep', 'id');
break;
case "notes":
$dg = new C_DataGrid("SELECT * FROM notes", "id", "notes");
break;
case "contact":
$dg = new C_DataGrid("SELECT * FROM contact", "id", "contact");
$sdg = new C_DataGrid("SELECT * FROM notes", "id", "notes");
$sdg->enable_edit();
$dg->set_subgrid($sdg, 'Contact', 'id');
break;
}
$dg->enable_edit();
$dg->display();
?>
My Sales Rep
Since a sales manager needs to quickly find out whom a sale person is working with, we added a detail grid $sdg populated from contact table and link with the parent grid.
$sdg = new C_DataGrid("SELECT * FROM contact", "id", "contact");
$dg->set_subgrid($sdg, 'sales_rep', 'id');
sales_rep is the connecting key in contact table to the id that is the foreign key in users table. Remember the users stores all of our sales people information.
I’d embed the Pen here, but you really need a bit more space to play with it. Here’s a video of how it works:
It shows you the code output, but you can’t adjust the code to see the changes back in the visual part. It still does an incredible job of showing you the different types of curve commands available in the SVG path syntax.
This Chrome extension doesn’t let you see the SVG code or let you manipulate anything, but it does show you the points and curve handles that make up an SVG anywhere you find one on the web, giving you a bit of a behind the scenes look.
It’s really cool how you can invoke this anywhere. It would be great to see it evolve with interactive manipulation capabilities and show the output of those changes.
Clippy isn’t SVG, it’s for CSS clip-path, but I think you’ll easily see how this kind of UI would be very cool for SVG manipulation and seeing the code as you do things.
No editing of the code directly, but it’s very clear from the interactions what parts of the code you are changing when you manipulate the SVG curve control points.
Graphics Software: Visual Only
Remember the point here is searching for UI that connects the idea of visual editing and code editing. Vector editing software like Adobe Illustrator is visual only in that there are tools to manipulate graphics visually, but you don’t know how that is affecting the code.
You can export the code and look at it, but that’s not the realtime connection we’re exploring here.
Code Editors: Code Only
Code editors like CodePen help tie together code and visual output:
But it’s still a one-way street. You can’t do anything with that visual side other than look at it.
Awaiting the Perfect Tool
Lots of choices; nothing perfect! Nothing that I’ve seen, yet, ties together perfectly code editing and visual editing as equal first-class UI citizens.
