CSS has brought about revolutionary changes to stylizing of web pages. It enables you to have consistency in stylizing by having styling defined in one location and applied to all the elements of the web page. There’s no need to have a styling code with each element of the web page, there has to be only one code that will reflect across the page. The ideas and tips and tricks we discuss here are to get developers working in the direction making websites look better, and thinking in terms of design. Here are a few basic tips and ideas that may come in handy.
1. Single CSS
When developing a website, having separate CSSs for different styles seems like an easy and effortless option. However, what we fail to realize is that downloading it leads to separate HTTP call to the endpoint. With respect to downloading bytes, establishing an endpoint is a costly operation. Thus, it adds to overheads.
2. CSS3 Backgrounds
CCS3 gradient is a popular option among developers when it comes to backgrounds.These gradients that can be applied onto all sorts of important parts of the layout prove to be a massive aid to developers. This helps web developers as they do not have to resort to Adobe Photoshop to come up with new backgrounds.
3. Externally Defining The Style
Defining the style of the code externally to that of the web page has its own advantages.
Since the presentation evolves separately from the content, the chances of a bug arising are reduced. Having content separate from the presentation is an advantage of its own.
It also saves you from additional HTML requests. This is because the stylesheet is downloaded on the very first visit, and subsequent visits do not lead to the addition of stylesheets.
Whitespace refers to the blank area between the elements on the page. As a developer, you have to determine yourself the space that needs to be blank between the elements.
User’s opinions and comforts vary. For this, you can consider your target market, or just have a poll, or experiment yourself.
5. Normalizer CSS
Stylesheets can vary from browser to browser. Each browser has its own separate stylesheet. This may cause some the elements to display in a conflicting way across different web browsers.
Using reset or normalizer CSS makes all browsers behave in a proper way. This can be done having low specificity setting of baseline styles. This helps by removing cross browser differences.
Normalizers will bring uniformity across browsers, may it be Safari, Mozilla, Chrome etc, by deleting or normalizing your styles.
6. Repeating Tiles
In today’s time, we all need that little something extra to make our websites unique. Something as simple as the addition of texture or repetition of background tiles does the trick.
There are apps that can help you generate a tiled image background dynamically. They have huge collections of textures that are available for download freely. Apps such as Subtle Pattern and Noise Texture, just to name a couple, are frequently used apps among developers.
7. Fullscreen Background Effect
While talking about images, there are many websites that put to use the fullscreen background image effect. Large and extravagant backgrounds accomplish the task of catching the viewer’s attention. Additionally, they also signify the genre, theme of the website.
All you need to do is find a high-quality image which would be suitable as the background. Make sure the image you select is easy on the view and does not hinder the reading process.
8. Checking User Experience
As website developers, one crucial aspect that we miss out on is running tests on the website. Google Analytics or third party resources can be used to perform such checks about user experience. It helps you to understand how the visitors use your website.
UX testing holds tons of benefits for the developers. It helps you get important feedback from the visitors, inform you about areas that can be improved, or that are broken, have bugs etc.
You can use the testing method or straight up ask your friends or acquaintances for feedback and reviews.
9. User Discussion
User discussion is a very crucial feature for any website, that lets users communicate with you and other fellow members. You have to come up with your own database to come up with a comments form. However, if you’re using WordPress and/orDrupal, these functions come by default.
Using open source technology, better solutions such as Disqus can be applied. It helps you dealing with spam and junk in the comment area. Moving to Disqus is rather simple. All it requires is a signup through the page. WordPress users can move to Disqus comment section plugin as well.
10. Share Function
In the current times, the impact of social media is overwhelming and cannot go un-noticed. Social Media holds great importance in everyone’s life. We are all well acquainted with the sharing badges that popular social media sites use. The likes of Facebook, Twitter, Whatsapp provide you codes that you can embed onto your websites that will help the visitors share your content through various social media platforms.
These badges are extremely significant for both the users and you. The users get to share your content with ease. And through the users sharing your content, it spreads awareness about your website.
11. Defining Styling On Elements and Classes
CSS3 supports styling on individual classes, elements and individual IDs. It is recommended you define styling on individual classes and elements. In case you have to override, then defining styling on elements and classes reduces the number of selectors by reducing the specificity.Low specificity can have a major impact on your HTML5 webpage.
12. Web Fonts
Using the typical font can become mundane and boring. Dynamic web fonts allow the developers to move away from the usual font families and add a little different dynamic to their website.
There are a couple of reasons that this has gained enormous popularity in recent times. Since most internet users are on a pretty fine Optic-Fiber/ DSL connection, references to a third party font stylesheet do not lead to a major lag in speed.
One of the most successful is Google Web fonts. The ease in setup and the additional perks, all add up to making it one of the most popular web font providers.
13. Defining Image Width and Height
This is one that might not be of use to everyone, but it does go down as a quick fix. If there are images on your website that do not have definite height and width, it might be a good idea to define them. This task might seem to be a time consuming one if you have a ton of undefined images that you have to go through.
Usually with images that lack the proper definition of the height and width, before completely being loaded, the images are displayed as 1×1 px square. Now once completely loaded, these images will make the scrollbar jump about. Hence, making it hard for the user to navigate through the website.
Open source developers build demo pages. It is for this purpose that they use Bootstrap. But more frequently, you’ll see the use of Bootstraps within the landing pages of new applications.
With the inclusion of columns, links, buttons, form inputs; for developers, Twitter’s Bootstrap is arguably the best UI framework.
Developers who use bootstrap instead of putting out their own UI designs are the ones who avail the greatest benefit from it. In today’s times, bootstraps can quite possibly be applied to any website that’s out there. This is one fronted framework that you just have to take into consideration when coming up with a webpage.
From one UI fronted framework to another. Bootstraps lesser heard of the counterpart. Created by 99 Lime, HTML5 Kickstart focuses on nice design aesthetics than common HTML5 layouts.
With a set of pre-established elements such as dropdown menus and gradient colors, Kickstart fails to reach the heights of bootstrap. And honestly, Kickstart is not something that can be considered for every other project, but it does have its own advantages.
Also, before moving to Kickstart, one might want to give the library a test run, just to make sure that they like the feel of the default elements of Kickstart.
16. Jump To Top
Nobody likes scrolling for ages, or holding that scrollbar and dragging it upwards till eternity. This is a very simple step that makes your website look neat and efficient and surely helps the visitor. If your website publishes long content, then this is definitely a necessity for your website.
Now, the back to top link is seen pretty much on every other website these days. The best position to place it is towards the bottom, in such a way that it doesn’t interfere with the content. An interfering back to top link can be as annoying as having to scrolling back to the top.
17. Upgrading Color Schemes
Who doesn’t like a bit of change, especially if it’s with colors? See any popular webpage, one thing you will find common in all of them is that they keep updating their colors, and layouts. Sometimes visitors love it, sometimes, maybe not so much, but it keeps them talking.
It is not about changing the color of your web page overall. But rather, it’s about adding a splash here or there, such as the toolbars, headers etc. It gives the regular visitors a fresh breeze of change and keeps the webpage afresh.
18. Responsive Images
Responsive and dynamic web pages have gained massive popularity these days. The most common way to make your images responsive is by adding width: 100% using CSS on all images. Other open source material may also prove useful. ResposiveIMG is a jQuery plugin that can be added to the page, and it’s single line code targeting all images on the page makes the images responsive.
In the modern day, it’s almost considered ridiculous to have images set at fixed width. Giving all sorts of trouble as window is resized.
19. Menu Accessibility
Getting the menu bars right is tough. Therefore, it is recommended to not try and update this element of the layout constantly.
Vertically there is a provision of ample of space. Therefore the sidebars can hold manifold menus. But what provides more hassle are the horizontal navigation bars. These have to hold the drop down menus or the sliding sub menus. Visitors will find it easier to navigate through the website if the menus are easily accessible and clearly defined.
It is very important that your website’s designs appeal to the viewers. This is a means of getting new viewers, keeping your old viewers engaged and making sure that new viewers don’t bounce off.
Having a good layout is important for both new, upcoming websites and old and popular websites.
It is important to make sure that your website is well defined, making sure that the buttons match the themes of headers and footers etc. One particular section should not seem different from the other. They should not look absurd and appalling.
These were a few tips to make your webpage look attractive and appealing to the visitors. These are all varied in their complexity and time consumption. While some can be accomplished in a matter of a few minutes, some might take you up to a couple of hours. But, all these will prove useful when it comes to overall development of your webpage.
Going over your website, keeping it up to date with the new trends, and making sure you communicate with the users can turn out to be very fruitful for your website, both in the long run and in the short run. There are new releases to watch out for every other week.
These were just a few ideas that you can turn to any time you feel like giving your website a little make-over, or a touch up here and there.
Remember that your websites look and feel determines the turn out to your page. It can help you gain or lose viewers. Therefore, it is best to keep the layout in best possible shape.
About The Author:
Maggie Sawyer is a creative web developer at MarkupHQ Ltd., a leading PSD to Html with vast experience in web development & design. She provides Html theme conversion services with 100% client satisfaction guarantee.