FRONT END DEVELOPMENT, WE USUALLY FORGET…
As frontend developer I am always looking for the way of optimizing as good as possible every website that I do, that’s why I’m always thinking about how to apply the best practices helping to have an effective site and at the same time to facilitate the implementation of the backend in the shortest possible time, easy to modify in case of having bugs and well developed.
Although I wouldn’t like to say that I am an expert on the topic these are some of the practices and tips that I usually take into account and works well for me, however, feel free to give some feedback or comment below about how you do this process.
SET UP THE PROJECT
This part could be a bit tedious, some devs tend to do it on the road, however it is worth taking the time to do it from the start
Analyze the project. In this step you must have some design or planning of how the site will be, and there are two options, the first one: if the planning is already complete and no change will be made … we have to be realistic, this almost never happens. The second one: if the design will continue at the same time of the development process.
In the first case, lucky you, it will be easier, you only have to structure your project, considering that you already have all the assets you only have to decide how to create the file paths, for example, my site already designed is a restaurant that sells international food so I have multiple images for the menu and I can organize them as follows:
In the second case, just need to coordinate with your team especially with your designer about sizes, and types of assets that are going to be using and which ones could change to leave them at the end and thus avoid wasted time of work that will never come to light, here the communication is your best tool.
Assets optimization. There are several times in which the client, designer or other person involved, do not add the elements in the ideal format for our site and this does that it is slow of loading, that’s why we must make sure that everything is in order from the beginning, it’s worth mentioning that many of these points can be cleared on the kickoff, daily and weekly meeting with the team and clients as well as using prototyping tools that help you to better visualize the flow of the project to determine the proper use of each asset.
Here are the points that we need to take into account for optimization:
Optimize the images for use on the web, a difficult job because you have to make sure that each one has the right resolution and the minimum weight possible
Deciding which image format to use: JPG, PNG, SVG?. In my opinion when we talk about certain elements with transparence I prefer to work directly with the SVG format because is faster to load, it has less weight and can change its size without affecting the design, for everything else is preferable to use jpg, however if we talk about buttons , icons or any image that may have this function there are two options: under no circumstances replace a <button> or <a> with an image, NEVER!, the other option is to convert those images to SVG format to later convert them into a custom font.
By the way… remember that the name you give to your files is also an important part, forget to name images, videos or any file with formats such as: “img01.jpg”, “file24089.pdf”, or “video 001.mp4” uses names that help to identify your files without having to open them, for example (in the case of the International restaurant): “lasagna.jpg”, “italian-food.mp4”, “burrito-spicy.jpg”.
Once you’ve done all this…
LET’S START TO CODE
Back to basics. For some devs it is easy to go directly to the code without first making the basic configuration of the structure of a site:
- Add the name of your website, then add a name for each view.
- Add the meta-description of your site, maybe you not have a definitive one, but it’s better to add a short description at the beginning that not add anything at the end because you forgot.
- Don’t forget to declare the language in which your site will be it’s simple! This helps the browser to provide suggestions of translation, orthographic, even is of big help for the navigation assistants.
- Add all your social networks with the right meta tags.
- Finally, if you like to go into details like me, don’t forget to make use of the <link rel=”icon”…> and the metatag theme-color of chrome, will give a special touch to your site!
CSS, SASS, LESS, JS/JQuery. The first and most important, avoid the use of styles inline or embedded!!! Once you already know this, we can continue…
Any option that you choose, you have has to be well structured into different style sheets, avoid the use of a single style sheet for the whole site, it’s more difficult to manipulate if you want to make a future improvement, and unnecessary in some views, I recommend to have a style sheet for general styles, in which you will have classes, to be used throughout the site, of course this should be included throughout the site, then you can create two views for each view, one for the desktop styles and the other for mobile devices, in that way you have more control about you site.
If you use sass or less much better!! You can have a style sheet with variables and functions to reuse code!
This is an example using scss style sheet:
The first image shows the declaration of variables for font and colors.
This one, shows how we import the style sheet of the previous image to make use of those variables and proceed to create in this new sheet the general styles of the site, which once finished may be imported into a new style sheet, for example: home.scss to make use of the classes and variables included in variable.scss and styles. scss
Finally and not less important, name your style sheets according to the view you are going to use that way you can identify where are you working and, use comments to separate the sections to which every style belongs and please… don’t forget to minify your styles to reduce the load time!
I almost forgot … a last tip for the use of styles, avoid using #id everywhere, is a bad practice, these are identifiers unique and as such must be used only a single time in very specific cases, for everything else you can use classes and don’t forget that the names of these classes must be descriptive so that anyone that see the code can to know which element affects.
HOW TO STRUCTURE THE HTML5.
In any environment you use, try to apply the following structure, you will work faster when you reuse code and it’s easy to modify in the future, all thanks to the use of dynamic views. ´
Use a ‘layout’ that contains the general configurations of your HTML like title, meta tags, head and body this last without content, that will be on a view called ‘pages’, not including the navigation bar and the footer, those can be added into a partial and include them anywhere in the site you want.
Don’t use incorrect tags… always follow the semantic rules of HTML5, it’s never too late to review the function of each tag, you can even find improvements.
More to know…
Maybe you already knew all these tips and think that is very repetitive and you can find this information everywhere, but believe me, in my experience the 80% of the devs forget to do these simple tasks that can free you from the stress of messy project, especially when you work with a big project and a big group of devs so I hope this works for you and remember, never stop to find the way to improvement this tips!
If you have some tips to share with us about this topic, please leave a comment and let us know how you do!!
