The "Controlled" images do not match because a different image (and message and its background color) was specified for different width screens. More details below in "Images".
"Introductory" details (i.e., lots of words) are at the bottom - Web Development and GDH2 Layout.
...create a nicely framed box that can contain virtually anything and be internally formatted. They automatically add:
Each Theme has 5-8 different "styles" with different colors and fonts, especially "panel-heading" font (see "success" panel below for more).
There will be many more example where these same "class styles" are used.
Magnificent! This panel and all the other examples are contained inside one panel.
This panel has multiple columns, the panel examples below have rows and columns.
The "padding" that makes panel look so good hurts density.
Each theme defines the "panel-heading" font type, including color and size. As far as I can discover, this can only be changed 3 ways:
Desktop Screen Desktop Screen Desktop Screen Desktop Screen Desktop Screen
The viewing problem on small screens is readability. The examples below will illustrate the problem, and the cure.
Note: The rules for rows and columns in this example apply ONLY to Large & Medium screens. Each of these columns will display sequentially at full-width when the screen is Small or X Small. Otherwise it all would be unreadable.
Images are larger on the small screen.
Phone screens have higher pixel density (iPhone6 = 326dpi) than typical desktop screens (19" = 86dpi) used for screen capture, so the size is reduced to 25% - insufficient definition, but correct proportion .
Albert is larger - that's ironic!
Screenshots showing menu ("navbar") because it adapts well to the small displays. The "navbar" automatically adapts to larger/smaller screen width:
Only 1 "line" is used if the screen is wide enough to display everything - Everything is easy to read
Simply shrinking everything to fit on a narrow screen would not work - Impossible to read
If the screen too narrow for that, 2 lines display everything - Everything is easy to read
If the screen too narrow for that, the bar collapses to one line and a navigation icon (aka a "hamburger") appears in the top right corner. EASY to read, but "EVERYTHING" is 1 click away
Technical note: The collapsible navbar is very "fiddly" - the one above takes almost 100 lines of code, much of which is unique to the navbar.
Same "Classes" are also used in panels, buttons, background color, etc.
Heading Code = (div class="list-group" / a href="#" class="list-group-item active")
Text Code = (p class="list-group-item-text")
Observe Mouse Pointer when it hovers over
All dropdown menus toggle (click open, click close). Note "extras":
The "class style" of the "button" can also be changed
From the source, Glyphicons.com: "Glyphicons" are "a library of precisely prepared monochromatic icons and symbols, created with an emphasis on simplicity and easy orientation." They are primarily used in toolbars and navigation bars.
There are 600 basic Glyphicons. Here are a few random favorites:
Many can be full or empty - like star
and heart
Some icons are erratic: do you see "car" "cars" "taxi" "bicycle"?
(I don't)
← → ↓ ↑ are HTML supported but not (for me) as "left-arrow" etc.
But "circle-arrow" Glyphicons work and
The final few are "wrench" camera" "home" "notes-2" (clipboard) and "bomb"
Courtesy of w3schools.com
Change one "Theme" file to completely change the look of the site! More themes can be viewed at Bootswatch There are sample themes I found interesting in the Dropdown Menu in the Navbar at the top of this page.
In almost every case, I find the text and headings easier to read in the Flatly (and Darkly, a "twin" theme).
The elements shown are the ones I value most. There are specific elements in other themes that I prefer to Flatly, but "readability" is #1 on my priorities.
Identical to "Flatly", except the colors are roughly the inverse. This is my #1 favorite!
Frustration: But sometimes the default font color white doesn't work! (problem widthLL be solved!)
My initial Theme choice was "United." But I kept noticing some items were hard to read. I tried Theme "Flatly". So I did a comparison.
Flatly's default font is clearly easier to read...
...although not as effective against some background colors.
Win some, lose some!
After discarding "United", I compared "Flatly" to "Readable" (and ten others) in detail. "Readable - now there is a promising name for someone who values readability!
So what is the font? The first entry in the CSS "font family" for the Flatly Theme was "Lato". "Never heard of it!" Google to the rescue, in more ways than one. Quoted directly from the "Google Fonts" "Lato" page:
Lukasz Dziedzic
SIL Open Font License, 1.1
Lato is a sans serif typeface family started in the summer of 2010 by Warsaw-based designer Lukasz Dziedzic ("Lato" means "Summer" in Polish). In December 2010 the Lato family was published under the Open Font License by his foundry tyPoland, with support from Google.
Thanks, Lukasz!
I added boxes to highlight two significant areas. Both samples are 422px high (bigger fonts use more space).
"Readable" is easier to read, but it's like one of those "Large Print" novels - it's too much, it's distracting unless your vision requires it. "Flatly" has a better font and it does not overuse "bold." The winner is "Flatly"!
200% StrongTypography 123 &%@#
180% StrongTypography 123 &%@#
160% StrongTypography 123 &%@# - Italics
140% StrongTypography 123 &%@# - Italics
120% StrongTypography 123 &%@# - Italics
110% StrongTypography 123 &%@# - Italics
105% StrongTypography 123 &%@# - Italics
"default" StrongTypography 123 &%@# - Italics
Each Bootstrap Theme can have up to 8 "Style Classes", each with a defined background color and/or font color.
In all the cases below, unless specifically noted, there are no "headings" or "paragraphs" - but the "font-size" is 110%.
These items are wrapped in "paragraphs" - the spacing looks better.
Text background class = "bg-default".
Text background class = "bg-primary".
Text background class = "bg-success".
Text background class = "bg-info". (p class="bg-info")
Text background class = "bg-warning".
Text background class = "bg-danger".
The image below has the class "img-responsive" which causes the image to shrink as screen width shrinks.
The next image has NO sizing rules applied. Drag the browser narrower, and the only change to the images is the right side of the image protrudes beyond the "container" and then the right end gets cropped.
Theses are the colors that most interest me.
In all cases, the font = default size, text color = default/black/white (tweaked for good contrast)
Reds =LightCoral
Reds =Tomato
Reds =DeepPink
Reds =Red
Reds =Fuchsia
Reds =OrangeRed
Reds =PaleVioletRed
Reds =MediumVioletRed
Reds =IndianRed
Reds =Crimson
Reds =Brown
Reds =FireBrick
Reds =DarkRed
Reds =Maroon
The "purples" added complexity to sorting.
Blues = AliceBlue"
Blues = PowderBlue"
Blues = LightBlue"
Blues = LightSkyBlue"
Blues = LightSteelBlue"
Blues = SkyBlue"
Blues = CornflowerBlue"
Blues = DeepSkyBlue"
Blues = SteelBlue"
Blues = CadetBlue"
Blues = DodgerBlue"
Blues = RoyalBlue"
Blues = MediumSlateBlue"
Blues = SlateBlue"
Blues = BlueVioLet"
Blues = DarkslateBlue"
Blues = blue"
Blues = MediumBlue"
Blues = DarkBlue"
Blues = MidnightBlue"
I Most "oranges" intentionally excluded.
Yellows = Beige
Yellows = LightYellow
Yellows = LightGoldenRodYellow
Yellows = LemonChiffon
Yellows = Cornsilk
Yellows = Yellow
Yellows = PaleGoldenRod
Yellows = Khaki
Yellows = GoldenRod
Yellows =Gold
Grays = LightGray"
Grays = DarkGray"
Grays =LightSlateGray"
Grays = SlateGray"
Grays = Gray"
Grays = DimGray"
Grays = DarkSlateGray"
Grays = Black"
I built this web site to illustrate how a single web site can be designed to work well on any size screen, from phone to desktop and as a test bed for my personal education and future reference!
This was started as everything contained on one page for pragmatic reasons, but that will change.
HTML (HyperText Markup Language) is a style sheet language used for describing the look and formatting of a document written in a markup language. Initial release = 1996.
CSS (Cascading Style Sheets) elements form the building blocks of all websites and allows images and object s to be embedded and can be used to create interactive forms. Initial release = 1993, encouraged by the World Wide Web Consortium (W3C) to use for style since 1999.
HTML was difficult to use, CSS was incredibly complicated. Too much code (as of this moment, this page has 1,000 lines of code and CSS could be 10X larger).
And then smart phones! Smaller screens required a completely different design. Initially, two sets of code were written for each page (a maintenance nightmare!), then CSS masters developed convoluted methods to adapt web page content for smaller screens without requiring two sets of code.
"Bootstrap" is a new web development system developed in 2011. It was updated in 2013 (bootstrap 3), "moving to a mobile first approach and using a flat design" (quoted from Wikipedia).
"Mobile First" means start the design for the XS (extra small screen, like small phones). Then adapt to larger screens.
Bootstrap offers hundreds of predefined components which can be used to assemble a web page design: navigation bar, title box, buttons, typography, tables, forms, progress bars, panels, and thumbnails. Each element can have pre-defined colors, borders, text font, etc.
Bootstrap uses CSS (Cascading Style Sheets) and generates the final HTML code for all web browsers.
Page design usually starts with a wireframe sketch that shows where different elements will be located.
The above wireframe shows sufficient detail to predict how the blocks will be displayed on any size screen.
"Gobbledygook text" is used as filler in mocking up many sections. A "block" of text gives a more realistic idea of what that section might look like when it's filled with "real" content. But "real" text is distracting; most people start actually reading it, no matter what it's about.
More than 4,600 people dead. Over 9,000 injured. Eight million affected across Nepal. One million children urgently in need of help. Those are the startling numbers that indicate the scale of the devastation from the huge earthquake that struck the Himalayan nation on Saturday.
Latin makes it less distracting, usually. It's used in lots of places, like...
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
First Layout
UGH! Too may words at top. MORE PIZAZZ! Moved top two panels to bottom (2 minutes) and added new Panel with graphic showing "website works on any screen."
Too many topics on one page - 15 desktop screens deep! Easy to get lost. Could I add column on left containing a "page directory" with links?
Technical description; (don't bother unless you're curious)
Full width design. Looks good.
Links on left design. Works better. Looks good (maybe better?). The "content" is squeezed 9% (1/12 of screen width).
Copyright 2015 by G. Douglas Hobkirk II (GDH2)
Acton, Massachusetts, USA
original GDH2.com design for 15 years (only used for email)