Mobile isn't mobile. Let's talk!

Latest Articles

Browsers and Bugs 15/2015

April 17, 2015

Continue reading

Browsers and Bugs 14/2015

April 10, 2015

Continue reading

Browsers and Bugs 13/2015

April 3, 2015

Continue reading

Browsers and Bugs 12/2015

March 27, 2015

Continue reading

Remove console and debugger statements for production with gulp/grunt

March 26, 2015

While writing JavaScript you will most likely use either console (console.log, console.error…), debugger; or even alert() (I hope you don’t anymore) at some point to debug your code. Showing these messages on your development server is not a problem as only »you« will see them, but if they show up on your production server everybody will see them. Continue reading

Browsers and Bugs 11/2015

March 20, 2015

Continue reading

Browsers and Bugs 10/2015

March 13, 2015

Continue reading

Dynamic responsive background images

March 12, 2015

This morning I saw a Tweet from Anselm Hannemann asking »What’s the best way to add dynamic responsive background images?« and after some quick tests I came up with the following solution. Continue reading

Browsers and Bugs 09/2015

March 6, 2015

Continue reading

Demo: Responsive Pop-out Menu

March 3, 2015

I am currently redesigning my website and therefore also the navigation. There are loads of different navigation pattern and I made many myself in the last years. However, I searched for a different solution again as none of the patterns I know offers the following points I had in mind:

  1. It should work well without JavaScript.
  2. On small screens, all menu items should be easily reachable
  3. Important menu items should always stay in the beginning

Continue reading

Browsers and Bugs 08/2015

February 27, 2015

Continue reading

Cut the mustard revisited

February 26, 2015

Cutting the mustard is a term coined by the BBC team (post) to group browsers into »modern« browsers and »old« browsers. This is not done by sniffing the User Agent but by using Browser Feature Detection. Here is the JavaScript that decides whether the browser is modern or old. Continue reading

Browsers and Bugs 07/2015

February 20, 2015

Continue reading

Browsers and Bugs 06/2015

February 14, 2015

Continue reading

Input type email – better don’t use it!

February 13, 2015

tl;dr If you want to use input type=”email”, be aware that international email addresses (containing Umlaut, non-latin characters…) are not supported (expect from Firefox 26 upwards) and you may exclude users using such an email address from using your service. So, think twice and be careful using it!

According to a survey by Peter-Paul Koch input type=”email” is the most used advanced input type. Which makes sense in my opinion as almost every site using a form also has a field for email. So, at a first glance it seems perfect to use it, browsers who support it will validate it, some mobile browsers (Safari and others) will add the @ sign to the bottom right of the keyboard and most importantly, if a browser doesn’t support it, it falls back to type=”text”. Continue reading

Browsers and Bugs 05/2015

February 6, 2015

Continue reading

Prioritize loading of background images

February 2, 2015

Initially, I wanted to find a way to lazy-load background images, but all my tests confused me completely and I thought I should better move on with my daily tasks. Some days later, however, I was reading an article on medium.com and while the page was loading I recognized that the big background image was not appearing until the page has loaded completely. And there it hits me, is there a way to prioritize the loading of a background image so it will be shown earlier? So, I set up some more test and found out there is indeed a solution for it. Continue reading

Browsers and Bugs 04/2015

January 30, 2015

Continue reading

Restart CSS Animation (using CSS to trigger a reflow)

January 26, 2015

Lately, I wanted to run an animation on page load and the same animation again on :hover. After some debugging I figured out this doesn’t work as expected. Continue reading

Browsers and Bugs 03/2015

January 22, 2015

Continue reading

Load module-dependent JavaScript with basket.js

January 19, 2015

I tried different scripts, here is a spreadsheet of some of the JavaScript loaders available, but in the end I went with basket.js. Mostly because it uses local storage, it can order dependencies and supports loading of multiple scripts. Continue reading

Browsers and Bugs 02/2015

January 16, 2015

Continue reading

The download attribute

January 13, 2015

The download attribute indicates the browser that a link should trigger the “Save as…” dialog instead of opening the file directly in the browser. Continue reading

Browsers and Bugs 01/2015

January 9, 2015

Continue reading

Give forms some extra attention

January 6, 2015

Some weeks ago I saw a great example of a login form with a lovely extra. On this login site, once the password field is focused, the owl, sitting on top of the form, hides her eyes, showing that the password can not be seen by others and therefore is private. I had to grin the first time I saw it and I am still impressed by the perfect association with privacy.
Continue reading

Share quotes via twitter

December 18, 2014

Some days ago Christian Heilmann (@codepo8) wrote “Great publishing works with the medium, not against it”, where he argues against posting images with quotes on twitter. I totally agree with him, images with text included are a bad way to spread the word.

