html Archives - Slvrdlphn.com

Creating a responsive web layout using a grid

by Penny Angeles-Tan | Jul 30, 2016 | Web Tutorials

In the 90s we designed websites with tables. It was chunky but as web layout tools go it worked. It helped in making sure that all the elements of the website were organized. Today tables are still in use but not as a layout tool for websites. Tables are usually used for organizing tabular data instead … which is what it was created for in the first place.

The trend now, in web design, is to create web layouts with the use of a GRID.

Grid layout

A grid supports arranging views into rows and columns. Rows and columns can be set to have proportional sizes or absolute sizes. The Grid layout should not be confused with traditional tables and is not intended to present tabular data. The grid does not have the concept of the row, column, or cell formatting. Unlike HTML tables, Grid is purely intended for laying out content. (original source: Xamarin.com)

Think of a web page as a pie and each slice of a pie is the specific content of your website. It could be an image, a video, or text content. It could be a map or even an ad. Whatever it is, at the end of the day, we assign a size to this element and we also assign a place for it on our page.

How do we create a grid?

There are two ways to create a grid … fixed measurements like pixels (px) and variable measurements like percent (%). Let’s take a look at the table below.

Col or span	Width (px)	Width (%)	Gutter (px)	Gutter (%)	Offset	Margin-left
1	30	6.25%	10	1.0416666667%	1	8.3333333%
2	140	14.5833333333%	10	1.0416666667%	2	16.6666667%
3	220	22.9166666667%	10	1.0416666667%	3	25%
4	300	31.25%	10	1.0416666667%	4	33.3333333%
5	380	39.5833333333%	10	1.0416666667%	5	41.6666667%
6	460	47.9166666667%	10	1.0416666667%	6	50%
7	540	56.25%	10	1.0416666667%	7	58.3333333%
8	620	64.5833333333%	10	1.0416666667%	8	66.6666667%
9	700	72.9166666667%	10	1.0416666667%	9	75%
10	780	81.25%	10	1.0416666667%	10	83.3333333%
11	860	89.5833333333%	10	1.0416666667%	11	91.6666667%
12	940	97.9166666667%	10	1.0416666667%	12	100%

The left part illustrates the widths, the middle part, the gutter, and the part on the right the offset or indent.

Don’t let the math scare you! After all, we’ve already done all the computations for you. 🙂 But if you are curious about how we came up with those numbers, here is how each one was computed.

What is the basis for the maximum width? Shouldn’t it just be 100%?

It starts off with the premise that we are designing for a standard resolution of 1024×768 and that we will not be utilizing the entire screen. Therefore, 100% of the container will be 960.

Why 960?

It is the biggest number closest to 1024 which is divisible by 12.

Why is the gutter 10px (or 1.0416666667% in percent)?

In my opinion, the reason is that 10px has been an industry standard for minimum measurement since the beginning, whether it is font size or margins, or padding. Another reason though had to do with the equal distribution of elements. 🙂

Why are there 2 kinds of measurements – in pixels and percent?

Widths defined in pixels (px) are what we call fixed widths. This means that no matter what size screen (or device) is used the size will remain constant. Therefore, there may be times when an element would be too big or too small for the screen.

Widths defined in percent (%) are called variable widths. This means that the width of the element will adjust to the size of the screen or device when viewed.

How wide can an element be?

Visualize your webpage in your head. Now let’s focus on just one straight horizontal line. Now divide that line into 12 parts but put some space in between each part. Do you see it yet?

12 columns in a row

In the picture above take note of the blue border. That is what we refer to as the GUTTER. It is the designated space separating each element of your website that you will use. In the table above the gutter is equivalent to 10px (1.0416666667%).

Let’s do some math

How did we come up with those numbers? Here’s how it was computed

the grid layout

col1 (or span1)	(960/12)=80-20 (this is the gutter on the left and right side)=60;	therefore, (60/960)x100=6.25%
col2 (or span2)	col1 (or span1)x2=160-20=140;	therefore, (140/960)x100=14.5833333333%
col3 (or span3)	col1 (or span1)x3=240-20=220;	therefore, (220/960)x100=22.9166666667%
col4 (or span4)	col1 (or span1)x4=320-20=300;	therefore, (300/960)x100=31.25%
col5 (or span5)	col1 (or span1)x5=400-20=380;	therefore, (380/960)x100=39.5833333333%
col6 (or span6)	col1 (or span1)x6=480-20=460;	therefore, (460/960)x100=47.9166666667%
col7 (or span7)	col1 (or span1)x7=560-20=540;	therefore, (540/960)x100=56.25%
col8 (or span8)	col1 (or span1)x8=640-20=620;	therefore, (620/960)x100=64.5833333333%
col9 (or span9)	col1 (or span1)x9=720-20=700;	therefore, (700/960)x100=72.9166666667%
col10 (or span10)	col1 (or span1)x10=800-20=780;	therefore, (780/960)x100=81.25%
col11 (or span11)	col1 (or span1)x11=880-20=860;	therefore, (860/960)x100=89.5833333333%
col12 (or span12)	960-20=940;	therefore, (940/960)x100=97.9166666667%

