I am in the process of adding/upgrading several webpages and want to begin this process in the best manner possible.
It is my normal habit to begin a webpage with a fresh copy of html5boilerplate and build around that basic structure. That said, I have also read that all that is really necessary is to simply use the following CSS universal snippet because most of todays browsers are more efficient etc.:
My apologies for not stating my question clearly enough.
What I was interested in getting feedback on was this: Is it considered “best practice” to begin a new webpage by using the latest html5boilerplate template or is there a better way to construct a new webpage with todays browser improvements?
This template contains the normalize.css file which is used to “neutralize” the vagaries of todays browsers. As noted earlier, there are some web developers who simply use the css snippet I provided in my original post. That said, perhaps the use of normalize.css is no longer necessary.
I do my best to pseudo test my webpages with Chrome’s dev tools, but that is no guarantee that reflects what user’s actually see when they view my webpages. At one time I was having issues when using both normalize.css and modernizr.js together. In truth, I have forgotten how I resolved that issue, but I may have scrapped either or both.
I do not use a framework or “reset” when coding so I can’t offer any experience along those lines.
I took a quick glance at the instructions for skeleton and it seems to treat font sizes “uniquely”, so you may not be able to mix skeleton with HTML5Boilerplate. It is also universally unwise to mix frameworks anyway. They are not plugins.
As far as the snippit goes, I avoid the broad use of the universal selector because the global assignment addresses defaults that I see no need to change and can adversely affect form layouts in a way that may not be fixable.
The preferred method of assigning box-sizing values is:
html {
box-sizing:border-box;
}
*,*::before,*::after {
box-sizing:inherit;
}
I’m not sure there is a “best practice” for starting out with responsive design. If there is I’m not sure that Boilerplate or Skeleton would feature in it.
I’m far from being an web building expert. I began building websites with pure HTML and CSS over five years ago, but I always like to get someone else’s opinion on my methodology and IMHO, there is no place better to get a clean “reset” than within this forum.
Here is a link to my woodworking website for your perusal. It is a work in progress and probably always will be until I’m gone. I’m in the process of converting the entire site to PHP as well.
Got it! I will abandon my habit of using the boilerplate template.
I discovered the skeleton grid template in David Sawyer McFarland’s excellent book “CSS The Missing Manual” (4th Ed.) This grid keeps the visuals nice and tidy, but in truth I have not had need for more than one column (thus far) on any webpage, so I may ultimately not use it at all. It is good know that it is available if needed.
I"m not so sure that default margin and padding are much of an issue “today”, though setting box-sizing seems to still be a good idea for backwards compatibility (cough IE cough).
There was a period between XHTML and HTML(5) where vendor prefixed CSS rules were a pain, but AFAIK many of those have become uneccessary.
What inconsistencies have been and continue to be present in browsers are how they deal with HTML and CSS that does not meet specifications. That is, how they “fix” problem code. eg. Some may “add” a missing tag where the author should have put it, others may add it where the author would not have wanted it to be, others may ignore it entirely.
tl;dr Validate you HTML and CSS often and the majority of your design problems will take care of themselves.
Maybe have a look at https://AmpProject.org and see if all your requirements are satisfied.
No JavaScript allowed, only use the supplied libraries. Remarkably optimised for mobiles and also very fast on desktops. It is a bit tricky to setup but using PHP include files makes simplifies the task.
I would also look into saving your page, titles, links, plain body text, etc into a mysql table. Once again there is effort involved but makes expansion so much easier. Surreptitious use of a single CSS file will make future global theme selections very simple.
Thank you very much for your in-depth response. I have had to make myself a “check list” of things to do with a new webpage and - unless I forget to use my check list - the top item is webpage validation.
Thank you for a very informative post. I took a look at Amp and it looks very interesting. I will take a hard look at it this evening. Your mention of using a single CSS file is in line with my beginning knowledge of SASS which, as I understand it, creates very tidy CSS files which are quick to load.
There seems to be no end of what should be mastered to make for truly efficient and responsive websites. I’m enjoying every minute of it.
Beware: that https://validation.w3.org does not work with AmpProject. AmpProject has their own special validator.
Also there is a Google/Vivaldi/Opera Plugin Extension that immediately validates AmpProject web-pages. Those that validate have a green icon near the top right of the page otherwise details showing errors and lines appear in a drop-down list-box.
