Archive for the ‘Web design’ Category

Wordpress iPhone theme

Posted on the September 3rd, 2009 under Computers, Web design by Martin Bergek

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.
Wordpress on iPhone with WPTouch plugin

  • Share/Bookmark

CSS-based rounded corners

Posted on the February 22nd, 2009 under Computers, Web design by Martin Bergek

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

<div style="width:300px;
background-color: #ddddff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 4px solid #8888ff;
padding: 10px;" >

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

  • Share/Bookmark

iPhone viewport size

Posted on the February 15th, 2009 under Computers, Web design by Martin Bergek

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:

<meta name="viewport" content="width=320, user-scalable=yes">

  • Share/Bookmark