The same principle applies to the gutter … (10/960)x100=1.0416666667%

Oh, headache! So much math!

Keep calm. We already did the math for you, all you need to do is apply the widths to your elements as classes. 🙂 Since these measurements are most likely to be used over and over, we will use them as classes in our CSS and will be written down like this:

[pastacode lang=”css” manual=”%2F*%20GRID%20LAYOUT%20*%2F%0A.col1%2C%20.col2%2C%20.col3%2C%20.col4%2C%20.col5%2C%20.col6%2C%20.col7%2C%20.col8%2C%20.col9%2C%20.col10%2C%20.col11%2C%20.col12%20%7B%0A%20%20%09margin%3A%20%201.0416666667%25%3B%0A%7D%0A.col1%20%7B%0A%20%20%09width%3A%206.25%25%3B%0A%7D%0A.col2%20%7B%0A%20%20%09width%3A%2014.5833333333%25%3B%0A%7D%0A.col3%20%7B%0A%20%20%09width%3A%2022.9166666667%25%3B%0A%7D%0A.col4%20%7B%0A%20%20%09width%3A%2031.25%25%3B%0A%7D%0A.col5%20%7B%0A%20%20%09width%3A%2039.5833333333%25%3B%0A%7D%0A.col6%20%7B%0A%20%20%09width%3A%2047.9166666667%25%3B%0A%7D%0A.col7%20%7B%0A%20%20%09width%3A%2056.25%25%3B%0A%7D%0A.col8%20%7B%0A%20%20%09width%3A%2064.5833333333%25%3B%0A%7D%0A.col9%20%7B%0A%20%20%09width%3A%2072.9166666667%25%3B%0A%7D%0A.col10%20%7B%0A%20%20%09width%3A%2081.25%25%3B%0A%7D%0A.col11%20%7B%0A%20%20%09width%3A%2089.5833333333%25%3B%0A%7D%0A.col12%20%7B%0A%20%20%09width%3A%2097.9166666667%25%3B%0A%7D%0A” message=”fluid-css” highlight=”” provider=”manual”/]

In the code above I applied float: left on all the classes since float: left is usually applied to elements using this selector anyway. You can always delete it from your code or use float: none selectively.

How do we use it?

Just keep in mind one thing … the total width of 1 line (in parts). Therefore, you can keep adding div classes of different sizes (widths) until you reach 12 without going over. If you do, the last element will go to the next line. For example:

Given the sample above your HTML will look something like this:

[pastacode lang=”markup” manual=”%3Chead%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%20%20%20%20%20%3Cdiv%20class%3D%22col1%22%3ESPAN1%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%3Cdiv%20class%3D%22col2%22%3ESPAN2%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%3Cdiv%20class%3D%22col3%22%3ESPAN3%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%3Cdiv%20class%3D%22col4%22%3ESPAN4%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%3Cdiv%20class%3D%22col5%22%3ESPAN5%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%3Cdiv%20class%3D%22col6%22%3ESPAN6%3E%3C%2Fdiv%3E%0A%3C%2Fbody%3E” message=”” highlight=”” provider=”manual”/]

Since 1, 2, 3, and 4 are short of making up 12, they were able to stand side by side. But with the addition of 5, it already exceeded 12, therefore, the div went to the next line.

Offset layout

Many get confused by this. What is offset in web design? Simply put, let’s call it an INDENT. According to the Oxford Dictionary indent means to … “Start (a line of text) or position (a block of text, table, etc.) further from the margin than the main part of the text.”

In other words, it is like saying you push an element in from the left side to a position you designate.

So how far can we push it? Just like in the grid layout, we can also divide this into 12 equal parts. This time, though, there is no gutter to think about and the only thing we need to think about it is the value in percent, not in pixels.

Time for some math again, just to show you how it was computed.

offset1: (1/12)*100=8.3333333%
offset2: (2/12)*100=16.6666667%
offset3: (3/12)*100=25%
offset4: (4/12)*100=33.3333333%
offset5: (5/12)*100=41.6666667%
offset6: (6/12)*100=50%
offset7: (7/12)*100=58.3333333%
offset8: (8/12)*100=66.6666667%
offset9: (9/12)*100=75%
offset10: (10/12)*100=83.3333333%
offset11: (11/12)*100=91.6666667%
offset12: (12/12)*100=100%

In plain English it means … if you want to indent an element by 8.33% then apply offset1, if you want to indent an element by 16.67% you apply offset2, if you want to indent an element by 25% then apply offset3, etc.

Simple, right?

As for the CSS, it will look like this:

