Flexi Websites http://flexiweb.biz Affordable Effective Fast Thu, 28 Nov 2017 16:21:46 +0000 en-US hourly 1 http://wordpress.org/?v=3.7.1 Pixels, Ems, and Rems http://flexiweb.biz/pixels-ems-and-rems/ http://flexiweb.biz/pixels-ems-and-rems/#comments Sun, 24 Nov 2017 20:18:27 +0000 http://flexiweb.biz/?p=206 Website design measurements are not inches or even centimeters. They are pixels, ems, and rems. Rems are new. When I opened the Twenty-Twelve CSS (styling) sheet, I was thrown by the new rem measurement. The first thing I did was delete all of them and used pixels or ems. That messed things up pretty well, until […]

The post Pixels, Ems, and Rems appeared first on Flexi Websites.

]]>
Website design measurements are not inches or even centimeters. They are pixels, ems, and rems. Rems are new. When I opened the Twenty-Twelve CSS (styling) sheet, I was thrown by the new rem measurement. The first thing I did was delete all of them and used pixels or ems. That messed things up pretty well, until I came to terms with rems.

Pixels

Computer monitors have resolutions in pixels. A screen can be 72 pixels per inch (PPI), 124, etc, etc. To size a font in pixels means it will appear as that number of screen pixels. It’s a constant that depends on the number of pixels on the screen. On my monitor has many pixels per inch, so in Microsoft Word, for example, I view documents at 125% in order to see what the page will look like when I print it. On websites, I often have to increase the font in order to read it.

In addition to different pixels per inch on different monitors, pixels are sized in absolute numbers, Each style on the webpage has to be given a specific number of pixels. Since the styles may take pages of code and pixel sizes range from 36 to 8, proportions of various elements were difficult to keep consistent. And if the size or proportions were changed, each of those numbers had to be replaced.

Then ems came along.

Ems

“Em” is a typographical term that refers to the height of a letter. Other measurements on a page of text, like line-height and the proportions of titles and headings, are measured in percentages of ems. On webs pages the size of an em is established by the website designer for the site or each section of a page or the site. If the base font size is set to 16 px other sizes are set a percentages of the base font size, the em. If the base font is 16px, a  smaller font might be set .75 em resulting in 14 px letters. When a base font size is increased or decreased, all the other sizes will change in relation to the base font size.

But they don’t. And there lies the problem.

Measurements, like colors, are established using “CSS,” which stands for Cascading Style Sheet. Styles change in relation to the style above them or in which they are nested in a “cascade.” If the text of a paragraph is set at .75 em, and a quote within the paragraph is set at .25em, the quote will be 25% of 75%, not 25% of the original 16 pixels. With long pages of complex CSS coding, this means sizes can change unexpectedly. Tracking down all the relationships between cascading percentages of ems can take a lot of time—unless you are mathematically inclined and can see the logical (or illogical) flow of percentages cascading on top of percentages. Designers are often not.

On top of that screen sizes began changing. One person would be using an iPhone and another a 24 inch monitor. One person a new retinal display and another a much older 72 ppi screen. Predetermined numbers meant that what was good design on one was unusable on another. Enter rems.

REMs

With the increasing variety of screen sizes and resolutions, programmers began working on “responsive design,” web pages that change according the size of the screen. What can be read on a desktop monitor may be difficult to read on a notebook and laborious on a smart phone. This required either different websites, at triple the design cost, or a web page that would change depending on the device it was being viewed on. Elements had to be able to move around according to the width of screen on mobile devices and the browser window size on desktops. A stable, non-cascading measurement became necessary.

Rem stands for “root em”. Rems work as logically as one expects ems to: in relation to the base font size of 16 px, not the size of the font immediately above it. Current version of all the mainstream browsers and mobil devices support rems, which means they can read them and render a page accurately. As a fall back, however, for those who are not using current browsers, sizes are still set in both pixels and rems.*

More on Rems

 

A good place to watch for updates on CSS changes is CSS-Tricks which features a blog, forums, demos, gallery, snippets of HTML and CSS, videos, and more.

A  (Life Saving) Rem Calculator

And here is a calculator from Foliovision to convert a pixel measurement to rem measurement. Type in your pixels measurement and hit Enter. You will get two results—one for font-size, width, height, margin, padding and the other for line-height.

Responsive Design Calculator: Pixels to REM

