10. January 2014
by Morten Brunbjerg Bech
0 comments

How To Easily Get the Code Right When Embedding Google Maps

Google MapsImplementing Google Maps in a web site can be at bit of a hassle if you are like me. Not the sharpest knife in the JavaScript drawer. If you find it difficult to get the right parameters for your code, luckily help is always near with the tool Google Maps Generator.

The tool has a GUI in which you can easily set the parameters, you need, for instance layout, user controls, start position, and zoom level. The it serves you a code snippet, which you can easily copy and paste into your HTML.

I think this tool could come in handy combined with the repository of color themes on Snazzy Maps, which I described recently, so that you are sure to get exactly the right parameters included in your maps.

Try out Google Maps Generator here

Translations: Danish

9. January 2014
by Morten Brunbjerg Bech
0 comments

How To Make a Horizontal Ordered List With CSS

Horizontal numbered list
The digital services in Danish public libraries are not known for offering the best user experience. More often than not, it requires detailed explanations and step-by-step walkthroughs before you get to the content. It is all due to copyright agreements and licenses, but that is a different matter.

Related to an explanatory walkthrough of one of these services, I needed to create a step-by-step list. To utilize the screen real estate I wanted to make the list horizontal. This is how I solved it.

Mark Up

The HTML is a classic ordered list.

<ol class="steps">
  <li><strong>Item 1</strong><br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non gravida ante. Curabitur nec fermentum nisi, non interdum tortor. Pellentesque ac sapien sem.
  </li>
  <li><strong>Item 2</strong><br />
    In blandit, justo tincidunt condimentum rhoncus, lectus sem scelerisque justo, quis tincidunt risus nunc vitae turpis. Suspendisse et aliquet nibh.
  </li>  
  <li><strong>Item 3</strong><br />
    Nullam a mollis mauris. Nam dictum nibh sed pharetra rhoncus. Sed posuere sed lacus quis congue. Integer sodales porttitor quam, at auctor sem tincidunt quis.
  </li>
  <li><strong>Item 4</strong><br />
    Phasellus rutrum, elit vitae rutrum sodales, sem mauris luctus libero, non convallis leo dui sed quam. Duis blandit magna sit amet ornare dapibus.
  </li>
</ol>

Styling

The CSS looks like this. It is tested and works in IE8, but the red dots are rectangular instead of circular.

.steps {
  counter-reset: my-really-cool-counter;
  margin: 4em 0;
}
.steps li {
  font: normal 1em/1.5em Helvetica, Sans-Serif;
  position: relative;
  padding: 0 0 1.5em 3em;
  list-style: none;
}
.steps li:before {
  content: counter(my-really-cool-counter);
  counter-increment: my-really-cool-counter;
  color: #fff;
  display: block;
  left: 0;
  line-height: 2em;
  position: absolute;
  text-align: center;
  text-shadow: 0 2px 0 #cc0000;
  top: 0;
  width: 2em;
  z-index: 2;
}
.steps li:after {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  height: 0;
  width: 0;
  background: #f00;
  border: 1em solid #f00;
  z-index: 1;
}
.steps li:first-child:nth-last-child(1) {
  width: 90%;
  width: calc(100% - 3em);
}
.steps li:first-child:nth-last-child(2), .steps li:first-child:nth-last-child(2) ~ li {
  min-width: 8em;
  width: 45%;
  width: calc(50% - 4em);
  float: left;
  padding-right: 1em;
}
.steps li:first-child:nth-last-child(3), .steps li:first-child:nth-last-child(3) ~ li {
  min-width: 8em;
  width: 27.5%;
  width: calc(33.333% - 4em);
  float: left;
  padding-right: 1em;
}
.steps li:first-child:nth-last-child(4), .steps li:first-child:nth-last-child(4) ~ li {
  min-width: 6em;
  width: 20%;
  width: calc(25% - 4em);
  float: left;
  padding-right: 1em;
}

If you want to know what is happening, I have also made a commented example in SASS syntax on Codepen.

Credits to Lea Verou for styling of the grid and to Roger Johansson for styling of the ordered, numbered lists.

Translations: Danish

8. January 2014
by Morten Brunbjerg Bech
0 comments

How to Add a Splash of Color to Google Maps

Color on Google Maps
Do you have any Google Maps on your web site? Does the color match the palette of the rest of your site? If it doesn’t, then actually it is quite possible to change. The Google Maps API makes it possible to change the color with a little bit of JavaScript.

If you don’t feel comfortable coding it yourself, then go check out Snazzy Maps. Snazzy Maps is a repository of “themes” with commented examples for download. This makes it relatively simple to achieve a Google Map which matches exactly your color palette.

Try Snazzy Maps here →

Here is an example with the theme “Neutral Blue

Translations: Danish

Linotype FontExplorer til macWhich font do you need for your current project? That can be a bit tricky to get an overview of, while working in your favorite DTP or graphics application. A font management tool helps you get an overview of the fonts that are available on your computer and makes it easier to compare them.