This reminded me about an idea I had some months ago. The idea is to have a classic tweet link (http://www.twitter.com/share) at the bottom of the page and once you select a text, the text gets highlighted and you see a share button above the text.
Continue reading

Reverse order of elements with CSS

November 28, 2014

Continue reading

Overview of Static Map solutions

May 27, 2014

For a recent redesign we mananged to reduce the page size to under 500kB for almost every part, expect the sections where we included a dynamic map. The size of an average dynamic map was about 600kbB, thus we had to find different ways to show a map and came across Static Maps, which turned out to be the perfect solution for us.

Static Maps are relatively lightweight, can be customized and are the ideal candidate for progressive enhancement.
Continue reading

Maphancement – progressive enhanced Google Map

May 11, 2014

For most websites I build these days I have to integrate a map, mostly as a bonus for the contact page. Until now I simple used an Iframe loading a Google Map with the desired address centered. This however comes with a cost, even a realativeley small map loads ~600 KB (See this example of a 400×200 map).

That’s why I searched for a way to show the address in a visual way without loading unnecessary data and stumbled across Static Maps. Showing the example from above as a static map, we save ~550 KB, which is fantastic for news for performance.
Continue reading

Notify me … the Notification API in use

September 24, 2013

In this article I am going to show you the current status of the Notification API, explain different browser implementations and show off how to use the API.

Continue reading

There is a bug

June 24, 2013

Almost every day I get emails like “Hey Michael, on site bla.com something looks odd” or “Hello, can you please fix the site bla.com, it looks strange on my computer”. Well, sometimes they are more detailed “Bug Reports” than the ones mentioned, but nevertheless, without getting more details about the OS, Browser, … I mostly couldn’t help them in the first step.

So I used to respond them, asking what Browser, Browserversion, OS… they are using to reproduce the error they wanted to tell me, but I soon realized that it’s really hard for most people to provide me with all the details and very time consuming for me to ask again and again.
Continue reading

Just my test setup

February 3, 2013

From time to time people ask me on which devices and with which browsers I usually do testing. Simple answer: It depends – There are just too many aspects involved to give a straight answer. Nevertheless, within the last months I defined myself a basic test setup, which works out really well so far. It consists of four parts – Mockups, Design, User Interface and Final Check.

Mockups

To get a first glimpse how the site should look like I usally start by producing Mockups with HTML and CSS. This part is taking place completely in the desktop browser, I prefer Firefox, because I love the “Responsive Design” feature. I usually test them starting from about 280 – 320px up to ~ 1600px. I try to spend not to much time in details in this step, it’s really just to get a basic idea.

Continue reading

Responsive Images – what? width! this? no, this! hä?

January 16, 2013

2012, the year where reponsive Images got mainstream and became the rockstar of many dramas just ended some time ago and I am sure you are looking forward to 2013 for the next “responsive Image affair”. I have never planned to attend this show, but just today, while walking through Berlin, I couldn’t think of anything else.

Why do we deliver images based on the maximal window width and NOT on the actual available container width?
Continue reading

Every web design is broken

January 8, 2013

What an attention-grabbing title, isn’t it. Actually it’s how the web works, belief it or not. Just to be clear, I don’t talk about websites looking different on different browsers, OS, screen resolution – whatever, a website looking different is actually a great thing, every website should look diverse on different platforms. Point.

What I mean is, that every single website out there is broken in one or another browser, just because you will never ever be able to test on every single browser still in use. At the latest after looking at this diagram of web browsers it should be clear, even if you only want to test on all browsers released in the past 3 years, 24 hours a day won’t be sufficient.

Continue reading

Be carefull when using input type=”url”

December 28, 2012

Over the last weeks I became somehow frustrated with the HTML input type “url”. While going through registration forms, I often got the error message “Please enter a valid url” after filling in www.justmarkup.com.

As a developer, I immediately looked at the source code and was not surprised to find that they used the required attribute in combination with type=”url”.

<label for="url">Url:</label>
<input type="url" required aria-required="true" name="url"/>

Continue reading

Clean up – random thoughts

December 7, 2012

To be honest I never really liked my old design but at that time I just wanted to push it live, so I can start blogging and show something off. After several month of doing nothing I finally had the time to rebuild everything from scratch. This year I learned a lot about building websites, how to test, optimize and build for different devices. This site is not at all perfect and probably, like in my opinion every other page, will never be, but right now I am totally happy delivering it, as it is. If you have feedback, good or bad, I would be very pleased if you yould either Tweet me or write me an Email.

Webdesign

This site uses a really elementary layout and no fancy JavaScript, it’s simple and clean. If you build such a site nowadays and don’t build it responsive, you may better look for another job, seriously. Don’t get me wrong, I know that it is really hard work to get a sophisticated site using a complex layouts and tons of JavaScript responsive, but for simple sites it has to be the standard way, no the only way. And as a side note, if an user zooms your site and the design breaks, your site is not responsive, or in other words, avoid fixed units, please try to avoid it.
Continue reading

Testing your responsive site – using Ubuntu

August 23, 2012

This post is all about setting up and using tools and extensions, useful for testing your Responsive Design. I work with Ubuntu, so most of the instructions will be for Ubuntu, but I guess everyone else will get the idea.

Browsers

Firefox

The current Firefox Nightly comes with a fantastic tool for testing your Mediaqueries. They call it “Responsive Design View”, and you name it, it’s for testing a site on different screen resolutions. With this tool you can easily resize your site both vertically and horizontally or choose one of the redefined screen sizes to test the most common ones. Sooner or later this tool will be build in Firefox Stable, but until then you can download Firefox Nightly, which runs site by site with the stable Version.

Furthermore you can install Firefox Fennec, downloadable on mozilla.org. There you will find handy install instructions, to get it running within minutes. I don’t use Fennec that often anymore, as I use Firefox Nightly now for testing initial mockups, but it’s a great browser for testing “touch”, as there is, for example, no hover event.
Continue reading

Responsive Multi Level Navigation – let’s try.

June 19, 2012

Lots of fantastic people already put their hands on building a responsive navigation, and they came up with sweet ideas, like this Tutorial on .net by Aaron Gustafson.

And there is also a neat overview about “all” responsive navigation patterns by Brad Frost where he points out the cons and pros in a detailed way.

However most of these patterns are not really applicably when dealing with “large” navigations or multi-level navigations and thus I tried to develop one which also doesn’t need JavaScript.

If you are wondering, the navigation structure is the one used on a german newspaper, as I wanted to test it with a real world example.

Before finally diving into my example, I have to admit that I am still searching for a “perfect” solution, as each of the following has some drawbacks, you may see as a deal breaker in your project.

Continue reading

Should we really worry that much.

April 5, 2012

As soon as the new Ipad was released, many people started thinking about the best way to serve high-resolution images to it.

Apple itself implemented this technique, which has not been thought through, mainly because of the increased total size. When surfing apple.com with your shiny new Ipad you have to download 2.13MB instead of 502.90K, or in other words 4x the size. This may be fine if you are using WIFI or LTE (which is not usable at all in many countries), but not for people surfing on low bandwidth.
Continue reading

Take this you mobile wannabe!

April 2, 2012

While we, as developers, think about best ways to serve images to different devices and resolutions or about how we can adapt the navigation to various screen sizes, many people get more and more annoyed by the mobile “experience” they have to deal with.

An URI is unique and everywhere the same, isn’t it?

Thomas Fuchs puts it in a nutshell, it’s just a pain in the ass if you don’t serve the content the user wants to see. This users will think twice the next time before clicking your link and of course will never ever share your link. So, if you don’t have the requested content available on your mobile site, do yourself a favour and show the user your “normal” site instead.
Continue reading

Why sharing a picture goes pear-shaped in many cases

March 7, 2012

As it happens a lot that you get a link from a friend saying “Look at this cute cat” and once you open the picture you actually get to see a “big pink dog”, I went on and tested some of the most visited news sites in Germany to see if it’s possible to share a specific image out of a gallery just by copying the URL from the address field.

Here is what I came up with.
Continue reading

What we can’t test

March 2, 2012

We all do our best to test our sites in lots of different browsers, screen resolutions and input/output devices. But to be honest we just can’t test everything.

Screen resolution

Unless you have the opportunity and money to sit in front of a 42″ or even bigger screen you are not able to test your design on big screens. Scaling down your browser window is easy, but increasing it over your max. resolution available is just impossible.
Continue reading

Don’t think in statistics –
the future is already the past.

February 21, 2012

Let’s say you are thinking about a relaunch of your site. One of the first things you may do is checking your Analytics Data to get a feeling what Browser, OS, Screen resolutions, Plugins, … your users actually use.

After finishing your evaluation you may define which browsers you have to support definitely and on the other hand which browsers you may just ignore as they only count for ~ 1% of your visits.

Don’t trust them

Let me explain why checking statistics is a good addition but not the ideal solution for your new project. First of all you can’t really trust your statistics, as the tracking may fail in some cases, you can’t really ensure tracking on all devices and you don’t get all data from users without JavaScript (unless you use server-side tracking).

Continue reading

Mobile isn’t mobile

February 13, 2012

Today on twitter the amazing Brad Frost wrote a great article, exactly speaking out what’s in my mind – “Native vs Web is total bullshit.

That’s absolutely true, because you can’t compare apples and oranges.

Continue reading

Let’s start with the basics.

February 8, 2012

At the moment the whole world (ok maybe only we frontend guys) speaks about responsive design. If we divide the opinions we come up with three approaches.

1) People who don’t care at all about responsive design and just continue coding like the years before.
2) Frenetic elation – people trying to convince everybody to use it now.
3) People who remark criticism about responsive design.

IE will never be dead

Starring at your statistics with the hope old IE’s won’t appear anymore will not happen in the near future. Of course every frontend developer will have a giant party if the world of browsers would only consist of up to date browsers providing the same experience.

Waking up from the dream we have to realise that there are not only different browsers, but also different screen sizes, people using all sort of input and output devices and so on.
Continue reading

Loading… and how css can help

February 5, 2012

The simplest form of showing an animated Loading… has been around since the early days of Internet Explorer. The marquee element and his counterpart the even worse blink element has never been part of the w3c specifications because of their terrible usability and accessibility.
Continue reading

Servus

January 31, 2012

Welcome to justmarkup.com. Just my log.