Nav & Search

Update to The Guide – Content and Design during Ideation

News - December 16th, 2011

I’ve just updated The Guide with some additional content in the section about Ideation, more specifically about Concepts and Design.

… There’s no harm in creating concepts that optimized for specific devices (on the contrary, it can be very powerful to tailor the experience while still using web standards), just keep in mind how they will work on other kinds and make sure that they are still accessible from all devices. …

Posted in News December 16th, 2011 by
Anders
and last updated December 16th, 2011.

Improving the W3C Recommendation for Mobile Web Navigation

Design - December 9th, 2011

Navigation for mobile web is a tricky subject; it has to conform both to web and native app conventions while being as useful and unobtrusive as possible. Both the W3C and Luke Wroblewski (in his book Mobile First) propose to position the navigation below the content at the bottom of the page with a link at the top of the page. Using a link this way has one big problem though; it messes up the history stack. When clicking the back button in a browser the expected result is to go to the previous page, not the menu button at the top of the page. Starting to mess with the stack can be done but then the beauty of a simple solution is lost and it’s easy to create much more problems down the road.

(more…)

Coding is Craftsmanship

Opinion - December 2nd, 2011

While much of the stuff that builds up a computer or a computer system is mass-produced the component that actually makes them useful is made by hand. It might have a few layers of abstraction before being processed in the hardware but it’s always implemented by a person and this person has more in common with traditional craftsmen and artists than the typical engineer. Coding is a craft that every developer or systems engineer should take pride in, it’s the expression of our professional knowledge and we should treat it as such.

(more…)

Posted in Opinion December 2nd, 2011 by
Anders
and last updated November 30th, 2011.

Using JavaScript to Select Part of an Input

Coding - November 29th, 2011

I recently had to develop a suggestion feature for an input-field where the first best match would be filled in and the rest of the word selected so that the user can continue writing if that’s not the correct word. At first this seemed like a straight-forward solution but then I realized that to select text programmatically in the document isn’t exactly straight forward (neither is searching inside an array, but that’s another story).

The reason that it isn’t straight-forward is that like som many other features of web technology it’s implemented in different same ways in Internet Explorer as it is in the rest of the major (and W3C compliant) browsers.

(more…)

Adapting Content to Mobile Devices

Design - November 21st, 2011

One fundamental rule of good web design is that the main content for a web page should be the same regardless of which kind of device and platform the visitor uses to view the page. This is to avoid confusion when they try to see the same content that they have previously found on another device and so that they know what other visitors find on the page if they share the link, regardless if one person uses a tablet and the other a 24″ iMac.

However, in order to make a successful mobile version of a website we need to streamline it and remove bloat, both in the form of data and requests. It’s simply not enough to hide parts of the page using CSS3 media queries since images and scripts will be downloaded anyway. What we can do is adapt the auxiliary content such as thumbnails, advertisement, secondary navigation and excerpts so that it isn’t downloaded in the first place or optimized for a mobile connection.

(more…)

Posted in Design November 21st, 2011 by
Anders
and last updated November 21st, 2011.

Touch and Drag on the iPad Using jQuery

Coding - November 3rd, 2011

One of the fundamental features of a mobile web app is the ability is use gestures to touch and drag items or layout sections. This is one way to do it using jQuery to listen and react to the touch events and CSS transforms to implement the actual moves of the objects. There might be situations where normal CSS positioning is better (when other elements should react, for example) but using 3D CSS transforms makes it possible to use hardware acceleration for the items which will make the movements much smoother than otherwise possible and get a nice native feel.

(more…)

Welcome to Cleanwebdevelopment.com

News - October 27th, 2011

This website is my small contribution towards a more accessible, faster and exciting web. I’ve divided it into two parts, the blog section and The Guide where my view on web development will eventually be described in a hopefully structured way, sort of like a continually living book (which will be much like a draft for the foreseeable future). The blog is my place to write about web development topics that doesn’t quite work in the context of The Guide.

With that said, head over to The Guide and read about my definition of Clean Web Development.

Posted in News October 27th, 2011 by
Anders
and last updated November 4th, 2011.