Tag: web design

I started my career as a web developer and still love dinking around on my websites, using Responsive Design, Mobile First Design, and Bootstrap. I do all my styles in Sass. I am no longer a JavaScript expert but I get by with jQuery. Someday I’ll learn React. I like making responsive web sites that work perfectly on any browser or device.

My design philosophy

~ Kristen Ankiewicz ~ Leave a comment

It occurred to me, as I’m spending so much time fixing up ankiewicz.com and making new pages, that I don’t have my design philosophy recorded anywhere. Well, here it is.

My design aesthetic is all about accessibility, legibility, and simplicity. I believe every page should be responsive and easily visible on mobile devices. Pages should follow the principles of the Web Content Accessibility Guidelines (WCAG), which is a set of standards to improve accessibility. An example of a WCAG recommendation is to include ALT tags with every image, because you never know who will be using a screen reader. Wikipedia explains this well.

I also code and design using mobile first design principles. Mobile first is all about designing for smaller devices, which have more constraints than desktop, and then adding more complexity as you need it. Mobile first implies not only certain design principles—fat buttons, easy to read text, lots of whitespace, big and obvious calls to action—but also how it’s coded. In my stylesheet, the mobile styles are the default and the first thing in the file. Styles for larger devices are kept inside media query blocks as you travel down the stylesheet from small ( less than 300px) to large (more than 1200 px). It’s about designing for mobile first, rather than designing for giant desktops and then forcing an inadequate mobile design on top of that. Here are two good articles on on mobile first design:

I also favor progressive enhancement over graceful degradation. Progressive enhancement is essentially a subset of mobile first design. It emphasizes core web content first, then adding more layers of presentation and technology as the browser or bandwidth allows. Wikipedia explains it well.

Legibility is extremely important to me. I make sure to have large, sufficiently high-contrast text in a web-friendly font on all devices. Blocks of text max out at 700 pixels wide for easy scanning. I use a nice big fat serif font for reading, and a sans-serif font for titles.

You might notice that the text treatment on my web pages is similar to that of Medium. No coincidence. Medium has spent a lot of resources figuring out what makes a page nicer to read, so I figure they have already done their homework.

If you play around on ankiewicz.com, you may notice that big headers and spacious bullets on mobile devices will compress into tidy paragraphs when the screen resolution allows it. I bake in more whitespace on mobile devices for anything requiring a finger press.

I believe in using pure CSS wherever possible. Native CSS performs better than JavaScript, so I avoid making design changes using JS. For efficiency I make heavy use of the cascading in Cascading Style Sheets.

There are some glaring problems on my sites that I need to fix. I haven’t customized the imagery on my site for smaller devices. I have not optimized all of my JavaScript for performance, or minified my stylesheets and scripts. I don’t have non-script options for pages that rely on JavaScript. Oops. Sometime soon.

No discussion about design would be complete without discussion of color.
I believe in the emotional impact of a good color palette. I try to make use of color on every page I design. I’ve even gone so far as to make a JavaScript palette-generator, because I believe there are rules dictating which colors will look nice next to one another, and those rules can be programmed.

What I haven’t figured out is: Why does a pop of yellow work on one palette but not another? Why are super-saturated colors (especially green and red) so displeasing to me? Has there ever been a color as ugly as Lime? Is it possible to programmatically design not just a good, but a great palette, every time?

I believe everyone should know what their personal brand is. I haven’t quite nailed down mine, but I’m getting closer. This much I know is true: blueish-greens are my favorite colors, I prefer to see them near ruddy brown or dark orange, and calls to action should be big, bright, and obvious.

 

I’ll close out this post with one of my favorite watercolors:

watercolor by Kristen

Color sorting is an interesting problem

~ Kristen Ankiewicz ~ Leave a comment

color palette for #336699

I love exploring colors, color theory, and color spaces. I have made several color sorting and selecting tools, including a color palettes page.

One of the challenges I encountered is that I want to show a color palette derived from a base color. Since every proper color palette should be sorted by hue, and I am not hand-picking these colors, I need to sort the resultant color set programmatically. The problem is that my current hue-sorting function doesn’t sort related colors the way I expect. You can see the sorting on this page. Notice how there’s a nice long line of perfectly-sorted greens, and then the one oddball green at the end? What’s up with Lime anyway?

I know where I went wrong. I copied the color-sorting code from elsewhere on the internet. The code, which can be seen here, does a two-fold sorting process. First it clusters colors together in a first pass, and then sorts them again on a second pass, by determining the distance between colors.

There are always outliers. The outliers are colors that are not close to anything else in my dataset, so they don’t get sorted with the rest. I haven’t figured out how to address these outliers in a visually pleasing way. The code is also so baroque that I have a hard time getting into it the weeds of it.

