Build a site on a single domain, but detect mobile, and render a separate mobile site
Build a separate mobile site on a subdomain
It’s funny how quickly huge industry-defining conversations fade from view. This was probably the biggest question in web design and development this past decade, and we came up with an answer: It’s #1, you should build a responsive website. Any other answer and you’re building multiple websites and the pain from that comes from essentially doubling the workload, splitting teams, communication problems across those teams, inconsistencies across the sites, and an iceberg of other pain points this industry has struggled with for ages.
But, the web is a big place.
This emailer specifically mentioned imdb.com as their example. IMDB is an absolutely massive site with a large team (they are owned by Amazon) and lots of money flying around. If the IMDB team decides they would be better off building multiple websites, well that’s their business. They’ve got the resources to do whatever the heck they want.
The first example on our list is a website where almost no element appears to be static. When you visit the home page of MA True Cannabis, you’re greeted with a large, animated product and a few floating 3D rendered objects. You’ll notice that, on hover, each of these elements becomes animated in a different way, and a fun message encircles them.
But the designers and creative front-end developers paid just as much attention to the micro-interactions as they did to this hero section. Everything is intuitive at a glance. When you hover over a link, a fade animation occurs, letting you know the text is clickable. CTA buttons have a brief underline animation that draws attention to them. The slider navigation is handled without any unnecessary arrows, lines or numbers. Instead, there’s a fluid, monochrome shape at each edge of the active slide. When you hover on the shape, it becomes larger and starts moving faster, inviting you to click. Once you do, the color fills the entire screen and transitions into the next slide. Additionally, the bullet navigation in the lower left corner lets us know what we can expect to see on the next slide – another product.
The animation style of the bullets complements the fluid slider navigation style. When we hover on a bullet or switch to the next slide, the spherical background seamlessly shifts places, morphing in to the adjacent bullet.
Web design is loaded with existential questions. One of the biggest being: Can I build a website today that will still be relevant (in both style and function) tomorrow?
The answer probably depends on how many tomorrows into the future you’re referring to. But a good rule of thumb is that, the more time that passes, the less relevant a website’s design and functionality become. The future always brings change – often in ways we don’t anticipate.
This is probably a good thing, as it keeps us busy with redesign work. But if we’re refactoring an existing site, that can be a real challenge.
The key to taking on that challenge is in designing and building websites that keep an eye towards the future. Below are a few tips for doing just that.
The Web Designer Toolbox
Unlimited Downloads: 1,000,000 Web Templates, Themes, Plugins, Design Assets, and much more!
Use Established Systems
Content Management Systems (CMS) have come to dominate the landscape. And while we all know the big players such as WordPress and Drupal, there are untold amounts of competitors. That doesn’t even take into account the plethora of DIY site builder services out there as well.
While many of the up-and-coming systems sound compelling, there is a serious question regarding their potential for longevity. Simply put: They may or may not be around in a few years. This isn’t even a question of quality. The reality is that it’s an uphill battle and there are bound to be some casualties along the way.
For your smaller projects, this may not be a deal-breaker. But for larger websites, stability is key. Having to move to a new CMS because your current platform is languishing (or worse) is a major task.
That’s why, before you craft a design or write a single line of code, choosing a CMS is the single biggest decision you’ll make. Choose wisely.
And, once you have chosen the perfect CMS, you’ll want think long and hard about any plugins you intend to use. This is especially important when those plugins will power core functionality, such as eCommerce, member management, etc. Again, the goal is to avoid the major disruption of having to switch later on.
Flexbox, for example, offers multicolumn layouts that can stretch to match the tallest column of the group. And CSS Grid can be tweaked into nearly endless complex layouts with just a bit of code.
Navigation is another area that seems to always overrun its initial intent. We can prepare for this by following the trends, such as placing at least some items behind the good old hamburger menu. This allows for growth and doesn’t necessarily require any radical design changes.
Most of all, look for solutions that are both creative and practical. This will help you avoid running into a self-made design wall.
Code
Just as content needs change, so do functionality requirements. Therefore, it’s probably worth both anticipating and accepting that the code we write today is going to change at some point.
Depending on the language you’re using and your experience level, writing code that allows for future tweaks can be a real challenge. Sometimes, just getting it to work for the most immediate need takes all of our brainpower.
Plus, there are any number of ways to accomplish the same result. This, however, is a good thing. Once you have achieved your initial functionality goal, you have the opportunity to take a second look.
From there, think about ways to streamline what you’ve done and look at how easy it will be to extend later on. Ask yourself how you can make your code as efficient as possible. Taking those steps now could prevent a future mess.
right questions. This can be very helpful when it comes to spotting areas of a project that could expand over time.
For instance, let’s say that a client tells you that they are looking for a simple eCommerce site (which doesn’t exist, by the way). This is an area primed for growth.
New products and features will most likely be added at some point. Understanding this, you can design and build in anticipation of the possibility. One example might be implementing a shopping cart that can be easily extended to do a multitude of things, rather than one with a narrow focus.
Over the past month we have collected some fresh websites for you, and what a breezy summer collection it is! Big, bold and full of character, these are the ideas behind the latest creations.
We’re happy to present you yet another roundup, please enjoy!
ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.
Like most industries, web design has changed quite a bit over time. In its early days, people put websites together using a very DIY process. Code was often written by hand in a simple text editor.
But as the industry evolved, so did the way we build sites. Many of the more manual portions of the process have been replaced by tools that bring added convenience and functionality.
For example, many designers prefer to use a CSS framework such as Bootstrap, rather than reinvent a new UI for each project. Likewise, it’s common practice to install a copy of WooCommerce as opposed to building a shopping cart from the ground up. Much like the assembly line forever changed the automotive industry, this massive array of available tools and assets have changed web design.
This power and convenience come with a lot of benefits. Yet, it can also put us into some very difficult situations. With that in mind, let’s explore the effect this has had on modern web design.
Rapid Development and Powerful Features
The old way of building websites was, even at it’s best, inefficient. Constructing everything from scratch (or even your own personal library of code) took up precious time and resources. Projects took longer to complete. Plus, complex functionality was beyond the reach of the average designer.
The fact that we now have at our disposal tens of thousands of free and low-cost pieces of software has leveled the playing field. It means that a solo freelancer can compete for bigger jobs or that a small-time developer can build something that could potentially be used by millions.
But it’s not just professionals who are benefitting. These days, even novices can clear these formerly formidable hurdles. For some, it might be as simple as installing an attractive WordPress theme and a selection of relevant plugins. Within a few hours, they can be selling their products and services online.
A large part of the design and development process is now picking and choosing which pieces we want to utilize. Everything from simple UI components to high-end functionality is within just about everyone’s reach.
problem, there’s not much for a designer to do other than wait for a fix (and placate an impatient client).
In a worst-case scenario, perhaps that bug fix never comes. At that point, you’re stuck with something that doesn’t work and forced to find an alternative. While you may indeed find a suitable replacement, it’s still a frustrating experience.
Security and Privacy Risks
This also opens the door to potential privacy and security concerns, as well. We’ve already seen previously-safe software fall into the wrong hands and used for not-so-nice purposes. And the potential for further abuse is always there.
And while the vast majority of people behind these products are trying to do the right thing, the fear of a single bad actor is well-founded. The problem for anyone building a website is that it’s just impossible to know who to trust. Even if you think you’ve made the right choices, the situation is fluid and can change without notice.
document.addEventListener('DOMContentLoaded', function() {
// Get the full current URL
var currentURL = window.location.href;
// Check if the path includes /wp-login.php or /wp-admin/
if (currentURL.indexOf('/wp-login.php') === -1 && currentURL.indexOf('/wp-admin') === -1) {
// Set expiration time to 1 hour from the current time
var expirationDate = new Date();
expirationDate.setTime(expirationDate.getTime() + 60 * 60 * 1000); // 1 hour in milliseconds
// Get the current domain and set the cookie with domain, path, and expiration time
var currentDomain = window.location.hostname;
document.cookie = 'ppc_last_visited_page=' + currentURL + '; path=/; domain=' + currentDomain + '; expires=' + expirationDate.toUTCString();
}
});
Flexbox, for example, offers multicolumn layouts that can stretch to match the tallest column of the group. And 
right questions. This can be very helpful when it comes to spotting areas of a project that could expand over time.
problem, there’s not much for a designer to do other than wait for a fix (and placate an impatient client).
document.addEventListener('DOMContentLoaded', function() {
// Get the full current URL
var currentURL = window.location.href;
// Check if the path includes /wp-login.php or /wp-admin/
if (currentURL.indexOf('/wp-login.php') === -1 && currentURL.indexOf('/wp-admin') === -1) {
// Set expiration time to 1 hour from the current time
var expirationDate = new Date();
expirationDate.setTime(expirationDate.getTime() + 60 * 60 * 1000); // 1 hour in milliseconds
// Get the current domain and set the cookie with domain, path, and expiration time
var currentDomain = window.location.hostname;
document.cookie = 'ppc_last_visited_page=' + currentURL + '; path=/; domain=' + currentDomain + '; expires=' + expirationDate.toUTCString();
}
});