[pastacode lang=”css” manual=”.offset1%20%7B%0A%09margin-left%3A%208.3333333%25%3B%0A%7D%0A.offset2%20%7B%0A%09margin-left%3A%2016.6666667%25%3B%0A%7D%0A.offset3%20%7B%0A%09margin-left%3A%2025%25%3B%0A%7D%0A.offset4%20%7B%0A%09margin-left%3A%2033.3333333%25%3B%0A%7D%0A.offset5%20%7B%0A%09margin-left%3A%2041.6666667%25%3B%0A%7D%0A.offset6%20%7B%0A%09margin-left%3A%2050%25%3B%0A%7D%0A.offset7%20%7B%0A%09margin-left%3A%2058.3333333%25%3B%0A%7D%0A.offset8%20%7B%0A%09margin-left%3A%2066.6666667%25%3B%0A%7D%0A.offset9%20%7B%0A%09margin-left%3A%2075%25%3B%0A%7D%0A.offset10%20%7B%0A%09margin-left%3A%2083.3333333%25%3B%0A%7D%0A.offset11%20%7B%0A%09margin-left%3A%2091.6666667%25%3B%0A%7D%0A.offset12%20%7B%0A%09margin-left%3A%20100%25%3B%0A%7D” message=”offset” highlight=”” provider=”manual”/]

Just as with the grid layout we designated these as classes because the premise is, we will most likely be using them several times on a page.

Is it possible to use the grid layout and the offset at the same time?

Absolutely! It all depends on your design needs. In the meantime, have fun experimenting with your web layout while using these. 🙂

Creating a web template on Adobe Dreamweaver CC

by Penny Angeles-Tan | Jul 24, 2016 | Web Tutorials

One of the advantages of using Adobe Dreamweaver is its template creation. While it is true that web templates could be made from scratch on notepad (on Windows), textedit (on Mac), notepad++, sublime text (which happens to be my favorite open source code editor. :D) etc. it does not offer the same ease of use that Dreamweaver does.

How are they different?

On other applications you create the code for the web template on one page then you copy and paste the code on all the pages you want the code to appear, in effect creating clones.
In Dreamweaver you create a web template file and then apply the template to all the pages you want the code to appear.
When you need to make any changes to a code that needs to appear in all pages you need to make the change on all the documents you want the code to appear in.
In Dreamweaver you make the change on the template file (*.dwt) and once you save the file it will ask you if you want to update all affected pages. You simply say YES or OK and the change is applied to all the affected pages.

But this can only happen if you edit the web template in Dreamweaver. While the dwt file is editable outside of dreamweaver any changes you make then will not affect the connected files because, well, they were not connected when you made the update.

How to create a web template on Adobe Dreamweaver CC

To be quite honest, creating a web template on Dreamweaver is simplicity itself. In my experience, the main reason why people mess it up is because:

they don’t pay attention and just click, click, click.
they’re in a hurry to get to the code, they forget about setting up the template first.

Truly, there is no need to rush because creating the template is actually a very fast process in itself. Let’s go through it now.

Set up your website first. This is a VERY IMPORTANT STEP. Not setting up your site first means compromising the integrity of your links. Once you have done so your screen will look like this. Note how the files tab now displays your website (web) in the dropdown and the local files also displays site – web. Note: On your file explorer/finder you will locate this in the my documents/documents folder
Go to File > New. This will open the New Document window. Again, allow me to reiterate that while my screencaps are those of a MacOS and the interface looks slightly different, I promise you the functions are basically the same.
Here is where there might be some difference in appearance between Mac and Windows.
1. On a MacOS it is as simple as making sure you are at NEW DOCUMENT then selecting HTML template then clicking CREATE.
2. On Windows there are more choices on the left, which could get confusing. Nevertheless, just make sure to select HTML template, also, then click on CREATE.
3. Note that in both cases you chose an HTML TEMPLATE. That is completely different from a regular HTML file. And you will see why and how in the succeeding screens.
Once you’ve clicked on CREATE Dreamweaver will now look something like this. If the window looks different, like it is a different color, for example, not to worry. You can change the appearance in preferences.
The next step will be to define the basic layout elements of your site in the body tag. We don’t need to put any content in, just define the elements – header, logo, nav, container, and footer.
Next we put in the editable region. This is what makes the HTML template a template. Make sure your cursor (that blinking thing that happens on the screen when you point your mouse to a specific spot) is located between the open and close div of the container. Then go to your menu bar and go to INSERT > TEMPLATES > EDITABLE REGION.
In the next dialogue box replace EDITREGION3 with the word content.
When you look at your code now it will look like this. Hey, look! You now have an editable region! 😀
Now press CTRL+S (on Windows) or COMMAND+S (on a MacOS) to save. This will open the SAVE AS TEMPLATE window. Change UNTITLED to the name of the template you want. For this exercise I will call mine template (all lowercase, please) then click on SAVE or simply press ENTER or RETURN.
In the Files tab you will notice that Dreamweaver created a Templates folder (yes, with a capital T … DO NOT RENAME IT!) and inside it is the file you just saved.