Font management applications are rarely free. But if you can make do with an older model, Linotype FontExplorer X ver. 1.2.3 for mac is still free. I use it myself and it works like a charm.

Get the old version of Linotype FontExplorer X for mac at Softpedia

6. January 2014
by Morten Brunbjerg Bech
0 comments

Carousels and Slideshows

Carousel as a hero unit

Carousels, slideshows, image sliders – they go by many names and you can find them anywhere on the web. Web site owners love these kinds of UI elements because they look good and are able to feature a lot of content in a very confined space. Or at least that is what you should think.

But Nielsen Norman Group has actually done some research on the subject and the conclusion turns out to be less optimistic. “Don’t use them, unless you know exactly what you are doing” – seems to be the lesson:

[…] if you are using a carousel in the hopes that people will see a variety of content, know that some people will only see the first frame or none at all.

Brad Frost reaches the same conclusion.

How to feature content effectively

Both Nielsen Norman Group and Brad Frost state that carousels can work, but only if

  • they consist of 5 slides or less
  • text and images are crisp-looking and clear
  • has obvious navigation

For featuring your content effectively, Nielsen Norman Group recommends using a single, static content element as a hero unit.

Here is a proposal. If you need to feature more than one message then perhaps the hero unit could shuffle randomly through different content on page load? Now, there is an idea for a WordPress plugin.

Translations: Danish →

Pixelkit Modern Touch UI kit - Bootstrap themes

If you are in need of a splash of color on your web site, you can get beautiful premium UI kits on Pixelkit.com.

If you belong to those who think Bootstrap is an awesome starting point for building web sites, Pixelkit has also made some Bootstrap themes which you can get for free on GitHub. If, like me, you are less enthusiastic about HTML and CSS frameworks, you can always get inspired by the nice designs, choice of color, and perhaps the CSS.

Pixelkit Bootstrap UI Kits on GitHub

13. November 2013
by Morten Brunbjerg Bech
0 comments

DOF Nordvestjylland

DOF Nordvestjylland på desktop, mobil og tablet
Complete Web Solution:
DOF Nordvestjylland

DOF Nordvestjylland is a local branch of the national Danish Society for Birdwatchers and Ornothologists.

DOF Nordvestjylland wanted to increase the online communication to, as well as with, their members. To reach that goal, they needed a new web platform which was easier to manage, more user friendly and capable of communicating in a visually serious voice.

The society’s logo is the golden plover and therefore, they had a specific wish to let the colours of that bird shine through the web site.

Platform: WordPress.
Special Features: Discussion forum, Events calendar.

Please check out the live web site here →

DOF Nordvestjylland - Desktop view DOF Nordvestjylland - Tablet view DOF Nordvestjylland - Phone view

11. October 2013
by Morten Brunbjerg Bech
8 Comments

Custom Wording on Jetpack Contact Form Submit Buttons

Let me be honest, I have mixed opinions on the Jetpack plugin for WordPress. It contains a lot of features that might have been better as independent plugins and it is kind of bloated. However, a lot of the features are very useful and therefore it is hard to ignore the plugin all together. So actually, I use it on most of the sites I make.

The Jetpack Contact Form

One of the features I like, is the ability to easily insert a contact form in any post or page. The only thing that bothers me is the text (the value) on the submit button. It is per default set to “Submit” and there are no clues on how to alter that text. There is an easy way to alter the value, however.

The contact form is inserted in your post with a shortcode which looks like this:

[contact-form subject='Some subject' to='some@email.address'][contact-field label='Name' type='name' required='1'/][contact-field label='Email' type='email' required='1'/][contact-field label='Comment' type='textarea' required='1'/][/contact-form]

So what you need to do, is add the parameter submit_button_text to [contact-form]. Like this:

[contact-form subject='Some subject' to='some@email.address' submit_button_text='Your custom submit text here']

That way, You are able to decide what your buttons are going to say.

Via | Translations: Dansk →

7. October 2013
by Morten Brunbjerg Bech
0 comments

No Webfont in IE8? It’s a Broken .eot

I’ve been using the Icomoon icon fonts web app for generating the icon font in use at horsensbibliotek.dk. Icomoon is a great web app for picking and choosing between a diverse collection of icons as well as uploading custom svg icons to build your own icon fonts. It works really well.

However, after testing the site in older versions of IE, it appeared to me, that the icons were somehow broken. They displayed as supposed in IE9+, FF and Chrome but IE8 and below displayed the unicode character, which of course wasn’t acceptable, as the part of our users who use older versions of IE can not be ignored. The problem was a corrupt .eot file. Corrupt .eot files, by the way, seem to be a common problem.

I tried running the .ttf through FontSquirrel’s webfont generator. No luck. The generated .eot still didn’t work.

Then I stumbled upon ttf2eot, a tiny font converter by Sebastian Kippe. Worked like a charm.

So if your fonts are displaying incorrectly in older versions of IE, try converting them with ttf2eot.

Translations: Dansk →