Whenever Facebook updates their design, masses of people complain. Why'd they move this here and that thing there?! While unexpected changes are understandably annoying when all you want to do is upload a new video of your dog, Facebook needs to make these updates otherwise their site would become stale and begin to seem dated. Just look at their designs from only a few years ago — 2011 may as well be 1991.
Clearly it's important that Facebook keeps its site looking modern and fresh. It's equally important that you do the same. Otherwise your site will appear outdated and some customers may wonder if it's even still active. The internet creates a level playing field on which smaller businesses can easily compete with larger ones. You will be more competitive when your site appears to be as modern as those that belong to bigger businesses.
What are some recent trends you might to apply to your own site?
What are some recent trends you might to apply to your own site?
1. Loooong Scrolling
In 2016, over 56% of all US web traffic came from mobile devices. It's pretty important that your site looks and functions well for mobile browsers. All Weebly themes are responsive, which means they automatically adapt to mobile devices and other smaller screens. That gets the hard work out of the way, but it doesn't mean you can't take steps to make your site work even better on mobile.
The function and size of mobile devices make it more convenient to scroll through content instead of pressing on tiny navigation links that we're meant to be clicked with a mouse. Less pages and more scrolling simply work better in this context.
That said, you still have to account for the roughly 44% of your traffic that's coming in from a regular web browser. A long scrolling page can work just as well for these visitors, but it's important that the page remain visually interesting throughout to keep them engaged.
Take a look at Hack the Hood. They've implemented long scrolling across many of their pages but ensure it works well for all visitors through their design approach. They've used Sections to alternate the background across individual pages from blue to white to photographs and back again.
Sections are simple to use. You simply drag a section to a page, as if it were a standard element and then add other elements to it. You can watch a short video and read all about Sections here.
The function and size of mobile devices make it more convenient to scroll through content instead of pressing on tiny navigation links that we're meant to be clicked with a mouse. Less pages and more scrolling simply work better in this context.
That said, you still have to account for the roughly 44% of your traffic that's coming in from a regular web browser. A long scrolling page can work just as well for these visitors, but it's important that the page remain visually interesting throughout to keep them engaged.
Take a look at Hack the Hood. They've implemented long scrolling across many of their pages but ensure it works well for all visitors through their design approach. They've used Sections to alternate the background across individual pages from blue to white to photographs and back again.
Sections are simple to use. You simply drag a section to a page, as if it were a standard element and then add other elements to it. You can watch a short video and read all about Sections here.
2. Grid Design
This is another approach that works well across platforms. When you're using responsive themes (as we know is the case with Weebly) and design using a grid, then the various columns of that grid will combine as visitors' screens get smaller, turning a shorter page on a computer screen into a long scrolling one on mobile. Take the gridded section of this example Weebly site:
The above is what it looks like in a computer browser. On mobile, the grid collapses and the images are shown ordered in a single column so visitors can quickly scroll through them.
If you're not a designer, the notion of laying out an appropriate grid might seem either daunting or boring (or both). Especially since being a few pixels off here and there can really wreck your design in some cases. It's a good thing, then, that you don't need to worry with setting up your own grid. You can rely on Weebly's preset layouts throughout your site, nearly all of which use grid design.
Whenever you drag a Section to a page, Weebly prompts you to choose a layout (or to leave that section blank). Unless you're simply planning to add a single photo, video, or a block of text, always choose one of the layouts as a starting point even if it doesn't fit exactly what you're trying to do. You'll be able to replace the preset elements with different elements (and add to what's already there), while maintaining the grid itself.
If you're not a designer, the notion of laying out an appropriate grid might seem either daunting or boring (or both). Especially since being a few pixels off here and there can really wreck your design in some cases. It's a good thing, then, that you don't need to worry with setting up your own grid. You can rely on Weebly's preset layouts throughout your site, nearly all of which use grid design.
Whenever you drag a Section to a page, Weebly prompts you to choose a layout (or to leave that section blank). Unless you're simply planning to add a single photo, video, or a block of text, always choose one of the layouts as a starting point even if it doesn't fit exactly what you're trying to do. You'll be able to replace the preset elements with different elements (and add to what's already there), while maintaining the grid itself.
3. Vibrant Color Schemes
Thanks to Sections, it's easier than ever to weave color throughout your site's design. Just as you're presented with a layout when you add a section to a page, you can also change the background of a Section to any color, picture or video that you like.
When selecting a color, you can use a slider to choose from millions of shades that vary from plain to neon. All of these colors will work well, it's just a matter of finding those that feel appropriate for your brand. As you find colors you like, make note of their hex code (which is displayed underneath the color picker) so that you can enter that hex code when using that color in other areas of your site.
A vibrant color scheme isn't all about using neon colors. Earlier we saw how Hack the Hood varies their use of colors and images to keep their design engaging. Though their site mostly consists of four colors: white, black, blue, and a somewhat neon green, their content really jumps out because of how they've put the colors to use. Look at this one small block:
There's just four colors and a photo, but this is vibrant. You can certainly get wilder with your color choices, but follow their example and limit the total number of colors you use throughout your site to four or five: black, white, and two to three other colors of your choosing.
4. Header Background Videos
Go to Weebly's homepage and what do you see there? A video playing in the background (unless you're currently logged in, because in that case you'll just see your own account).
As already noted, Sections allow you to use any image, color or video as a background throughout your site. This same feature is available in the header area (for Pro subscribers and up).
When you select a video, you can choose from preloaded videos provided by Weebly or upload a video of your own. Header videos are a quick way to show what your brand is about or to show off your products/services, but if you upload a video of your own, there are a few best practices to note:
Apply some of these trends to your own site and you won't just look as good as the bigger sites, you may look better. That'll keep customers coming back again and again.
Ready to get started? Lets go.
As already noted, Sections allow you to use any image, color or video as a background throughout your site. This same feature is available in the header area (for Pro subscribers and up).
When you select a video, you can choose from preloaded videos provided by Weebly or upload a video of your own. Header videos are a quick way to show what your brand is about or to show off your products/services, but if you upload a video of your own, there are a few best practices to note:
- The video should be short. Uploading Fellowship of the Ring as a background would not only be a terrible infringement on JRR Tolkien's copyright, but would also be about three-and-a-half hours too long. Your video should either be several short scenes that are cut together (like our homepage) or a single scene of around ten to twenty seconds that looks interesting when run in a loop.
- The video should either be fairly bright or fairly dark, so that it strongly contrasts with any black or white text you place over it.
- Don't include audio. Auto-playing videos should never play audio since it'll annoy all of your visitors who happen to be listening to something else while web browsing (which is most of them).
Apply some of these trends to your own site and you won't just look as good as the bigger sites, you may look better. That'll keep customers coming back again and again.
Ready to get started? Lets go.
RSS Feed
