feb 2 2012

Respond.js bug?

I ran into a strange bug today.

I recently launched Krimimessen.dk where I have used a small poly­fill script writ­ten by Scott Jehl, respond.js, to make the site’s respon­sive­ness work in older ver­sions of Inter­net Explorer.

But then one of my col­leagues made me aware of a bug that seemed to trig­ger when click­ing on links in Inter­net Explorer 8. Not in everybody’s Inter­net Explorer 8, oh no. Only in Inter­net Explorer 8 on cer­tain machines. Well, who said it should be easy to test for bugs?

Instead of going to the desired des­ti­na­tion, the browser went to a URL with this pat­tern:
res://ieframe.dll/acr_error.htm#the-url-without-http

I have done a lit­tle search­ing on the issue, and gen­er­ally peo­ple say the prob­lem goes away if you delete the browser cache or dis­able browser exten­sions. How­ever, that solves no prob­lem, because I can’t ask my users to delete their cache.

Then I stum­bled upon some­one in the Drupal.org forum who had had the same issue and one of the pro­posed fixes was to move respond.js to the footer.

And there you go. It seemed to work. At least the bug disappeared.

But accord­ing to the Respond usage instruc­tions, the script ought to be loaded as quickly after the CSS file as pos­si­ble to avoid glimpses of “unre­spon­sive­ness” in ie.

So now I won­der if this is a bug in ie8 bug can be fixed within respond.js? Or is it some­thing else, that trig­gers the bug? Or am I just using respond.js wrong?

By Morten Brunbjerg Bech • Web Design • 0 • Tags: , , , , ,

feb 1 2012

Styling images with CSS3

Pimp­ing images with rounded cor­ners, box shadow and other CSS3 eye candy can be a pain in that part of the body, you nor­mally sit on, because browser sup­port is really lousy.

Until now. Because Nick La from Web Designer Wall has a nice lit­tle trick up his sleeve, which involves wrap­ping the image in an HTML ele­ment and mak­ing an over­lay for styling with a CSS pseudo-selector.

Go check out Nick’s tuto­r­ial here

By Morten Brunbjerg Bech • CSS, Links, Web Design • 0 • Tags: , , , ,

jan 31 2012

The 1000px grid

Elliot Jay Stocks, Bris­tol based web designer and illus­tra­tor, recently pro­posed on his blog a 1000 pixel grid as the base for lay­out pro­to­typ­ing in Pho­to­shop, instead of the more com­mon and defacto 960 pixel grid, we have all become so used to.

The rea­son? The math is so much eas­ier to do, when trans­form­ing the grid from pix­els to per­cent in respon­sive web design.

It is such a sim­ple and obvi­ous approach, I’m almost embar­rased, I haven’t thought of it before.

Elliot Jay Stocks: A bet­ter Pho­to­shop grid for respon­sive web design

By Morten Brunbjerg Bech • CSS, Photoshop, Quick tips, Web Design • 0 • Tags: , , , ,

jan 31 2012

Krimimessen 2012

Screen dump of Krimimessen 2012

I have just launched a re-design of Krimimessen.dk. Krim­imessen is the biggest fes­ti­val about crime lit­er­a­ture and crim­i­nal fic­tion in Den­mark. A fes­ti­val which is arranged by Hors­ens Pub­lic Library, where I work. The site is designed so it resizes to fit the screen it is being viewed on, also known as respon­sive web design.

This is the first respon­sive site, I have cre­ated. It is built in Word­Press on a base of the awe­some HTML5 Boil­er­plate frame­work, which makes it eas­ier to build a mod­ern web site from scratch.

I learned a lot from read­ing Ethan Marcotte’s “Respon­sive Web Design” prior to this project. Marcotte’s “tar­get ÷ con­text = result” tech­nique, a way to cal­cu­late dimen­sions from pix­els into per­cent, was an invalu­able tool in the process. In fact, and very unusual indeed, it wasn’t even nec­es­sary to test a lot in Inter­net Explorer.

