Design to Development
Hello everyone, we all know that after designing the frontend of the web projects, the next tedious work is to develop the same responsive layout that is done by the frontend developers. In this article, I'll try to address some of the tips and mistakes that any of you can follow or avoid while working in your firm or building your front-end projects. We are just ignoring the designing and coloring perspectives in the article and our main task will be to just copy the layout that is already designed by our designer. For people with their own projects, imagine you've already designed your website using your favorite designing software.
First before writing any structure of your webpage, always define your most used color-schema, text-styling and default animations, transitions, spacings, box-shadows, etc. in the form of variables(--exampleVariable) in the HTML element or more specifically :root element of the document or webpage. After that, make the default stylings of the browser to no-style by using your?'*'?selector. Most importantly, make your default margin, padding to zero and box-sizing to border-box. After that in the?body element?of the document, set your default styles using the properties set in the :root selector or you can use custom values too. After this second step, the last step before setting actual html code will be to set default styles to your elements. You can set all links(a) to have text-decoration : none, all lists (li) to have list-style-type: none, and can style our elements whose styles are repeating themselves. We can amend this last section also when working through the webpage's css/design.
Actually, your code will work if you've done it correctly without doing the above things, but in a line we're just applying the DRY (Don't Repeat Yourself) principle so that the project can be extended for collaboration and other purposes.
STRUCTURE
After your basic designing, there comes the strategy to fulfill your goals, that is in this case, of course making the layout. Though there are different techniques developers follow to make layouts, I found it useful to have our layout to be designed section-by-section or part-by-part. Firstly, analyze your design in desktop, tablet, mobile screen in the design then try to use DIVIDE AND CONQUER technique. This means trying to divide your whole layout into different sections. You can reference semantic HTML tags to at least, in any case have one nav, one header, one section, one footer and in some cases one aside tag in your layout. You may have more than one section but the header and footer in each case will be unique. For each and every part of the layout, ideally, you should first, decide what will be the HTML structure(DOM) of it, and make a tree of it either mentally or in your notes. Make the same tags in your HTML File and populate with the respective data you need in your layout, be that text, images, videos, list, forms, etc. Being done with your HTML, let us move to the CSS part.
CSS
In this article, we are not discussing how to design the layout but some of the tips and steps you should follow to develop a design. First and most important tip is to never, I say it again, never give components of your HTML structure explicit heights if they are not required. In case of images, since they are from outside sources, you may have to give heights but don't give heights to your containers containing texts, your buttons, and various other components that do not need height. Then your next question will be, how to design then the aspired component? For that, you should use our favorite box-model tools, i.e. , margin and padding for being able to develop a responsive layout. Idea is, if you give explicit heights then, you unknowingly make your design static, any new data entry or change in viewports' width or height will cause your container to overflow, and that is not the case you need. One strong tip, I'll suggest is to use?em?and?rem?for your heights and width in case of text formatting etc. While in the case of containers, if in need, use?vw?and?vh?if a particular layout is needed. Also use max-width, max-height, min-width, min-height if you need particular design to happen and your content is not enough to make that happen. For background images, use linear-gradient if your fonts are not that much bright according to context. Initially, try to make the layout for mobile width then if you're using flexbox or grid, try to make it responsive for all widths, but if it is not possible, try the media queries according to the corresponding widths where the layout is out of control or it is aspired in a particular fashion.
领英推荐
REPETITION
Remember the global CSS we've given to our .css file, that was to avoid repetition. Try the same strategy as above in all parts of the layout then decide in between or after the design has successfully completed the blocks of code that are repeating themselves, maybe they are sections, may be they are headings or some button stylings. One tip is to make one style default then modify accordingly on the whole project again and again as we've followed in our global styles.
Conclusion
The above discussion may seem abstract to the initial developers as at the beginning you've to learn use-cases before implementing the ideas. But believe me, the real problem begins when you start to implement what you've learned. This is one of the articles I have shared my tips. I hope, I will write more like this in the future ahead.
You can see my work by clicking at the following link ahead.