I have written my own color-distance functions which do simple arithmetic on the original R, G, and B values. This code can be seen here. The function limits the R, G, B values to a short numerical range. It works–it produced the palette shown above–but I am not sure if it can be scaled to a generic color-sorting function. It feels a bit hokey.

I also found this which seems to do the job, but it uses jQuery. I could rewrite it in vanilla JavaScript if I find that it gets the job done.

One of my goals is to have a perfectly fast, library-free page that puts together visually pleasing sets of color on the fly. I think it’s possible.

Let me know your thoughts on color sorting, colors, or code.

Color sliders and more fun with JavaScript

~ Kristen Ankiewicz ~ Leave a comment

More fun with JavaScript! I made a color sliders page by connecting my revised color thesaurus to a new improved interactive hex to rgb converter. You can still see all the details of the colors, such as names, hue, saturation, brightness, red green blue values, hexadecimal code, and little stories about the colors, but the interface is all new and the code is cleaner. I removed jQuery from the JavaScript to speed up page performance, added custom sliders rather than an off-the-shelf color picker, and improved the data/definitions. I still need to test it on Internet Explorer. I may retire the original color picker once I do that.


hex and rgb color sliders

Projects lost in time

~ Kristen Ankiewicz ~ Leave a comment

A friend of mine tweeted about how he was first introduced to the web years ago by some illustrated dream pages I published. His thread of tweets, in his second language, is heartwarming. It makes me nostalgic for the early web, before social media turned huge chunks of the internet into a walled garden.

I should find those pages and publish them again. Last I saw them they were on a domain I long ago retired. I keep everything digital I’ve ever made, so I have them somewhere. If I find them I’ll put them on this blog. They were illustrated with ink and line drawings.

In the same vein, I have spent some time updating my website with paintings that I no longer own. Here’s a thickly sculpted painting I like a lot, despite not having the physical version anymore. I used tons of acrylic media, which dried up and left deep furrows in the surface. I recall using a ton of alizarin crimson and GAC (Golden Artist Colors) media:
dark red and yellow abstract painting

Did I sell this painting? Give it away? Throw it away? Unlikely, but possible. I’m guessing I gave it away. I should keep better records of physical objects. I have moved addresses many times and often give things away when that happens. I kept all the small paintings (5×5 and 8×8 inches) and a few medium paintings (10×10 inches) because they are easier to ship and store.

What about you? Do you have any projects lost in time that you’d like to recover? What are your experiences of the early web? What was the first web page you remember seeing?

Color names for writers

~ Kristen Ankiewicz ~ 1 Comment

I have made a collection of named colors gleaned from HTML color names, Pantone swatches, stones, jewels, flowers, foods, minerals, pigments, and paints. Some of them I made up out of whole cloth. Each color is presented as its hexadecimal code. Use some in your fiction! Sample color names:

  • Gamboge
  • Despair
  • Malachite
  • Flesh of the peach
  • Skin of the peach
  • Wine
  • Mahogany

You can use the complete interactive version here.

Download the whole shebang as a PNG file. Please share it! Below is a cropped bit from the reds section.

excerpt of color names for writers

Werner’s Nomenclature of Colours (1814)

~ Kristen Ankiewicz ~ Leave a comment

I found this fascinating text on The Public Domain Review, which is a treasure trove of copyright-free works, both images and texts. Extending Werner’s system, this is Patric Syme’s classic taxonomic guide to the colors of the natural world.

Patrick Syme, Werner’s nomenclature of colours; Edinburgh: William Blackwood, 1821.

WHITES.

1. Snow White, is the characteristic colour of the whites ; it is the purest white colour ; being free of all intermixture, it resembles new-fallen snow.

2. Reddish White, is composed of snow white, with a very minute portion of crimson red and ash grey.

3. Purplish White, is snow white, with the slightest tinge of crimson red and Berlin blue, and a very minute portion of ash grey.

4. Yellowish White, is composed of snow white, with a very little lemon yellow and ash grey.

5. Orange-coloured White, is snow white, with a -very* small portion of tile red and king’s yellow, and a minute portion of ash grey.

6. Greenish White, is snow white, mixed with a very little emerald green and
ash grey.

7. Skimmed-milk White, is snow white, mixed with a little Berlin blue and
ash grey.

8. Greyish White, is snow white, mixed with a little ash grey.

colors

Language generators

~ Kristen Ankiewicz ~ Leave a comment

I am in the middle of novel revisions, so naturally I am updating my language generators. I get kind of obsessed with them.

Random language generator
I wrote this page to generate random sentences using JavaScript and JSON libraries. It retrieves JSON data words using an AJAX call and then generates language using pre-defined rules.

Lorem ipsem language generator
This demo generates lorem ipsem text up to as many paragraphs as you specify. Use it for your web design projects. It is created using Markov chains applied to a very long sample of pre-existing lorem ipsem.

