There are many new web design trends are introduced yearly. Similar to the trends in fashion, new trends in web design are embraced instantaneously while the previous ones wane. New trends are inevitable due to the different needs of our society and the ever changing industry. However, web designers must be wise in utilizing these trends.
Below are web design trends to use with caution:
Hamburger Menu
The green highlighted box in the above image is known as a hamburger menu.
Due to various technological advancements, the most widely used devices to connect to the internet are handheld devices like smartphones and tablets. As a result, web developers have made designs much simpler by introducing hamburger menu. This menu hides all the navigations, and this resulted in the development of the desktop website. The hamburger menu helps by making the website clean and with one tap, you’ll open a menu instead of putting all items on the site.
But this type of menu doesn’t apply to all websites. With news and e-commerce websites you have to place each menu on the front end instead of hiding it all in a hamburger.
Front-Page Carousels
Many modern websites utilize carousels. Carousels keep the text formation and photos in order and permit the addition of visual interest. If a carousel is used frequently, the website will look almost the same and less difference will be observed. SEO specialists claim that a carousel isn’t good for search engine optimization since it has no text and prevents sufficient meta info from getting into a page.
It isn’t vital for a text to be over the fold; however, Google will not recommend placing the content lower down the page. A carousel will push the text lower, which greatly affects the usability.
It seems that you can find floating element almost everywhere – from floating social media icons that let you click it to floating menu, which does not disappear even if you scroll down the page. It’s no wonder that they catch the attention of users. However, floating elements can push away users by obstructing the content they want to look at.
For users who access a website through their mobile, floating elements can be a nuisance, since the small screen can block more of the content. This is a sure way of dissuading users from staying or going back to your site.
Flash Animated Load Screens
Nobody wants to face a complex load screen which can’t be easily removed and forces users to sit through it. If a site has a flash animation that lasts more than 10 seconds and doesn’t let the user see the content, it’s likely they will not revisit the site at all. Another loading screen that prevents the user from revisiting is a counter that climbs to 100 percent. This counter is normally placed in the middle of the screen and requires the user to wait until the site finishes loading.
Parallax Scrolling
Parallax scrolling produces an impression of depth by letting the background of the content move slower than the foreground content as the user scrolls down.If used well, the results are amazing, and recently it has become popular. A good example of parallax scrolling used effectively is the site for the Firewatch game.
It is perfect for sites that require amazing presentation and have less text, like websites that showcase services and products. However, issues may arise if parallax scrolling is applied on sites with a lot of content. Parallax sites have the tendency to use a single page instead of separating the content into various pages. This can badly upset SEO for it can restrict the amount of content that search engines can crawl. Sometimes there are texts that are embedded in graphics, which further restrict content visible to Google.
Sites that utilize Parallax also tend to have slow loading time because of the heavy usage of JavaScript and graphics. This problem will worsen if handheld devices are used to view the sites.
All of the mentioned trends are amazing if they are used properly, however, be careful and take into consideration the possible problems you might undertake prior to using them. Websites greatly vary, and it is in the hands of web designers to determine what’s best for a certain website.
Whitespace, also known as negative space, is a part of the page that has been left unmarked, left blank or the page’s empty space. In the world of web designing, white space refers to the space between images, columns, text, graphics, and other components. This space is intentionally left untouched to smooth everything out and turn the page into something amazing. Whitespace also aims to show that simple designs are elegant and a page doesn’t have to fill its layout with graphics and text to convey a message that’s clear and direct.
Even though it is termed as white space, it doesn’t have to exactly mean that it has to be white. The blank space may be coloured, blue, green, red, etc. as long as it doesn’t have any graphical and text elements. Whitespace is also linked to style and intricacy since it’s an approach to organizing elements and help users in attending to particular elements.
For you to have more white space in your layout and provide a much better outcome, begin by discerning a page’s every detail. Think about the images, words, menus, letters, items in a list, header, footer, and margins. Think of all the above mentioned elements, and try to provide more space between those elements, considering that you want to make something stylish and clear and at the same time improve the user experience. A good user experience means having enough space for elements to breathe and letting the eyes of the readers relax. Putting size 11 text and filling it in the bottom part of the page will not provide a good experience for the readers.
Below are tips on how to use white space effectively.
Use white space wisely
As previously discussed, white space is the blank area around a page’s design elements and it’s not necessarily white as other colors can be used. One of the feelings that a white space convey is open-air and calm feeling. It’s highly recommended to leave huge portions of white space surrounding the vital area of the page, which will make it more noticeable. A good example of a website that uses white space effectively is Apple’s website.
Obviously, the same concept applies in designing black or dark-coloured themed websites; however, having a dark background can somehow convey something different. Objects on a page that are surrounded by a huge dark background convey drama and excitement.
Let some elements float
Normally, layouts of web pages are equally geometric and boxy. Though it is usually a great idea to have all your elements align in a grid, if you follow this rule exactly your page can appear too rigid. To make the page noticeable, play around with the vital elements. Let a vital element break the rule a bit and fall outside the grid. This will help your page stand out.
Remember, less is more
Obviously, the less things you plan to put on your page, the easier it is to take into account floating elements and white space that stands out in the grid structure. Try to restrict the number of less trivial things on your page, and instead place these on another page that focuses on that particular element.
Layer elements by their importance
Distinguish a value proposition from actionable info on how to start with differentiating product offering with balance white space. Position the vital messages on the top of the page and use white spaces to guide the eyes of your readers from one content asset to another.
Avoid monotony
White space needs balance instead of symmetry. Even a site that’s made from the huge amount of images like Pinterest will try to avoid using images that have the same size. The white space all appears even around the elements; however, the elements themselves have different sizes. White spaces will only work great along with well-made positive spaces. Make sure that the positive spaces of your page are layered, natural, interesting or enclosed by white spaces for a spectacular visual result.
Pay attention to micro white space
Micro white space can be seen inside individual design elements instead of the broad spaces in-between elements. The visual experience of users can be greatly affected by line spacing and letter spacing. All text, which includes button text, headers, and footers, must not look too cramped and hard to read. Links and navigational menus must also have micro white space to help improve reading.
The Bottom Line
White space doesn’t only generate balance and harmony, and aid in creating a design, it is also useful in leading a reader from one element to the next. A designer’s goal should include making sure a website looks simple and organized, and be able to provide information that readers will enjoy.
It’s vital that white space isn’t only considered as a “blank” space, it should be treated as the element of design that makes objects for a page to exist. It’s the space that helps in balancing things out in a page. Although white space is unquestionably something good to utilize, it can also be something that can produce a great amount of resistance between clients and web designers. This is mainly because most clients do not want to look at a huge amount of space on their sites, which leads to designers to have to talk about the importance of white space and its role in website designing.
Sure, at first glance, white space just seems to appear empty and ordinary. However, in the end, it will help the whole look and feel of the design of the site.
A header is the first person a user sees when they access your website. A well-created header lets your consumer know they have arrived at the right place, whether or not they are already a follower of your brand. It needs to be recognizable and easy to understand. This feature is a valuable piece of real estate that can help sell your rand if used wisely.
One form of header is known as the sticky header. It works just as it sounds – the header “sticks” to the top of a web browser as the user scrolls down the page. One of the primary motivators for this design choice can be navigation. On a site with a sticky header, the visitor can easily access another page on the website or basic information without having to scroll back up.
But just like any design decision – the user experience has to come first. And while in some cases, sticky headers can be an aid, they can also go to the other extreme and ultimately hinder the UX. If you are a UX designer, you may want to read these stats about a career in UX design. Here are some tips to avoid disaster while using sticky headers:
Avoid Large Headers
While you want the header to catch the user’s eye and be easy to read, you want to avoid making the user experience claustrophobic. Since a sticky header is going to always be visible as the user reads your main content, if it is too large the visitor will be constantly scrolling. After a while this is going to feel tiring. You want the consumer to be able to quickly get the information they need about a brand to make a decision, not spend hours trying to get through all your content because a giant box leaves the reading space small.
We recently received an email from Social Media Ninjas about how our sticky header could be reduced in size. Here’s what it looked like before:
And here’s that same page with our slimmer sticky header:
We gained about 15% of extra screen space to help you see more content and less of our logo.
Make Use of the Space
Don’t leave your user wondering what to do next. If this header is going to be following them throughout the page, make sure there is a call to action that is relevant to your brand. Whether it is a donate, request info, or see more button, you want ot make it as easy on the user as possible to get to the next step. Simply including the name of your company and a brief description in your sticky header is not making the best use of the space.
Don’t Forget About Mobile
The desktop website experience is your anchor. But don’t forget about mobile users. The screen is going to be much smaller, and so ask yourself whether a sticky header is going to work in that format. Even if the answer is still yes, it has to look different in order to create a comfortable user experience. Don’t be afraid to have a different mobile layout, as long as the branding is consistent with your desktop site.
Don’t include every link
If you’re looking into sticky headers, you’ve probably heard how it can speed up browsing and navigation times. While this is true, copy and pasting every navigation link into your sticky header is going to be distracting and bloating for your user. Especially if you are a content heavy page such as perhaps a media outlet with a lot of categories, this is only going to overwhelm the user as they are constantly shown too many choices. Make sure to pick only the links the user really needs.
Picking Flashy Design Over Legibility
There are always going to be trends in the website world. It is worth keeping up with your competition and seeing what works and what doesn’t. However, sometimes websites choose flash over substance. Thin fonts and low contrast designs for example may seem appealing to the eye – but are they readable? A way to avoid UX mistakes such as these is to test your website on multiple browsers and devices to ensure usability.
In the right circumstances, a sticky header could work great for your website. It might help users navigate easier and understand your brand in a short amount of time. But before jumping into including one, make sure you follow these tips and always remember that user experience comes before design.
Nick Rojas is a serial entrepreneur who’s enjoyed success working with and consulting for startups. Using his journalism training, Nick writes for publications such as Entrepreneur, TechCrunch, and Yahoo. He concentrates on teaching small and medium-sized enterprises how best to manage their social media marketing and define their branding objectives. Nick is currently a consultant for Phonecheck.com.
This is the final post of our page speed improvement series. Today’s post will discuss content delivery networks vs dedicated hosting servers.
For high-loaded websites, CDN or Content Delivery Network and dedicated servers are normally used. In this post, I’ll go through both servers and compare their advantages and disadvantages, their variations and a few tips on which one to choose between the two hosting options.
What Is A CDN?
CDN works by serving content to end-users with high performance and high accessibility. The networks of CDN serve most all web contents such as videos, text, and URLs.
How will CDN help with your website?
Through CDN service, there are a lot of internet nodes being designed to share web contents. So after browsing your website, it will then send data from the closest data centre to the users. In this manner, CDN helps in reducing the latency or failure that is due to networks, web server, etc. Various CDN’s utilize P2P technology in caching files to produce top performance.
CDN vs. Dedicated Server
Since CDN is already ideal, why should we need dedicated server? What are CDN’s weaknesses compared to the traditional dedicated server? Well, read on.
Performance
Rationally, CDN can guarantee 100% uptime because it is being served by numerous servers; but, it is also possible to have slowness due to the configuration of the network. Using dedicated server, the performance will depend on data centre network and server hardware configuration. Since there is a dedicated bandwidth allocation, there will not be too much latency present.
Security
For many CDN service, security poses the biggest concern. Since it’s going to send data from your website to various locations or servers, it is difficult to have everything protected particularly when it pertains to sensitive information on the website.
Then again, a dedicated server is going to offer maximum security to any data since everything is being kept on one device. Provided that the single server is properly secured, data leaks are not possible.
Reliability
Today, you can find a lot of CDN service providers on the market but, there is a huge difference in their service quality. A CDN can be built through 3 or 30 nodes. A good CDN service provider has data centres on various places such as Microsoft Azure, but it is not possible for many CDN service providers as they just have a few servers from various DCs and don’t have much access to the network material. A dedicated server is completely controlled by a team with complete access to different configurations, has control over resource allocation and security protection and updates.
Support
If issues do happen, the CDN support will examine each node to get it fixed, and the process may take quite a while depending on the complicacy. A dedicated server is supported by the dedicated server service provider, given that the server is still up and they can access it. Means, unless it’s a MUST, they don’t have to bother your server provider for problem fixing.
When should you choose CDN or dedicated server?
Ideally, a good dedicated server is more costly compared to CDN services; particularly there are CDN providers such as MaxCDN which are only about $120 per year. On the comparison mentioned above, we have learned that a dedicated server is in fact much better than CDN when it comes to performance since it’s driven by the dedicated resource.
So it all comes down to how much you’re willing to spend. We’ve found for our clients websites and ours, the results in page speed improvements have been great despite having a shared hosting account with a CDN in place.
With various hosting types available, choosing the perfect fit for your website can be tough. Do you want a shared hosting, Dedicated Server, or a Virtual Private Server (VPS)? This article will tackle about the advantages and disadvantages of these hosting services so you can make an informed decision on which is best for you.
The Shared Account
Shared account is a basic web hosting account and used by millions of websites around the world. The shared account is perfect for sites with less traffic because they are inexpensive as compared to the VPS and Dedicated Server.
Here’s a scenario to enlighten you. Shared hosting account is like renting a room in a dormitory. You have your own private space; however, you share the facilities such as the bathroom, kitchen, and living room with the other tenants. With shared hosting, your private room is your home directory – nobody is allowed to invade your home directory other than you. That space is solely yours. But, you share major server resources like RAM (memory), software packages, CPU, and network connectivity with other websites.
Pros and Cons of a Shared Account
Pros
Very cheap – fee for a basic shared account is as low as $5.97 for every month
It is a great approach in starting an online presence
Fully-supported by Home-Cooked Support
Doesn’t require customer intervention when it comes to system problems
Very easily scaled across the three shared account hosting types
Cons
Same with renting a room in a dormitory with others, you are subject to each other’s doings in the server. Since you share the main resources, there may be times when two people will compete with the same resource all at once. Here’s another scenario – two people are using the toilet and you badly need to use it. Although there are automated scripts already in place to ensure that people are not hogging the virtual restroom, there are instances when two processes need the same resource simultaneously. From time to time, the second individual must wait for a moment – however, in computer terms, a “moment” is normally in a matter of microseconds, instead of hours.
Less capacity to modify. The same with landlords that implement rules, shared servers also have rules on what “tenants” are permitted and not permitted to do.
Outbound email is limited to 500 per hour
Root access is not permitted
Must have cPanel
Many individual starting with small online stores or blogs start with shared account.
The Virtual Private Server (VPS)
If you’re not sold out with shared hosting, then a VPS can be your next option. A VPS is somehow the same as shared account in a sense that few resources of the parent server are being shared by the child servers. However, before we delve into that. Here’s a scenario for this option: A VPS is the same as renting an apartment. Different from renting a room on a dormitory and sharing most of the facilities, renting an apartment provides an individual space with more freedom. You have your own bathroom, kitchen, and living room that are only for your usage. In a VPS setting, these are the RAM, disk space, and operating system. But, you still need to share a few resources with the rest of the building, which is the parent server, electricity and the water system, which is the network.
Pros and Cons of a VPS
Pros
Cheaper compared to a Dedicated Server
For sites that are becoming gradually popular, a VPS is the next step up
Customizable – the limitations of a shared account are nearly gone
Having a managed or core-managed VPS’s can let Home-Cooked Support take care of the management
You will have more resources – you will have your very own operating system, RAM (memory) and in selected cases, your own CPU
Outgoing email is not limited to 500 per hour
cPanel optional
Reseller-enabled
Scalable – can easily increase or decrease system resources when required with less downtime
Root access is permitted
Cons
More costly compared to a shared account
There are a few resources being shared with other customers on the server, so there are struggles with memory or server load.
The Dedicated Server
A Dedicated server is a physical server with hardware that you can use exclusively. Here’s a scenario: A Dedicated Server is similar to owning a house. From small cabins to the most elegant houses, it is really good to have something that is yours. Your hardware has no other customer, and nobody is competing for your resources too. It is exclusive to you. Your server is located in a datacenter, same as with your neighbourhood. If a fuse is blown from 3 houses away, it will not affect; but if the transformer of your neighborhood is blown then your house will be affected – if something occurs in your datacenter, which affects the network connectivity (a rare occurrence) everybody is affected. However, for problems that are specific to the server, your server is not affected by the things happening around you.
Pros and Cons of the Dedicated Server
Pros
A Dedicated Server is a physical server that is exclusive to you
cPanel optional
Root access is allowed
No outbound email limitations
Vast resources for high-traffic sites
Overall control over every aspect of your server
Capacity to add more RAM, bigger disks or RAIDs
Fully supported by Home-Cooked Support (with managed or core-managed Dedicated servers)
Reseller-enabled
Cons
More expensive compared to shared or VPS accounts
Server Resources
Regardless of the type of hosting service you opt for, your site will be located on a server. If visitors visit your page, the CPU and Memory of the server will work collectively to provide the visitors with the pages they want. Sometimes, there are instances that your website may utilize excessive CPU or Memory to serve a lot of pages, and that will be the perfect timing to improve and upgrade your account.
Upgrading from Shared to VPS Hosting
For many users a shared account is perfect. You have the capability to host an array of applications like Joomla or WordPress, and there are many email accounts to work with. When you compare Shared Hosting to living in an apartment, cases where an upgrade is necessary includes:
A Growing Family: When your family is growing, and your apartment can’t handle it, then it’s a perfect time to move. For instance, you may have need of an extra bedroom or bathroom for your children. Moving into a condo can provide you with that extra space. In Shared Hosting, if your site is fast becoming popular, you may have to upgrade to VPS Hosting so your account will have more CPU and Memory. This will let you handle all of the new incoming traffic on your website.
Customizations: If you like green and want your walls to be painted green, you may not be able to paint your walls with your favourite color if you’re in an apartment. Moving to a condo provides you with more ownership of your space, which lets you paint and decorate your space with whatever you like. If you need a software that’s not found in Shared Hosting, then upgrading to VPS hosting will have the power to install any software that you desire.
Upgrading from VPS Hosting to Dedicated Hosting
Continuing with the condo analogy, you are given a lot of control; however, you do not have total control. If you are to invite a crew to play in your home, others within the community will hear the ruckus and may complain. If your relative or friend moves with you, you may not be able to add another room to accommodate them. There are a lot of good reasons that living in a condo was great for you during a certain stage in your life; however, your family is growing. You may think of purchasing a family house where there is a lot of parking space, extra bedrooms, and a huge lawn for you to play with your pet.
For mid-sized businesses, VPS Servers are perfect. You will have a virtualized private server where you can create and tweak what you need. You may able to host a limitless number of sizes, and there are no limitations aside from the usage of the CPU and memory of your server. The server of a VPS isn’t a dedicated server, so that means that you’re still on a server with another user. Since you are sharing a server, other users can still be affected by your actions. If your website is busy, controlling most of the CPU time and memory of the server may cause performance problems for other users of the server. And if you’re using an unoptimized script and is running out of control, it will mess up your site and the whole server. This may cause downtime for other users of the same server.
Which to choose?
With the things mentioned above, you now know the various advantages and disadvantages of different type of hosting. We hope that through this article, you have grasped their distinctions. It is up to you to choose what type depending on your needs. If you intend to create a big blogging platform that lets hundreds of people visiting each month, you may have to consider dedicated hosting or cloud hosting because of the needs that you will face. These servers will be faster and help load your website as quickly as possible.
But, if you are starting with something small, why pay for a lot for what you don’t need? Go for shared hosting or VPS hosting and save a small amount of money.