*Everyone should be using current versions of browsers. They have better security protecting your computer from worms and viruses and trojan horses, and can use more features on websites. And they are faster. Old version so Internet Explorer are particularly deficient. Those users should definitely upgrade to version 9 or change browsers.

 

 

The post Pixels, Ems, and Rems appeared first on Flexi Websites.

]]>
http://flexiweb.biz/pixels-ems-and-rems/feed/ 0
WordCount http://flexiweb.biz/wordcount/ http://flexiweb.biz/wordcount/#comments Sat, 23 Nov 2017 22:16:03 +0000 http://flexiweb.biz/?p=192 Another fabulous gem from the UK. WordCount is a ranking of the 86,800 most used words in the English language by frequency of use. Presented in the same format as a timeline—a beautiful timeline. Very minimalist and elegant. Perfectly simple. The design itself is worth the effort. You can also use it to analyze the vocabulary on […]

The post WordCount appeared first on Flexi Websites.

]]>
Another fabulous gem from the UK. WordCount is a ranking of the 86,800 most used words in the English language by frequency of use. Presented in the same format as a timeline—a beautiful timeline. Very minimalist and elegant. Perfectly simple. The design itself is worth the effort. You can also use it to analyze the vocabulary on your site—are the words you are using common, if understanding is your goal, or rare if sounding obtuse is  your goal.

From the site:

WordCount data currently comes from the British National Corpus (BNC), a 100 million word collection of samples of written and spoken language from a wide range of sources, designed to represent an accurate cross-section of current English usage. WordCount includes all words that occur at least twice in the BNC. In the future, WordCount will be modified to track word usage within any desired text, website, and eventually the entire Internet.

You can scroll the horizontal line of words or search for a specific word. Very interesting results. Then you can go to QueryCount that tracks the words that people search. Note: A screenshot of those words would be R-rated.

The post WordCount appeared first on Flexi Websites.

]]>
http://flexiweb.biz/wordcount/feed/ 0
Image Size for Websites http://flexiweb.biz/image-size-for-websites/ http://flexiweb.biz/image-size-for-websites/#comments Fri, 22 Nov 2017 19:02:46 +0000 http://flexiweb.biz/?p=161 When designing a website, I look again at the latest recommendations for image size for websites, at the best pixels per inch (PPI). This article from PhotoshopEssentials.com (dated only 2017) says, “there’s simply no such thing as a standard web or screen resolution, if your images are destined for the web, you don’t need to […]

The post Image Size for Websites appeared first on Flexi Websites.

]]>
When designing a website, I look again at the latest recommendations for image size for websites, at the best pixels per inch (PPI). This article from PhotoshopEssentials.com (dated only 2017) says, “there’s simply no such thing as a standard web or screen resolution, if your images are destined for the web, you don’t need to worry about image resolution at all!”

Photoshop Essentials 72 ppi Web Image Myth

The old standard resolution of 72 pixels per inch dates from 1984 with the first Macintosh.  Today’s screens are more like 100-150 ppi; for retinal displays, 300 ppi. Each monitor will show the pixels per inch that it is designed to show or a smaller number if the settings have been changed. Resolution only applies to print images.

A file with a resolution of 72 will be very small when printed and cannot be enlarged with a satisfactory result. The top dialogue box in Adobe’s Photoshop programs applies to images on the screen. The lower box, where the resolution and size in inches appears, applies only to printed images. Photograph set to 200 ppi will still be 200 ppi on screen whether the resolution is set to 72 or 300, and the file size will be the same. But the photo will print very small if set at 72.

The post Image Size for Websites appeared first on Flexi Websites.

]]>
http://flexiweb.biz/image-size-for-websites/feed/ 0
Typography: Modular Scale http://flexiweb.biz/typography-modular-scale/ http://flexiweb.biz/typography-modular-scale/#comments Fri, 22 Nov 2017 18:05:16 +0000 http://flexiweb.biz/?p=150 Modular Scale sponsored by Typecast is a handy tool for converting type sizes from pixels to ems and beyond. Enter the size of your text in pixels and translate it using one of almost a dozen perfect ratios and the pixels will be translated into ems, ems@16 and %of 13. If you are using rems, […]

The post Typography: Modular Scale appeared first on Flexi Websites.

]]>
Typecast Logo

Modular Scale sponsored by Typecast is a handy tool for converting type sizes from pixels to ems and beyond. Enter the size of your text in pixels and translate it using one of almost a dozen perfect ratios and the pixels will be translated into ems, ems@16 and %of 13. If you are using rems, this makes it a lot easier.

If you don’t understand any of this, you probably don’t need to. If you want an explanation, please don’t ask me. I have to look up the reasons every time I scale fonts. It’s complicated, arcane, and only of value if you code CSS.

Modular Scale by Tim Brown, Type Manager for TypeKit.

The post Typography: Modular Scale appeared first on Flexi Websites.

]]>
http://flexiweb.biz/typography-modular-scale/feed/ 0
Typography: The Dashed Shadow http://flexiweb.biz/typography-dashed-shadow/ http://flexiweb.biz/typography-dashed-shadow/#comments Wed, 20 Nov 2017 02:10:44 +0000 http://flexiweb.biz/?p=145 HTML and CSS for coding “dashed shadows” which I would call stripped shadows at Codepen. And they animate.

The post Typography: The Dashed Shadow appeared first on Flexi Websites.

]]>
CodePen Typography

Cosepen’s Dashed Shadow

HTML and CSS for coding “dashed shadows” which I would call stripped shadows at Codepen. And they animate.

The post Typography: The Dashed Shadow appeared first on Flexi Websites.

]]>
http://flexiweb.biz/typography-dashed-shadow/feed/ 0
Snazzy Maps http://flexiweb.biz/snazzy-maps/ http://flexiweb.biz/snazzy-maps/#comments Wed, 20 Nov 2017 01:49:04 +0000 http://flexiweb.biz/?p=137 Snazzy Maps is a collection of links to, you guessed it, Snazzy Maps. When a Google Map isn’t enough look a these: Pale Dawn, Midnight Commander, Avocado World, Neon World, and more. A map to match every color scheme.

The post Snazzy Maps appeared first on Flexi Websites.

]]>
Snazzy Maps is a collection of links to, you guessed it, Snazzy Maps. When a Google Map isn’t enough look a these: Pale Dawn, Midnight Commander, Avocado World, Neon World, and more. A map to match every color scheme.

The post Snazzy Maps appeared first on Flexi Websites.

]]>
http://flexiweb.biz/snazzy-maps/feed/ 0
Stet: A Writer’s Journal http://flexiweb.biz/stet-writers-journal/ http://flexiweb.biz/stet-writers-journal/#comments Tue, 19 Nov 2017 23:38:15 +0000 http://flexiweb.biz/?p=111 Stet’s full title is Stet: A Writer’s Journal on Culture and Technology. Many wonderful articles on how writing on for the web. It is published by Editorially: The Best Writing is Rewriting, a collaborative writing forum. STET’s goal is to demystify writing by drawing attention to how writing works. To that end, STET pairs good writing […]

The post Stet: A Writer’s Journal appeared first on Flexi Websites.

]]>
Editorially logo and tagline: The Best Writing is Rewriting

Editorially: The Best Writing is Rewriting

Stet’s full title is Stet: A Writer’s Journal on Culture and Technology. Many wonderful articles on how writing on for the web.

It is published by Editorially: The Best Writing is Rewriting, a collaborative writing forum.

STET’s goal is to demystify writing by drawing attention to how writing works. To that end, STET pairs good writing with notes that explain what makes writing good.

Topics on STET range across culture and technology, with special attention paid to the intersections between them. We aim to be as accessible and interesting to both practitioners and users of technology. You won’t find insider lingo here; you will find astute, well-written, and nuanced takes on subjects both timely and timeless.

The title pays homage to a discussion between writer and editor, in which one or the other marks a change “stet,” meaning “let it stand.” It suggests both discussion and revision, elements which we believe are at the heart of good writing.

The post Stet: A Writer’s Journal appeared first on Flexi Websites.

]]>
http://flexiweb.biz/stet-writers-journal/feed/ 0
Visual Content from Visual.ly http://flexiweb.biz/visual-content/ http://flexiweb.biz/visual-content/#comments Sun, 17 Nov 2017 15:00:16 +0000 http://flexiweb.biz/?p=93 The graphic design company Visual.ly specializes in  ”visual content,” information conveyed using a combination of images and language—infographics, videos, interactives, presentations. They pull together storytellers, number crunchers, designers, and animators. Their Infographics start at $999 and are worth every penny. They are delightful and elegant and effective—the magic word. Their front page is a continuous […]

The post Visual Content from Visual.ly appeared first on Flexi Websites.

]]>
The graphic design company Visual.ly specializes in  ”visual content,” information conveyed using a combination of images and language—infographics, videos, interactives, presentations. They pull together storytellers, number crunchers, designers, and animators.

Their Infographics start at $999 and are worth every penny. They are delightful and elegant and effective—the magic word.

Their front page is a continuous scroll of their work, which is amazing: Visual.ly

The blog entries explain data visualization: Visual.ly Blog.

Go to Visual.ly to be inspired and to have a fabulous infographic designed. Three examples   of staff picks:

English Grammar Verbs

Grammar: Verbs at Visually.
A Beginner

The Beginner’s Guide to Wine from  Visual.ly.
All Sci-Fi Spaceships Known to Man

All Sci-Fi Spaceships Known to Man at Visually.

 

The post Visual Content from Visual.ly appeared first on Flexi Websites.

]]>
http://flexiweb.biz/visual-content/feed/ 0
Simple Design, Short Names, No Ads http://flexiweb.biz/simple-design-short-names-no-ads/ http://flexiweb.biz/simple-design-short-names-no-ads/#comments Sat, 16 Nov 2017 18:15:14 +0000 http://flexiweb.biz/?p=77 Flexi Websites are simple, and becoming simpler. It takes time to learn to leave out what people don’t really need to know, but we’re getting there. Simplifying the Internet Today’s examples of simple are from a post by John Herrman on the BuzzFeed FWD website. It includes examples of simple design sites and the new attitude: “Welcome To The […]

The post Simple Design, Short Names, No Ads appeared first on Flexi Websites.

]]>
Flexi Websites are simple, and becoming simpler. It takes time to learn to leave out what people don’t really need to know, but we’re getting there.

Simplifying the Internet

Today’s examples of simple are from a post by  on the BuzzFeed FWD website. It includes examples of simple design sites and the new attitude: “Welcome To The New Internet: Simple Design, Short Names, No Ads”

These examples are publishing platforms directed at simplifying and redesigning blogs. John Herrman writes:

In recent months, at least four of the most interesting new startups — all either from or backed by people with deep roots in the current internet, including Twitter cofounders and many of the most prominent VCs in Silicon Valley — have been launched to, in some way, replace the internet. Not add to it, or change some part. These sites want to fix the whole thing: to remake comments, content, and updates with little to no encumbrance from the current web.

Simple Blogging Websites

 

 

The post Simple Design, Short Names, No Ads appeared first on Flexi Websites.

]]>
http://flexiweb.biz/simple-design-short-names-no-ads/feed/ 0
The Perfect Website http://flexiweb.biz/perfect-website/ http://flexiweb.biz/perfect-website/#comments Fri, 15 Nov 2017 16:03:54 +0000 http://flexiweb.biz/?p=101 Addressing the key elements of the perfect website as simply as possible is the basis for designing an affordable, effective, and fast website. The Key Elements Design: Testing on multiple browser capabilities, and screen sizes and resolutions. Valid HTML and CSS coding. Navigation: The ability to find information Usability: Including features that aid users and […]

The post The Perfect Website appeared first on Flexi Websites.

]]>
Addressing the key elements of the perfect website as simply as possible is the basis for designing an affordable, effective, and fast website.

The Key Elements

  • Design: Testing on multiple browser capabilities, and screen sizes and resolutions. Valid HTML and CSS coding.
  • Navigation: The ability to find information
  • Usability: Including features that aid users and avoiding those that irritate them
  • Content: Information in the language of your users.
  • SEO: Optimizing a site for search engines is more than improving your rankings, it’s about engineering your site so users can find it using a search engine — clear content and keywords.
  • Social Media: In May of 2011, US web users spent 53,457,259 minutes on Facebook. Nielson reports that people don’t like doing business on Facebook. But a personal website might be effective.
  • Tracking and Analytics: 80% of all websites used Google Analytics in 2011, but the important thing is using the data from your analytics to  learn what your users are reading and looking for on your site, and how they get there. That doesn’t mean being user driven. It does mean looking at what is important to you and measuring it against what your users are viewing. You may need to present yourself more clearly.
  • Footer: Don’t slack off at the footer. Repeat navigation links, include your copyright, and contact information, including your company name.

The infographic from Visual.ly:

The Anatomy of a Perfect Website

Explore more infographics like this one on the web’s largest information design community – Visually.

 

The post The Perfect Website appeared first on Flexi Websites.

]]>
http://flexiweb.biz/perfect-website/feed/ 0