By Morten Brunbjerg Bech • CSS, Portfolio, Web Design, Web Development, Wordpress • 0 • Tags: , , , , , ,

nov 30 2011

Skitch

A screen shot of my Skitch blogI’ve always found it hard to get a grab on where to store and man­age my occa­sional inspi­ra­tional screen shots. Sav­ing them to the hard drive works, but I really miss an overview and a way to add notes and key­words for findability.

But recently I started using Skitch. It’s a great lit­tle app for stuff like tak­ing screen shots, sketch­ing ideas and shar­ing the whole lot. It eas­ily solves the prob­lem of man­ag­ing screen shots. Just open Skitch, drag the screen snap tool across the part of the screen, you want to save, upload and tag it. And there you go, a blog with screen shots, eas­ily man­aged with notes and tags for findability.

Check out my Skitch blog here.

By Morten Brunbjerg Bech • Apps, Inspiration • 0 • Tags: , , , ,

aug 12 2011

Flexible Widgets for WordPress

Flex­i­ble Wid­gets is a plu­gin for Word­Press that makes it pos­si­ble to dis­play a wid­get on selected cat­e­gories and/or pages.


The Flex­i­ble Wid­gets plu­gin lets you dis­play a wid­get on any cat­e­gory or page you wish. When set­ting up the wid­get, you are able to select the cat­e­gories and/or pages where you want to dis­play the wid­get. If none are selected, the wid­get will be dis­played glob­ally on your site, exactly like a default Word­Press widget.

The plu­gin comes in handy if you need your side­bar con­tent to change con­tex­tu­ally from page to page in rela­tion to your main con­tent. It is espe­cially use­ful if you want to use Word­Press as a CMS.

Flex­i­ble Wid­gets will replace the default Word­Press widgets.

Sreen­shot

Widget administration interface in the WordPress plugin Flexible Widgets

Select­ing cat­e­gories and pages in each widget’s back end.

Instal­la­tion

  1. Upload the flexible-widgets folder to the /wp-content/plugins/ directory
  2. Acti­vate the plu­gin through the ‘Plu­g­ins’ menu in WordPress

or search for “Flex­i­ble Wid­gets” in the “Add new” sec­tion of the plu­g­ins menu in your Word­Press admin inter­face and hit “Install now”.

Change log

0.3

  • Fixes an issue: Option­ally dis­play wid­gets on the home page, whether it is set up to be a sta­tic page or the blog posts page.

0.2

  • Tiny update to get the plu­gin and author URIs right.
  • Update on the instal­la­tion info.

0.1

  • Brand new plu­gin. Still play­ing with the bub­ble wrap.

Known issues

May con­flict with themes or plu­g­ins which include cus­tom widgets.

Please see the plu­gin sup­port forum.

Addi­tional information

The Flex­i­ble Wid­gets plu­gin con­sists of a bunch of ideas and lines of code, I wrote for the Word­Press theme in use at the web­site of Hors­ens Pub­lic Library.

This is my first plu­gin for Word­Press. I am sure, there is room for improve­ment. The code is far from per­fect as my pro­gram­ming skills are some­what lim­ited. But I do think the idea is quite good, so if you can write lean code and are des­per­ately in need of a small side project, you should be very wel­come to help me out.

If you have any ques­tions or com­ments, feel free to leave a reply.

By Morten Brunbjerg Bech • Web Development, Wordpress • 7 • Tags: , , ,

dec 3 2010

Sådan finder man variabler i WordPress

Når man arbe­jder med tem­plates i Word­Press, kan det være enormt nyt­tigt at vide, hvilke vari­able, man har at arbe­jde med. Jeg havde et konkret prob­lem omkring en tag tem­plate (tag.php), hvor jeg havde brug for at finde ID-nummeret på det aktuelle tag til brug i funk­tio­nen get_tag_link().

Jeg fandt det ved at skrive lis­ten over mulige vari­able i query_vars ud med føl­gende stump kode:
<?php print_r($wp_query->query_vars); ?>

… og fandt, at den vari­abel, jeg havde brug for, hed tag_id.

Særde­les anven­deligt, når man har brug for overb­lik over tilgæn­gelige variable.

By Morten Brunbjerg Bech • Web Development, Wordpress • 1 • Tags: , , ,

maj 19 2010

Google Fonts API — Det her er stort!

Som bek­endt har man rel­a­tivt begrænsede typografiske muligheder i web­de­sign. Der findes en del workarounds, såsom Cufon og sIFR og de går an, men det bliver aldrig helt godt. Nu vender Google hele møllen på hov­edet med host­ing af fonts og en API, der gør det sindssygt nemt at imple­mentere.

Et lille eksempel:

Skrift­typen Lobster

Smæk dette link ind i head sek­tio­nen i dit HTML dokument.

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

Så er du klar til at bruge Lob­ster i din css som enhver anden font.

Det skulle efter sigende fun­gere helt tilbage til IE6. Skulle man endelig være neg­a­tiv, kunne man sige at udval­get af skrift­typer stadig er ret begrænset, men mon ikke, der med tiden bliver lavet om på det?

Via Net­tuts.

By Morten Brunbjerg Bech • CSS, Quick tips • 0 • Tags: , , ,

maj 17 2010

Er du front end-ninja på udkig efter nyt job?

Mine gamle kol­leger hos Midt Mar­ket­ing Inter­ac­tive søger en erfaren front end-ninja, der kan bøje en Photoshop-fil om til et færdigt website.

Du skal stå for opsnit­ning i HTML over imple­menter­ing i CMS til under­vis­ning af kun­den eller redak­tionelt arbe­jde med tek­ster og billeder. Du skal samar­be­jde med Midt Mar­ket­ings web­de­signere om at finde den bed­ste løs­ning til kun­den i forhold til pris, bruger­ven­lighed og høj teknisk kvalitet.

Er du lidt af en pixel-pusher, har udpræget kvalitetssans og sæt­ter en ære i at levere løs­ninger i høj kvalitet? Er du en haj til HTML, CSS, Javascript og kender jQuery ud og ind?

Sådan et job kan du få i Hern­ing. Er du inter­esseret?
Se hele jobbeskriv­elsen her.

By Morten Brunbjerg Bech • Quick tips • 0 • Tags: ,

mar 22 2010

Øg maximum upload filstørrelse på 2 mb i WordPress

Som udgangspunkt kan man kun uploade filer op til 2 mb i Word­Press. Ikke nød­vendigvis et prob­lem for garvede brugere, der er i besid­delse af et billed­be­han­dling­spro­gram, men abso­lut et prob­lem for brugere, der tror, et billede er et billede, og ikke har begreb om fil­stør­relser. Fotos fra et 5 megapixel kom­pak­tkam­era fylder nemt et par mb, og visse brugere vil undre sig over at være ude af stand til at uploade sådan en svend direkte fra kameraet.

Det har egentlig ikke noget med Word­Press at gøre, men der­i­mod ind­still­ingerne i php.ini. Det er imi­dler­tid ikke alle web­hoteller, der tillader sine brugere at ændre i php.ini. Hos Giga­host kan man ændre visse ind­still­inger, men det slår af en eller anden grund ikke helt igen­nem i WordPress.

Jeg har imi­dler­tid fået føl­gende løs­ning til at fungere:

1. Opret en ny php.ini fil med føl­gende ind­hold:

post_max_size = 20M
upload_max_filesize = 20M
max_execution_time = 900

2. Upload filen til wp-admin mappen.

Og voila! Nu kan man uploade filer op til 20 mb.

Via Likoma.com

By Morten Brunbjerg Bech • Usability, Wordpress • 0 • Tags: , , , , ,

1 2 3 4 5 6