Markov chain language generator
In a Markov chain model, the probability of each item (in this case a word) is based on the state of the previous item. A Markov chain language generator can generate real-sounding text given a source document by predicting which word will follow next after each word. Sample documents here include Alice in Wonderland, Ulysses, my very own vampire novel, the King James Bible, a Latin Bible, a few other texts, and user input where you can enter your own text.

Procrastination by way of web design

~ Kristen Ankiewicz ~ Leave a comment

I spent a good eight hours today revamping ankiewicz.com, and enlarging all the thumbnail images, bandwidth be damned. I am writing a novel, so naturally I spent all day twiddling with images that have nothing to do with my novel. In the interest of preparing for this novel, I wanted to start a blog about writing, procrastination, and the process. I debated five ways to Sunday whether or not to host my blog on wordpress.com, or ankiewicz.com. Pros to self-hosting: complete control of the look and feel. Cons to self-hosting: no real access to the community and wordpress.com ecosystem.

It’s probably six of one. I decided to host the blog here on wordpress.com.

There are a lot of frog photos on ankiewicz.com

Procrastination

~ Kristen Ankiewicz ~ 2 Comments

My form of procrastination is a random language generator.

It makes little paragraphs like this:

  • None of the nude cheese lets everything speak of her tryout. Some fiercely stunning pauses speak of her. She says, medium-size. He replies, collecting operatives. They say, mad.
  • I yearn for an oval, parental, and crimson layer. Azure housemothers can gladly take her overcast border. She says, corned. He replies, confusing those heretics. They say, confused.
  • They grin at something. Those customers have these discerning outlooks. She says, blorpy. He replies, rubbing the stuff. They say, nervous.

I wrote it in JavaScript:

https://ankiewicz.com/technology/random-language-generator/

Feel free to use those sentences in your own writing projects.

I am a little obsessed with it. I strive to make it better and better. I want the output to be as natural-sounding as possible. It is satisfying when it spits out realistic-sounding sentences. It’s extremely satisfying when the grammar is correct. I spent hours getting the plurals of the nouns to match the verbs. I spent forever deciding whether or not a sentence needs an adjective, an adverb, or a prepositional phrase.

It will never produce a novel. If I spend half as much energy on my novel as I do on this thing, I’d be done by now. Yet, I am fascinated by the process of creating machine-generated sentences. I am drawn to it. Occasionally, from an unexpected and surprising turn of phrase, I get inspiration.

I find myself getting lost in sites like this, imagining how I would emulate such rules in my own language generator: http://www.gingersoftware.com/content/grammar-rules/adjectives/order-of-adjectives/

What’s your form of procrastination?

Fractals and PostScript

~ Kristen Ankiewicz ~ Leave a comment

Below is an example of a fractal I wrote in PostScript long ago when I used to be a PostScript developer. I have been playing with my pseudo-fractals. They are repeating & branching designs generated by simple mathematical rules. I wrote them in PostScript and generated the output using Preview on Macintosh. You can also open the PostScript files in Adobe Acrobat Distiller or GhostView. Someday I will try writing these in the <canvas> tag. Someone has informed me that this is a true definition of a fractal, not necessarily “pseudo”, though I think I have a ways to go before they are as beautiful as these. If you like PostScript art, check out my fonts too.

fractal image of a red mushroom cloud

Posted in response to the daily prompt Branch

Responsive design

~ Kristen Ankiewicz ~ Leave a comment

I have updated several of my websites to be more cleanly responsive. A responsive website will fit any layout, including phone and table. Additionally it should elegantly resize between various sizes on a desktop. Responsive design is best practice because in today’s world of proliferating devices, it means one set of code serving up the widest set of platforms; it also doesn’t lock the user into a specific design.

I build responsive websites using a combination of pure CSS media queries (using Sass, or Syntactically Awesome Stylesheets), Bootstrap, Respond.js as a responsive polyfill for older browsers, and Google’s HTML5 shim for older browsers. Ankiewicz.com is built using WordPress and PHP. Monsters.net is built using Jekyll and Liquid. Both sites use jQuery and JavaScript.

Resize the following websites in your browser, or visit them on your phone and tablet:

Want a custom theme, a WordPress install on your own domain, or a responsive design? Contact me.

Updates to ankiewicz.com

~ Kristen Ankiewicz ~ Leave a comment

I have updated ankiewicz.com using JAlbum, PHP, and mySQL. I use phpMyAdmin to access my database.

I have loaded new photos to the front page. I also made the entire gallery structure of the site less deep, so that a user can more quickly get to the large (pretty) photos. More galleries are directly accessible from the photos home page.

I like the way my web pages look when the images are all the same size. However, I have a number of photos that I like that happen to be vertical. I’m not sure if they can be cropped horizontal and still look good.

It’s probably more worthwhile to spend my time labelling and describing the images.