CSS Archives • Tips and Snips: Creative Website Hacks for Creative People

-How your personal brand makes the difference

Other articles you might like:

-Use a customer thank-you page to avoid missed opportunities

About the author

diane-author-300x181 The correct order for using Bootstrap tags

I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

Reading time: 2 min

CSS

Make your site mobile friendly with media queries

December 18, 2021 by Diane Metcalf, M.S.I.T. No Comments

“If you think responsive’s simple, I feel bad for you son. We got 99 viewports, but the iPhone’s just one.” -Josh Brewer, March 10, 2010.

For me, “responsive design” means creating the right experience for the right device. Media queries allow us to do that.

By using media queries, we can target CSS, based on particular screen sizes (or device-orientation or other property) and specifically style the content to display in a precise way. This can be quite a daunting feat though, not only because of the numerous devices out there, but because new devices of differing sizes will continue to be developed.

With this in mind, developers have begun to move away from using device-specific breakpoints in our CSS, rather, we’ve stared using content-specific breakpoints, meaning that we design media queries for the specific project at hand. The size of the device doesn’t really matter as long as we’re using content focused breakpoints.

If you want to read more about device specific breakpoints, Justin Avery talks about the pitfalls of using them in this interesting article.

How to write a media query:

Media queries are “if” statements. For example, “if” this is true, then “do” this.

Media query syntax
Media queries begin with @media, followed by a media “type” (ie: screen) and “expressions” that check for certain conditions (ie: min-width).

The expression is inside parentheses; the value of the expression is the device “breakpoint”:

For example:
@media screen and (min-width: 1200px) { }

The CSS style that will be applied when these conditions are met, is going to be inside of the curly braces.

Media Types:

Here are some common media types to use in media queries:
all –All devices

print-Used for documents viewed on screen in print preview mode.

screen-Used primarily for smartphones.

Expressions:

Some examples:
width-The width of the current window
height-The height of the current window
device-width-The width of the device
device-height-The height of the device

So…..for example, if we want to make the background color to be red when viewed on a desktop computer, we’d write:

@media screen and (min-width: 1200px) {
.classname{
background-color: red;
}
}
The media query says that when the screen size is a minimum of 1200px (so…it has to be 1200px or more) that the background will be red. When viewed on a smaller screen (smaller than 1200px) the background will be whatever color is already styled in the regular CSS.

In the next example, an image will not display at all on any devices that are smaller than 991px wide (have a maximum width of 991px) but the image will display on wider screens (bigger than 991px):

@media(max-width:991px) {
.classname-img{
display:none;
}
}

A couple of things to keep in mind:
Mobile First Media Queries have become the standard for media queries. They make pages display faster on smaller devices, and Google actually takes this mobile responsiveness into consideration when ranking websites. (Since 2015, non-mobile friendly websites get ranked lower in Google search results)

IMPORTANT:
Using a “mobile first” media query means that small screen styles are already in the regular CSS and as the screen gets larger you override those styles with some new style, using “min-width”.

In the following Mobile First example, the background is red on smaller devices until the device width reaches 600px and larger; and then the background becomes green:

Regular CSS
.classname{
background-color: red;

}

This media query will change the background to green on larger devices (a minimum width of 600px):

@media (min-width: 600px) {

.classname{
background-color: green;
}
}

So, devices with a width of 600px and more will display a green background. The media query is not actually taking effect until the page is viewed on a larger screen. Get it?

A word about Desktop First media queries
With “desktop first” it’s the opposite approach: the large screen styles are in your regular screen CSS and as the screen gets smaller you override those styles with different ones, using “max-width”. I’m showing this as an example of what NOT to do:

Here, the background is red on larger screens, and when the the screen width is smaller (less than 600px,) then the background becomes green:

Regular CSS
.classname {
background-color: red;
}

This media query will change the background to green on smaller devices:
@media (max-width: 600px) {
.classname{
background-color: green;
}
}

Now here’s a list of the typical breakpoints, because they’re still very useful:
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {…}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {…}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {…}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {…}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {…}

And here’s a downloadable PDF of prewritten CSS for laptops, phones, tablets and even wear-ables. (from CSS-Tricks, Media Queries for Standard Devices by CHRIS COYIER, 2017)

Enjoy! 🙂

Questions?

Other articles you might like:

-Use a customer thank-you page to avoid missed opportunities

-6 Tips to Make Your Blog Post SEO Friendly

About the author

diane-author-300x181 Make your site mobile friendly with media queries

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

Reading time: 5 min

CSS•Design•HTML

6 Tips for Using Bulleted Lists for Online Content

Lists emphasize important points and help readers follow a sequence

March 5, 2021 by Diane Metcalf, M.S.I.T. No Comments

Using vertical, bulleted lists is a very effective way to make crucial points stand out, because bullet points are easy to scan and understand. Research shows that vertical lists attract a readers’ eye, and that readers of digital content prefer writing that’s formatted for easy scanning, because it allows them to skip through large chunks of text and get to the stuff that interests them.

There are several formatting methods that can achieve the goal of breaking up dense paragraphs of text; there’s bolding, line-spacing, indenting and even color-coding. But I think bulleted lists are the most powerful method to encourage reading content on a digital device.
Web readers typically want to absorb content quickly, and bullets are perceived as “shortcuts” to the concise and important content they’re looking for. In usability studies, readers gravitated towards bulleted lists first.

In the following examples, you can see that number 2 is much easier and faster to read, because the important points are clearly listed on short, individual lines:

Example 1
Our Secret Sauce: We limit our current project-load to three clients, so we can do our best work and be available to you to provide personal attention. We believe
You’ll get one-on-one personal support throughout the entire design and development process. You’ll learn “website anatomy” so you’re better equipped to ask questions and give feedback. We use plain language, not technical jargon and you’ll ALWAYS know what’s happening with your project at any given point.
Your contract will explain exactly what’s included and what to expect. You’ll have your own project timeline, and you’ll know the cost, upfront.

Example 2
Our Secret Sauce

• Projects are limited to three at a time, so we do our best work
• We educate & empower our clients by teaching as we go
• You get one-on-one personal support throughout
• We use plain language, not technical jargon
• Project management tools allow us to collaborate easily
• Your contract explains what’s included and what to expect
• You know the cost and timeframe, upfront

Studies also show that the amount of vertical space used in a list, is irrelevant. Readers don’t mind scrolling if they’re getting the info they want.
An interesting research finding shows that websites perceived as “inviting” often use bulleted lists, making content easier to read and understand. Users are more likely to scroll through a website containing lists than a website that mainly consists of text-heavy paragraphs.

6 Tips for Using Bulleted Lists

1. Write bulleted lists of similar length and related items.
Items in a bulleted list should include related elements of similar importance. This makes the shape of the list easy on the eye; it includes lots of white space.

2. Don’t use numbered lists unless the sequence or item-count is important.
Numbered lists are used when items occur in a specific order, for example, steps in a recipe, or a “top 10” list. Or like this list of 6 tips!
Numbered long lists can get confusing. In one particular study, people mistakenly thought they had to complete all of the steps in a numbered list, but they really only needed to complete just one. Don’t number if your list makes sense without it.

3. Be consistent in phrasing and grammar.
Each bulleted-list item should start with the same part of speech (i.e.: verb or noun) and all bullet points should be either fragments or complete sentences. Don’t mix them together.

4. Be consistent with formatting.
Use the basic rules of capitalization and punctuation:
• If the list items are sentences, capitalize the first word and use correct ending punctuation.
• If the list items are fragments, don’t use end punctuation.
• For hierarchical lists, use a different style of bullet for each group, for easier reading and comprehension.

5. Use discerning keywords at the beginning of each line and avoid repetitive phrasing.
Omit parts of speech like “the” and “a”. Use action-words at the beginning of the line.

6. Introduce the list with a clear, descriptive sentence or phrase.

The introduction tells the reader what the list is about or why it’s important. The intro doesn’t have to be a complete sentence if each item in the list makes sense on its own.

To make a bulleted list in HTML:

1. An unordered (not numbered) list:

starts with the <ul>tag, and each item within the list starts with an <li>tag. Remember to close the tags.

The list items will be marked with “bullets” by default. You can style the bullets by using the CSS list-style-type:

and choosing one of these properties: disc, circle square, or none.

Example:

<ul style=”list-style-type: disk”>

<li>Bananas</li>
<li>Oranges</li>
<li>Apples</li>

</ul>

Looks like:

Bananas
Oranges
Apples

2. An ordered list

starts with the <ol>tag and each item within the list starts with an <li> tag. Remember to close the tags.

The list items will be marked with numbers by default. You can style the bullets by using the CSS type attribute:

and choosing one of these properties:

type=”1″ The list items will be numbered with numbers (default)
type=”A” The list items will be numbered with uppercase letters
type=”a” The list items will be numbered with lowercase letters
type=”I” The list items will be numbered with uppercase roman numbers
type=”i” The list items will be numbered with lowercase roman numbers

Example:

<ol type=”1″>
  <li>Bananas</li>
  <li>Oranges</li>
  <li>Apples</li>
</ol>

Looks like:

Bananas
Oranges
Apples

3. Description lists

A description list is a list of terms, with a description of each term.

The <dl>tag defines the description list, the <dt> tag defines the term (name), and the <dd>tag describes each term:

Example:

<dl>
  <dt>Bananas</dt>
  <dd>- Sweet, yellow skinned fruit</dd>
  <dt>Oranges</dt>
  <dd>- Sweet, orange skinned fruit</dd>

<dt>Apples</dt>
<dd>- Pungent, red-skinned fruit</dd>
</dl>

4. Nested Lists:

List can be nested (lists inside lists):

Example:

<ul>
  <li>Bananas</li>
  <li>Oranges
  <ul>
      <li>Naval Oranges </li>
      <li>Mandarin Oranges</li>

<li>Blood Oranges</li>
    </ul>
  </li>
  <li>Apples</li>

<ul>
<li>Red Delicious Apples</li>

<li>Granny Smith Apples</li>
</ul>

</ul>

Have fun trying these yourself!

Questions?

Other articles you might like:

-Use a customer thank-you page to avoid missed opportunities

-6 Tips to Make Your Blog Post SEO Friendly

About the author

diane-author-300x181 6 Tips for Using Bulleted Lists for Online Content

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

Reading time: 7 min

Bootstrap•CSS

Rethinking the mobile Hamburger Menu

Photo of 2 kinds of small device hamburger menus

January 27, 2021 by Diane Metcalf, M.S.I.T. No Comments

The hamburger menu is an aesthetic that was primarily developed to display web-pages on small devices to keep them “cleaner-looking”. While it provides an easy, fast navigation solution that is consistent across mobile sites, the hamburger menu still uses valuable space. Especially on very small screens.

Here’s a Bootstrap tutorial to change the look and location of the hamburger menu to get it out of the way:

I’m using my own site, Imageandaspect.com, as an example:

Bootstrap Navigation

I’m using the default bootstrap navigation code found here

The Brand and toggle items get grouped together here for better mobile display:
<div class=”navbar-header page-scroll”>

My “hamburger menu” will be a rectangle that displays the word “Menu”:
span class=”sr-only”>Toggle navigation/span>Menu/button>

Here’s where I add my brand, Imageandaspect, to the upper left of the navigation bar:
a class=”navbar-brand” href=”index.html”>IMAGEANDASPECT/a>/div>

Now, collect the nav links, forms, and other content for collapsing/toggling:

div id=”bs-example-navbar-collapse-1” class=”collapse navbar-collapse”>

Add the navigation links to an un-ordered list:

<ul class=”nav navbar-nav navbar-right”>
<li><a href=”philosophy.html”>Philosophy</a></li>
<li><a href=”concierge.html”>Personal Services</a></li>
<li><a href=”products.html”>Products</a> </li>
<li><a href=”gallery.html”>Gallery</a></li>
<li><a href=”blog.html”>Blog</a> </li>
<li><a href=”contact.html”>Contact</a></li>
</ul>

Notice that the data-target “#bs-example-navbar-collapse-1 and the div id=”bs-example-navbar-collapse-1 must be exactly the same name. You can change the default name, but it must match in both places or the collapsed menu will not open.

The CSS:

I’m using Bootstrap 3 and the bootstrap CSS available here: https://getbootstrap.com/docs/3.3/css/

Customization:

Make customizations in your own CSS document. Not a good idea to change the Bootstrap CSS.

To change the text color to Aqua:

.navbar-custom .navbar-header .navbar-toggle {
color: #57BBBF;
font-weight: normal;
font-size: .4em;
}

NAVBAR BRAND TEXT SIZE AND COLOR CUSTOMIZATION:

.navbar-custom .navbar-brand {
font-weight: normal;
font-size: 1.em;
color: #FFF;
}

Makes nav bar transparent on bigger screens, displaying white nav links:

.navbar-default {
background-color: transparent;
color: #FFFFFF;
}

Use a media query to remove the transparent background and change it to a color for easier viewing on smaller screens:

@media screen and (max-width:1024px) {

.nav li a {
color: #57BBBF;
background-color: #002633 !important;
}

}

Make sure to add the bootstrap scripts jquery.min.js and bootstrap.js to make the collapsed toggle nav work correctly. I add it right before the closing body tag, for faster page loading.

(See my website: Imageandaspect.com as an example of how the navigation displays differently on different sized devices)

Questions?

Other articles you might like: