Author Archives: Sharon Villines

About Sharon Villines

I am an artist and writer. This is a perfect combination of skills for designing websites because I can help you with writing and information structure as well as design. I live in Washington DC but with the internet, location isn't important. I prefer to communicate by email. It allows me to think about your questions and investigate issues before responding. And there are no time-zone issues. It doesn't matter if you are just waking or I'm sound asleep when questions arise. Feel free to contact me with any questions: sharon@sharonvillines.com

Newsletter Blogs

Newsletter blogs are a much better choice for small organizations than printed or even emailed newsletters.  I explain more about blogs below but they are more like broadcasting than printing.

Newsletter Downsides

Printed newsletters are normally planned for a certain size and length and with special features for each issue—a calendar of events, a cute quote, a joke, a feature story, news items. All these have to come together at once and get to the printer in order to meet deadlines for timely publication. Then they have to be distributed. Mailing is expensive. Address changes difficult to maintain.

An email newsletter with a predetermined format will still have to meet the same content expectations, plus being prepared by someone who understands the format and the software. Most newsletters, distributed in print or by email, have become uneconomical and of questionable value given the amount of time, effort, and coordination they take to produce.

What Exactly Is a Blog?

Blog is short for Web Log. Blogs began as online diaries in which writers posted their thoughts and opinions with discipline and openness. A serious blogger wrote every day and was followed by other bloggers. For many of the early bloggers, who were writing before the easy to use Web existed, it became both a religion and a science.

A newsletter blog post is like posting a news item on a bulletin board or to a news feed than preparing a newsletter for publication. It has a singular focus and is relatively brief. (Mine are typically too long!) Posts are added to a website in chronological order but can be searched and sorted in multiple ways, like notecards.

A Blog Post Is Not an Email Message

A blog post is more formal than an email message because it is intended for a wider audience and for “posterity.” It becomes part of the historical record, not just an announcement or press release that will be thrown away. They can be published on a schedule or spontaneously. A calendar of events for the next month might be posted on a regular date, and posts announcing births or other happenings as they occur. Posts on special topics can be posted when completed—Planning a Garden, New Lamps, etc.

One post doesn’t wait until others are ready.

Blogs Convey Continuity

A blog post is part of a continuous process. Each post is a reminder of the last and the next. That continuity is established more easily than with a newsletter because posts can be read quickly and thus can be more frequent. Each post is complete within itself but the blog is “never ending.” Its past is always present.

Blogs Can Be Spontaneous

With the ability to post frequently, not all information needs to be collected before announcing an exciting event. Who wants to know about a baby born a month ago when it can be known within 24 hours? So what if there is no name yet? It can be announced when available. Distribution is essentially free so three short posts can be sent as easily as one long post.

Frequency can be irritating, but sometimes it is a welcome virtue.  A blog post can be quickly written and distributed with little extra cost beyond maintaining a website (which you should already be doing.)

 Wordpress Software

I use WordPress because it is free, well-designed, constantly updated, and used by millions of  other people worldwide. It can be used on your own website under your own domain or on the WordPress.com website where WordPress will host a blog for you. It is easy to learn by anyone familiar with word-processing program and the web.

What the software does is set up a framework for writing and organizing posts. Think of each news item as an individual snippet. WordPress helps you organize each snippet chronologically and by author, title, date, subject, keywords, etc. It includes a search function so the snippet can always be found by searching any of those elements. It keeps track of subscribers so you can distribute these news items as they are published or weekly or monthly. Any schedule you choose. It does many more things but in terms of replacing printed newsletters with newsletter blogs, those are some of the main advantages.

 

 

Pixels, Ems, and Rems

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.

 

 

WordCount

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.

Image Size for 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.

Typography: Modular Scale

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.