Tips and Snips: Creative Website Hacks for Creative People
ImageandAspect
Philosophy
About
Demos
Contact
Privacy
Terms
Subscribe
Tips and Snips: Creative Website Hacks for Creative People
  • ImageandAspect
  • Philosophy
  • About
  • Demos
  • Contact
  • Privacy
  • Terms
  • Subscribe
Browsing Tag
css
CSS

Make your site mobile friendly with media queries

Google Mobile First
September 18, 2020 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?

[email protected]

My Contact Page

Other articles you might like:

-Using images: Tips to improve your SEO rankings

-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 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.

Read more

Reading time: 5 min
CSS

CSS Property Names (reference guide)

photo of line of CSS code with components properly labeled
May 4, 2020 by Diane Metcalf, M.S.I.T. No Comments

CSS consists of selectors and declaration blocks. The selector indicates the HTML element to be styled. The declaration block contains one or more declarations that are always separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.

Interested in knowing the CSS Property Names?

Here’s a comprehensive downloadable PDF of previously published CSS property names, that I aggregated for quick reference.

Questions?

[email protected]

My Contact Page

Other articles you might like:

-How your personal brand makes the difference?

-Using images: Tips to improve your SEO rankings

-5 Tips to Stay Sane when Working from Home

 

About the author

diane-author-300x181 CSS Property Names (reference guide)

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.

Read more

Reading time: 1 min
CSS

How to give your FORMS structure (without tables)

Photo of a structured looking form with text beside the input-fields, without using tables
April 5, 2020 by Diane Metcalf, M.S.I.T. No Comments

How to create a structured looking form with text beside the input-fields, without using tables.

Here’s how to do it with CSS:

Example 1:

In this example, I’m going to simply create a standard form with no CSS:

HTML:

<body>

<form>
First name:
<input type=”text” name=”firstname”><br>
Last name:
<input type=”text” name=”lastname”>
</form>

</body>

It displays like this:

before-1-300x67 How to give your FORMS structure (without tables)

As you can see, the colons and the text fields are not aligned.

Now we’ll use some CSS to get it to look the way I want.

Example 2:

First, I create a class for the text. I’ll call it “fieldname” so I can easily remember it and  it’s pretty self-evident what it’s purpose is.

Here’s the new code:

HTML:

<body>

<form>
<div class=”fieldname“>First name:</div>
<input name=”firstname” type=”text”>

<br>

<div class=”fieldname“>Last name:</div>
<input name=”lastname” type=”text”>
</form>

</body>

Now we use CSS to style the fieldname class. We float the text (fieldname)  to the left, and align the text on the right, so the colons are aligned one above the other. Then let’s give it a decent width so all the text characters fit on one line, and we’ll add some margin between the text and the input-field, to make everything more visually appealing.

CSS:

.fieldname {

float: left;

text-align: right;

margin-right: 15px;

width: 100px;

}

Here’s what it looks like now:

after-300x66 How to give your FORMS structure (without tables)

Much more attractive! And all without using tables!

Questions?

[email protected]

My Contact Page

Other articles you might like

-How your personal brand makes the difference

-Using images: Tips to improve your SEO rankings

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

 

About the author

diane-author-300x181 How to give your FORMS structure (without tables)

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.

Read more

Reading time: 2 min
Bootstrap•CSS

How to make a circular image

photo of a circular image
March 21, 2020 by Diane Metcalf, M.S.I.T. No Comments

Ever wonder how to get an image to display as a circular shape rather than a square or rectangle?

Get the Bootstrap Framework Here

Here’s how!
We’re using the bootstrap “.img-circle” class:  class = “img-circle”

In your HTML:

1. Put the path to your image where you want it to appear, and remember to add the bootstrap class “img-circle”:

<img src=”your_image_name.jpg”  alt=”description here” class = “img-circle” class=”yourclassname”>

2. Download and save the bootstrap stylesheet- bootstrap.min.css -to your root directory.

3. Use CSS to make it circular and add other styling:

  • Create a class name that makes sense to you and add that class to the image as well.
  • Add some additional css to style it (border, margin, width, height). You can make the image more or less transparent, by using the “opacity” property and changing its’ value. See below-

.yourclassname {
border: 10px solid transparent;
margin-bottom: 25px;
width: 80%;
height: 80%;
opacity: 0.7;
}

4. Using the same class, add other styling, for exampe, make a light gray border appear when the image is hovered.

.yourclassname:hover {
border-color: #f1f1f1;
}

n your HTML:

1. Put the path to your image where you want it to appear, and remember to add the bootstrap class “img-circle”:

<img src=”your_image_name.jpg”  alt=”description here” class = “img-circle” class=”yourclassname”>

Other articles you might like:

-How your personal brand makes the difference

-Using images: Tips to improve your SEO rankings

-5 Tips to Stay Sane when Working from Home

 

About the author

diane-author-300x181 How to make a circular image

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.

Read more

Reading time: 2 min
Page 1 of 3123»

Find Topics

 Image and Aspect is a solution-based web presence development service for creatives, entrepreneurs and solopreneurs. We create impactful online presences that showcase your talents, skills, values & style, while focusing on influencing, engagement & connection.

 

It’s a collaborative process; we use streamlined project-management & communications tools so you’ll always know what’s happening with your project. And by adding personalized service, you get  one-on-one support. We want you to feel equipped, educated & empowered to ask questions & make decisions about your web presence & web platform.

 

Tips and Snips was born from the desire to give back; to support anyone who has an interest in learning the art and science of  web design and coding.

 

Thanks for your interest!

~Diane Metcalf, MS

Image and Aspect logo

Connect with me on Twitter!

Follow @MetcalfDiane

Categories

  • Blogging
  • bootstrap
  • CSS
  • Design
  • Entrepreneurs and Creatives
  • HTML
  • Job Seekers
  • Marketing
  • security
  • SEO
  • Thoughts
  • WordPress

Recent Posts

  • Why you need a customer thank-you page December 23, 2020
  • 10 things to do after creating your site November 8, 2020
  •  7 web design principles you should know October 15, 2020
  • Make your site mobile friendly with media queries September 18, 2020
  • Create a tiny browser icon for your site ID August 19, 2020

Older Posts

  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018

Tags

  • Blogging
  • bootstrap
  • CSS
  • Design
  • Entrepreneurs and Creatives
  • HTML
  • Job Seekers
  • Marketing
  • security
  • SEO
  • Thoughts
  • WordPress

Image and Aspect on Instagram

recent posts

  • Why you need a customer thank-you page
  • 10 things to do after creating your site
  •  7 web design principles you should know
  • Make your site mobile friendly with media queries
  • Create a tiny browser icon for your site ID

ImageAndAspect.com © 2020 Designed by ImageandAspect

 
This website or its third party tools use cookies to enhance our experience. More info CLICK HERE.