Martin Bergek » Web design

WordPress iPhone theme

Martin Bergek — Wed, 02 Sep 2009 22:56:20 +0000

For WordPress blogs that want to support iPhone users the plugin WPTouch is very useful. The plugin detects the presence of iPhone (as well as some other devices) and sends a special theme instead of the blog’s standard theme.

CSS-based rounded corners

Martin Bergek — Sun, 22 Feb 2009 14:08:05 +0000

Having rounded corners in web layout is usually a nice touch, whether it be menu tabs, boxes or whatever. Way back when the layout was done using HTML tables this could be achieved with images and a bunch of extra table cells. Ugliest solution there ever was but it worked. The last few years I have been using Javascript libraries such as NiftyCube to achieve more or less the same effect.

In CSS3 there are finally options for creating rounded corners. It is worth noting that CSS3 is still under development and that this technique only works under Firefox and Safari – but since they are the browsers I use anyway it is almost good enough for me already.

Users of Firefox and Safari should see this text in a blueish box with rounded corners. Users of other browsers will see a box with square corners.

The HTML code for the box above is

The added options are (for the two browser families):
-moz-border-radius: 5px; -webkit-border-radius: 5px;

It is also possible to round only certain corners by using a combination of the following:
-moz-border-radius-topleft -moz-border-radius-topright -moz-border-radius-bottomleft -moz-border-radius-bottomright -webkit-border-radius-topleft -webkit-border-radius-topright -webkit-border-radius-bottomleft -webkit-border-radius-bottomright

iPhone viewport size

Martin Bergek — Sun, 15 Feb 2009 14:21:51 +0000

This information is from 2007 but every time I make a web page for the iPhone I have to go and search for it.

The iPhone Safari browser does a good job of presenting just about any web page on its relatively small display. In so doing, it assumes that whatever web page it is displaying was designed for a much bigger display. To design a web page targeted for the iPhone and not have the phone shrink the web page to oblivion one must therefore add a meta tag to the head section of the HTML file: