Published by: Pradnya Rath, UI Developer
1. Make website Speed should be an Absolute Priority
It’s most likely one amongst the least debated facts that speed is very important. Analysis has shown that it influences everything from bounce rate over user satisfaction to conversions and revenue.
A website which may load quickly on all devices and platforms even with slower web connections is ideal. you’ll be able to use tools like Pingdom or Page Insights to check whether or not your web site loading time is as per standards or not and more improve the speed if needed.
2. Design for the small screens first
Designing with the mobile (smartphone) layout initial can assist you to separate the essential components from the secondary ones. Adding as you rescale is way easier than cutting as you scale down.
For the past few years, mobile traffic to websites has been boosting and today mobile guests frame the most of the proportion of traffic for several websites. you ought to take the “Mobile First” approach.
Write down all the content classes,
Write down all the content kinds,
Rank them in terms of preference,
Then lay them at the tiniest viewport earliest.
Add components as necessary once you move to larger viewports (like tablet or desktop). for instance, if you’re using the collaborative design app UXPin, that means which means making your 1st model on the 320px breakpoint. Consider larger screen sizes also, and conjointly the sizes between popular breakpoints.
3. Make usage of Scalable Vector Graphics (SVGs)
SVGs are mandatory for any responsive design that is utilizing illustrations like icons. in distinction to image files (jpg/png), SVGs are infinitely scalable.
What this suggests is that you just will simply rest simple knowing that any icon or graphic can stay ultra-sharp across all experiences whereas not having to ever worry regarding resolution.
This ends up in a systematically polished look notwithstanding however the web site is being viewed.
Furthermore, SVGs are typically a way smaller file size than their image cousins, in order that they will save your electronic computer some load time, that on mobile expertise will mean the distinction between somebody stick around or leave
4. Homogenize Clickable Areas/Buttons
On mobile, buttons and links will be touched by an individual’s finger, not by an actual mouse click.
That being said, we have to take into consideration that buttons and links ought to have larger interactive areas to contain this distinction.
on average it’s suggested that any clickable on a mobile device be a minimum 45 pixels in height.
This will facilitate to ensure that there are fewer errors in navigation through your website, successively minimizing potential frustration, and keeping the viewer engaged and ideally, converting.
5. Effortless Navigation
People expect loading time to be the lowest possible and navigation to be easy. You’ll additionally wish to make sure that your most vital pages have the very best accessibility.
6. Prioritize and Withhold content appropriately
Desktop screen sizes offer elbow room that smartphone screens don’t. Take advantage of hidden controls like navigation drawers. There are times where removing content on the mobile screen is simply out of the question.
You can additionally hide content behind tappable areas.
Pull the foremost vital things to mobile users to the top. That way, they’ll have possibly seen the foremost vital factor you’re attempting to indicate or tell them.
Don’t forget to Read “Top 9 Vital Elements for any Website Design“
For example, rather than of showing a whole section with its body text, you’ll show simply the title, with a little supporting graphic that we are able to build them interactive/clickable.
When this is clicked the complete body text can appear, we can associate it with an overlay or with some form of attention-grabbing animation. This can help shorten what would otherwise be an intensely long page, and with correct visual style be a awfully participating expertise for the viewer.
7. Take Leverage of Device Features
On smartphones, you have got the power to try to do a variety of diverse tasks. we could directly make calls, send messages, and open apps, from the browser
For example, whereas on a desktop web site, you will list the phone number/ On the mobile version of that web site, you will need to list the signal within a button or clickable space so it’ll mechanically prompt a decision once clicked.
Social media icons also can be coded in such the simplest way that once clicked if put in thereon person’s phone, it’ll open directly within the app as against a mobile browser.
This idea also can be applied to email addresses, gap a brand new message in AN email app and auto-fill that email because the recipient, once clicked.
When selecting a typeface(fonts), make sure that your choice works well and maintains the general feel you would like whether or not you scale it larger or smaller.
Some typefaces with thin letter forms may work fine at larger or maybe medium sizes, however, those letterforms lack clarity once they area sized down too little. this may have an effect on the site’s readability, that isn’t acceptable.
If you need to use a specific type with thin letters, check that that it’s clear even at its smallest size or contemplate work a special font for those smallest sizes.
The wider a column of text is, the additional line-height (vertical height of every line of text) is needed to assist users to notice the beginning of succeeding line.
16px font size is the default on most browsers and a good place to start for all screen sizes.
9. SEO Friendly
It doesn’t matter however engaging your website is. If your web site isn’t found in prime ten results of SERPs, you may not deliver the goods desired results. To see how your website’s SEO fares, conduct an audit to find weaknesses in your current strategy. Solutions can then be found to lead to a more successful website. For more information on SEO audits, visit here http://victoriousseo.com/services/seo-audit/.
Ensure that the content of your web site is compelling and fascinating for your guests. Also, you wish to execute correct meta tags, alt tags, heading tags, schema, XML sitemaps, and different on-page efforts for search engines to rank your web site.
Sizing pictures for quicker load times
Internal linking to keep users engaged & on the site
Properly labeling pictures for search engines and users
10. Create Strong CTAs
Strong CTAs ought to be a part of the initial B2B net style, not AN afterthought. they must be positioned in an applicable place within the layout that creates a sense for the target market. as an example, a “Learn More” button is also placed higher within the style, whereas a “Contact Us” type is also placed towards rock bottom of the planning once the traveler is additional educated a couple of complete or company.
Some of the other good practices are as follows
1. Use consistent branding throughout the site
2. Email Marketing
3. Social Media
4. Add breadcrumbs
5. Strong Security
6. Reduce the quantity of selections you supply your visitors
7. Compress pictures the maximum amount as potential
8. Animate top bars and popups
9. Use individuals in photos (But Avoid Stock Photos)
10. Create distinct landing pages for SEO and paid ads
11. Avoid using sliders and carousels
12. Direct Attention with Visual Cues
10 most common web design mistakes to avoid
- Uneven layout
Always use the grid. It splits your layout into sections with series of vertical and/or horizontal guides. you utilize these guides for putting components and equalization the page.
Not modifying the Color of Visited Links
A good grasp of past navigation helps you understand your current location since it’s the completion of your journey. Knowing your past and present locations successively make to choose wherever to go next. Links are a key factor in this navigation website development process.
2. Non-Scannable Text
A wall of text is deadly for an interactive experience. Intimidating. Boring. Painful to read.
Write for online, not print. To draw users into the text and support scannability, use well-documented tricks:
2. Bulleted lists
3. Highlighted Keywords
4. Short Paragraphs
3 Incomplete Input Validation
Remember that almost all front-end development frameworks give out-of-the-box validation rules that area unit implausibly easy to use. in addition, most major back-end website development process platforms use easy annotations to assure that submitted knowledge area unit adhering to expected rules. Implementing validation could be time overwhelming, however, it ought to be a part of your normal secret writing observe and ne’er put aside.
Validating user input on client and server side is mandatory, whether it be one of the Baremetal servers or an in-house solution. We are all alert to the sage advice “do not trust user input” but, nevertheless, mistakes stemming from validation happen all too often.
One of the most common