Landing page template and guide

Okay, let's go to CSS. Follow the bouncing ball to:

I always design using a monolithic style sheet by support target. This means a file for the screen, a file for printing, etc., etc. The number of separate files used in the construction of a page slows down the loading of the page by what is called "handshaking".

Have you ever noticed when downloading files via FTP how a 1 megabyte file will be loaded faster than 100 separate 10k files, even though the total file size is the same? This is the workload of requesting a file or launching a new connection to transfer a file. Keeping the total number of files under control is a "must" and why I'm NOT a big fan of people who use dozens of style sheets or dozens of separate scripts.

… and really if you have enough CSS to guarantee more than one file, you have too much CSS; but then I have NEVER seen a normal website that justified the use of more than 48k of CSS (not counting the minification) and why I'm back in front of the horror when I see all the herps and the derpts throw up half a megabyte or more CSS covering dozens of files. Epic / FAIL / Web Development.

… and another hits against the frameworks since they often start at twice as early as ever, you've never even written a single line of your own style!

Enough about that, we go in the sheet.

I always start with a "reset" in my style sheets. The resets exist because it was NEVER the HTML specification job to say what things looked like, so in the beginning it was entirely up to the user agent (A browser is a UA but a UA is not always a browser) to determine how to convey these meanings. That is why, when CSS appeared, there was no standard basis for elements such as margins, margins and borders, so many elements did not have (and still do not have a common starting point. This is something the CSS specification SHOULD have explicitly stated and never has …

A reset simply gives you a common reference base of zero.

There are smaller resets, like the so-called "universal" one of "* {margin: 0; padding: 0; border: 0;}" ", but it can wreak havoc with the style differences of the form elements in FF and IE There are more important resets such as Eric Meyer's "reloaded reset", but they tend to be such an inflated mess that is wasting time setting values ​​that it does not have. There is no need to reset, they border the frame – in fact, such massive reboots give the concept a bad name and have pushed many developers to reject them even if it makes compatibility more difficult.

The one I'm using (created by Dan Schulz, RIP) is the compromise; the beautiful safe ground of understanding; the Goldilocks area. It only targets what is needed for the borders, fill and margins to be reset and nothing else. At a quarter K, it's not big enough to be a bandwidth problem or to raise real complaints.

Well, let's move on.

HOUR – the comment says everything. They are there for AU and non-visual AU. Since it is a screen medium where we can convey this meaning in another way, we can hide it.

@media (maximum width: 480px) – Inside this is a text-resize-adjust for Microsoft and Apple browsers. Some older devices do not recognize the META of the display window and this is the solution to this problem. Unfortunately, if you send the -webkit- one to some Safari desktop copies, it no longer allows the user to zoom in. (Even though ALL mobile Safari are unaffected … it's crApple, they're worse than such expenses! Think of Apple's web technologies as smothered as their idea of ​​"what's next". a cooling solution.).

Fortunately, all mobile devices that "need" this fix have 480px screens or narrower, and it is unlikely that many desktop safari users will set the browser window to such a small size. take care of the problem.

From that moment, I create the desktop layout with FIRST legacy support / degradation. Many people say "mobile first" and it is completely retrograde. You see, we can target modern mobile with multimedia queries, we can not target legacy desktops – so why would you first code what you CAN customize, then leave no mechanism to support it? something else?!?

html, body – their 100% height adjustment allows us to create a min-height presentation. This will be convenient with the "grid layout" system that I will set up so that the background image can be enlarged to fit the page.

body, button, input, selection, table, text box – I like to set all my current font data first. It should be noted that most elements inherit the body, so just place BODY nabs almost everything. Like the reset, these other tags do not inherit, I attribute them here too.

I have not implemented hard texts to read on the web font because I am not a fan of them on the text stream. Avoid using these elements if accessibility is important to you – reserve web fonts for decoration, icons or additional items that the user will not read at length. I do not advise using webfonts on stream paragraphs – especially illegible hosts (for windows users) from Google hosts.

Even Google agrees with that, which is why they do not even use their own web fonts on Google Search or Google Plus in terms of CONTENT! As much as the wankers of typography are disconcerting, it is difficult to be wrong with Arial; Hence the reason why Google still uses Arial as the first choice on its "public consumption" website!

body – things unique to this tag. In this case, I configured the CSS "Grid Layout Module" to create a full-screen line system. under "grid-template-rows", the first value of "auto" means that the element is reduced to adjust to the content, while the second element of "1fr" uses all the space remaining screen.

The end result is that our first element in the interior – the H1 – will have the normal size, but the second element – DIV # content – will expand to fill the screen if the content is shorter than the screen, but it will also increase if the content is too high for the screen.

Note that this breaks down in IE browsers and older, OH WELL. that's the fancy presentation. Do not waste time leaning back for older browsers. At the moment, the result may not be pretty, but it is feasible. This is the line to follow to take advantage of the support efforts of your existing browser. This should WORK, but do not jump through fire hoops for those who refuse to pull their heads by the back of a decade!

h1 – The header gets padding down to make it pretty, big text, coloring, nothing special … YET.

h1: before – this generated content creates the red bar with the Canadian flag. It is larger than the image to give the upper fill area you had, with the background placed at the bottom center and the page size.

I did not do that in percentage, as you did, because it became absurd on my 4k screen. EM is a much better measure and should be used as much as possible, as it automatically resizes objects.

PX is inaccessible, EM means that users who know / need the automatic scaling do not have to dive for zoom. The WCAG says to use EM, so use them!

Again, this whole presentation is not contained, so it has no activity in markup. Content generated :)before ,: after) can often allow you to do all kinds of amazing things without sneaking into HTML.

#content – background, color, nothing extraordinary but notice the size of the bottom: cover; This is a newer property which, in this case, causes the image to be automatically scaled to fill the available space, showing the most amount. As much as possible and only disabling it to preserve its proportions. VERY practical and powerful.

.widthWrapper – I put a small maximum width because it seemed like what you were doing. Under normal circumstances, I would have a larger maximum width, but you really did not have enough content in the design for that. The unsuspected filling allows us to use a margin / fill on the contents without fearing a collapse of the margin. A long topic worthy of an entire article in itself. Of course, now, I guess you know what automatic margins do.

.sousection – also padded, and I hit the size of the font since you seemed to have it bigger. This should not be too unfamiliar here, but I've added more text-shadow (actually several layers) to help improve readability. Text on images is always risky and compromises readability far too far! Likewise, the shadow of the inserted box helps and also makes the hair look nicer.

.section p – filling the bottom instead of the margin to avoid again the collapse of the margin.

#whatWeDo – more padding right so we can insert this passport picture. Once again adjusted to EM. I've remastered the image to remove the excess border and get a sharper alpha transparency instead of the palletized version you had.

.Carry on – again, simple style of a button. I did not really copy the 1: 1 appearance and guess more guessing.

.continue: active,
.continue: focus,
.continue: flyover
– our flyby states to darken the background and "drop" the shadow to give the impression that the button is "depressed". When targeting: hover (at least on the button and the anchor), it is also wise to select both: active and: focus. Technically, the focus is on keyboard navigation and other alternative methods to work around the page, but some older browsers mistakenly use: active (which means it's the last item clicked) instead, just grab the three!

.continue: after – I used the generated content to add the ">>" to the page. By using width and positioning tips, I am able to slide without any additional markup.

.continue: active: after,
.continue: focus: after,
.continue: overflight: after
– adjust the width and the left position to show it. Squeezy with lemon easy to eat.

#footer – alignment, and still some shadow of text to help readability.

#footer img – I have set their height in EM for scaling and allow them to adjust them automatically to maintain their aspect ratio … then some filling margins. As they behave by default as they were inline-block (although they are not, they are "special") we do not even need to do anything else to them.

#footer loud – we use the transformation in uppercase instead of bold to indicate our "accentuation".

#footer – I've hit the spacing of the letters as it looked prettier, and of course, we are plating down to push things a step further.

… and in a nutshell that's the office layout. To make it compatible with mobile phones, we need only one multimedia request: we have used a semi-fluid elastic presentation (max width, non-fixed width), and there is no real column to delete, so it's pretty simple.

@media (maximum width: 48em) – I just shrink the padding / H1 spacing and flag size, decreases the widthWrapper padding and removes the passport image on #whatWeDo.

That's all.