Building a Full-Spectrum Web ExperienceWritten by Jeffrey Bennett
Programming on both the client and server side is called "Full-Stack," but that wasn’t sufficient for my particular use. So I made up the term "Full-Spectrum" to describe my abilities as a Full-Stack Web Developer and Graphic Designer.
And since I much prefer to build complete experiences on the web, rather than individual parts like just a front-end webpage or just a visual design, I coined the term "Web Experience Engineer" as well.
It just feels right, when describing a skillset that spans across all of these areas. It also rolls off the tongue pretty well if you ask me. 😜
Of my 20+ years of experience in this field, I have yet to meet any other person who called themselves a Full-Spectrum Web Experience Engineer. In all seriousness, please do not use this term as this is my intellectual property.
Anyway, I want to show you a rundown of the process of building a full-spectrum web experience. The reality is quite a bit more in depth than this, but this should give you an idea of what it takes to complete an individual project.
Brainstorming & Business Needs
First, we talk in depth about the requirements of your project. Everything from the end goal of this website like increased sales or leads, to the individual parts that help your visitors accomplish the tasks they need. This part is much more about the needs of the business rather than the technical or visual requirements.
Just let the ideas flow and don’t censor anything. Very much like brainstorming.
Once we’re done with brainstorming, we put the ideas into three categories:
- Business Critical (without this, the business will surely fail)
- Business Ideal (may cause easily-fixed problems or requires more maintenance if left out)
- Business Fantasy (really amazing, but not detrimental if left out)
Once we have the minimum project requirements (aka "Business Critical"), we need to understand your target audience so well, the design will speak for itself.
Ideally, this is done by meeting your prospects or existing customers in person, and asking the appropriate questions to help solve their problems.
This part is important: their feedback will help shape the rest of this process, so be sure to get this part right! If you’re solving problems that don’t need to be solved, or making something they don’t need, you’re wasting your time, money, and resources.
Really get to know your customer’s goals and pain points too, because the better you understand these issues, the more you can refine the design.
The faster your customers can solve their problems, the happier they become, and the more money you make.
The user flow is about getting your visitors from point A to point B with as few stops in between as possible. Do you want them to buy something from you? Get them from visitor to paid customer ASAP. Want them to join a newsletter? Get their e-mail address as quickly as possible.
This is about imagining the whole picture from start to finish. But always keep the end goal in mind! And make sure you solve your customers’ problems in the process.
For each of your required webpages from the user flow section, I’ll draw a quick sketch of the structure with a very generalized idea of the elements needed on each page. This part is known as a mockup.
Ideally, you should take these mockups directly to your prospects and watch them attempt to use it. Seeing someone else use your designs in person (preferably with eye-tracking software) is an amazing way to work out any flaws. It also gives you insight you may not have had before, directly from your customer’s point of view.
Doing that at this point is ideal because down the road, you may have already put in more work or become emotionally attached to your project, which would add more effort (and costs) to change.
Every great business has an unforgettable brand. Think Apple or Google.
Here, we define the brand colors, style guidelines, typography rules, and personality. Everything should be aligned according to your customer research, so your ideal customers can reach you as quickly as possible.
We can finally talk about the visuals. Design goes way beyond the look and feel of a website though. The best designs actually help solve problems by presenting the information in a very clear and concise manner.
Combine the previously-defined brand rules with a good problem solving design, and you’re well on your way to becoming the next big thing!
I am a huge advocate of minimalism. So much that I felt it necessary to give it its very own section.
By getting rid of as much as possible, you are left with only the most important things. And when things are more isolated, they are automatically amplified and become more powerful, because you have fewer things fighting for your attention.
Minimalist designs convert like crazy too, because they’re void of anything that isn’t absolutely necessary, and because of this, your customers can solve their problems very fast.
Think of the massive success of Google over Yahoo! They’re both content companies, but Yahoo! has been struggling for years, and Google is continuously breaking new revenue records.
What’s more is because they’re already displaying the minimum amount of information, the page will be very lightweight and that means it will load for the user very quickly.
Your SEO efforts will thank you too! Page loading speed is a factor in your search engine ranking, and slow pages are punished in search results.
Comparing Google to Yahoo! for page loading speed, it’s clear to see which company is winning here too.
Anyway, I could go on about minimalism all day, but I need to move on with the rest of this process. :)
So now that we have a smashingly awesome design, we need to code it. To jumpstart this process, let’s grab the HTML5 boilerplate and start building from there.
Taking the customer-approved problem-solving mockups, we break it up into individual elements. Separate headers from navigation, content, and footers. Use semantic HTML5 tags wherever appropriate.
Combine all the individual parts into a single webpage.
Optimize all of your images to the absolute lowest setting acceptable to your audience. Never make any image or video wider or taller than the maximum size of the container that holds them! The smaller the image, the faster they load in, so be ruthless here! Do this with any video, audio, or multimedia files too!
Now we need to test it. Check it in as many browsers as possible, and on as many different machines as you can find. Test it on iPhone, Android, Windows Phone, and BlackBerry. Test it on Windows, Mac, and Linux. Real devices are always better than simulated devices.
Take note of the severity of any problems you find. Fix the most critical problems first, then work on the less and less critical ones.
Make a Template
Now that your webpage is working, it needs to be turned into a template, so your visitors know they’re still on your website regardless of what page they’re viewing.
Consistency is important for your brand too. First-time visitors can arrive at almost any page on your site, so it’s important every page gives a great first impression.
There are lots of ways to implement a template into your website. Adobe Dreamweaver has sitewide templates built in, and it can also be done in PHP or other server-side languages.
Ideally, you would use a completely static file for every page on your website, because this is best for performance as well as security. But every time you update the template, every static file on your entire website that uses that template must also be updated.
I recently discovered Hugo, which does a fantastic job of solving this very issue.
Now that your template is ready to be used, the content needs to be added. Ideally, the content is spelling and grammar checked, formatted with any bold, italics, underlines, bullet lists, and hyperlinks, and also shows exactly where to put in your images and multimedia files.
This part is tedious, especially if the content is unformatted.
Not every project will need this, but if yours does, this is how it goes down.
Define exactly what needs to be processed by the server, based on your customer research. Do you need to process user uploads, generate dynamic images, or send an email to a customer regarding a recent order?
Will your app be talking to other developers’ apps by an API? Or will it be proprietary and only used in-house? Will it be exclusively on the web or will it talk to the native application version of your service? Do you need access to a database?
All of these are questions that need answers before you begin coding.
Working with server-side code means you should really understand at bare minimum, the basics of security. Try to isolate your code as much as possible to prevent any unauthorized access to information outside the script.
Sanitize your data like crazy!! Do not trust any source of information until you’ve made sure it’s clean. This includes data from your own website!
Do not reveal any secret or sensitive information, ever. This includes more than just passwords, or encryption hashes and salts. Any time data is sent to the web, it must be considered contaminated and may potentially live in public forever.
Here’s a part I like to think of before coding a server-side program. Can it be processed through the client-side web interface using AJAX or does it have to be a standalone script?
In most cases, it’s best to use AJAX, so the end-user gets a real-time sense for what’s happening.
So now that we’ve decided how it’s going to be used, we need to figure out how to process the information we have to work with.
If it’s form data, will this allow the user to login? If so, check the credentials against a database. If they match, set a login cookie, otherwise return an error that helps the user solve the task at hand.
Be very specific with any feedback because you’ll need the user to do their thing as fast as possible.
Configure your web server to deliver content over HTTPS, and secure any subdomain with a wildcard SSL certificate.
.htaccess completely if you’re using purely static files. Enable .htaccess only if you’re using server-side processing.
Point your domain to the appropriate IP address and set up your custom email address with a single catch-all email.
So we are finally in the last stage of building a full-spectrum web experience. This is where we really go back and review as much of the website as possible, to make sure everything is in order. Fix anything that needs fixing.
Once you’re done, add Google Analytics to the footer of your template, and begin uploading all of the necessary files to your web server.
ProTip: When everything is live, check your site on Website Grader to see just how awesome your shiny new website really is.