This question has subscribers, did not expect so much, but it suggests that the issue is interesting, which is good. Therefore, even though I'm its author, but I will answer too. I like a man who has experienced the era of Mosaic, Netscape and IE (the Oldies will understand me), I will answer also for the reason that often, no ... very often faced with what is really "talented" novice Front-End spend for nothing the time, because of ignorance of such, it would seem that
the question about anything (as expressed
Froggyweb) about the organization of your workflow and begin not with what it would cost to start it causes that some work is simply copied, remade, etc just because initially didn't think about that.
Designers "sculpt" models in his own way, and who is it, and how can anyone, especially beginners. Customers, in order to save money, often resort to the services of novice designers, sometimes clearly very talented, but not yet comprehended some
norms of behavior in terms of in what form should submit the layout coder. After all, for clients: beautiful, like all the buttons are, there are pictures and references on place - all good. We have to break down.
I work on three monitors: Central - layout, left - result right - design layout + what else that is necessary in the course of the play, like the movie, Wikipedia, etc.;
Environment:
in Visual Studio, for complex and large projects firmly hooked on the Back-End;
Visual Studio Code for projects easier;
hehe in Notepad - very simple))
Music is Holy, the more I also sometimes write, but always listen to someone else on SoundCloud))
Create a solution folder
Create a subfolder within it is always the same: _native_design, which (depending on the format portiou design)
Choose clearly common page components (header, content, menu, sidebar, footer and etc.) and for each create a simple empty scss file with the name specified in the component.
For these components, choose fixed and variable elements and is set selectors in the relevant scss files (there are always tight with names, because by nature I'm not very gifted)
Common model elements are also rewarded with their own cascade, in a separate file)) to write to mixins, etc.
Based on the grid, and the minimum required versions of browsers (talking about IE of course), create a file _base.scss which is filled with discharge style, and announcements for the grid (well, not all of this manually, and snippets, imports include that I have prepared almost all occasions).
Try to stick to the well proven principle of "one base", which implies a common basis for the entire layout, i.e. have one base frame (base), and this is a place for hanging her everything. I often see mistakes in this regard, when it comes to the fact that for one "nonstandard" component page, NOT occurring on every page that uses a separate (and not one), basic style (essentially a file), in which 90% of the cascade is duplicated with others, etc.
After this preparatory work starts on the HTML, and when it is ready, move directly to blocks in cascade, of course, in constant contact with HTML – this is the longest stage in the whole work, I think everybody understands it.
The font is also worthy of attention, because not all designers know what it is from the perspective of the Web, and use them for other purposes (it happens) that requires coordination.
Then begins the work with adaptability. I always fold the content, i.e. start with a wide format, then desktop, tablet, mobile. There is nothing complicated, especially when there is a grid on the basis of how many components tightly depend on the size, choose how to specify media queries, i.e. either the query inside selector blocks, or the selectors in the query. Usually used 4-6 points + two for each main point, ie at 1px and 1px less, but not always, depends on the layout. Don't forget about the DPI.
Then begins the work with pictures. I submit it as a separate stage because of the skills or newmani designer. Because vector graphics are not always where it should be, not always immediately find it, then begin to shake the designer that brought to mind. Here I think particularly of issues should not be. Optimized raster, vector optimization, etc.
Then begins the JS, ie filling interactivity is not the CSS, namely scripting.
Then begin to twist-turn layout everywhere where only it is possible, based on customer requirements about the minimum supported browser versions. Here difficulties is not particularly the case, since with browsers in terms of standards support is already easy, and users have to update their browsers more often. Anyway originally typeset with an eye on here is the minimal version. Although there are still requests for support IE7, especially from customers from Central Asia.
In short, something like... for an answer, opened up Word and banged out the text. I'm sure I missed something, what is not said but do not judge strictly))
UPD:
Forgot to tell you about measuring the speed of download and rendering speed. This is pay attention to the layouts with a complex composition! It should be remembered that before rendering the browsers carry out a serious analysis of the DOM and cascade styles, there are ways to optimize these issues, it is important for mobile devices if your site does not have their own version. The same applies to JS your manual code.
UPD2:
Guys, I Skype is not indicated for what you have sent me questions. Any clarification, write here or create a new question on the Toaster. Thank you for understanding.
