Dos and Don'ts of Feature phone Design
Main takeaway: things are worse than you think.
Feature phones either won't understand or will incorrectly implement the fancy (CSS) presentation features that you're used to from newer devices like smartphones.
The best approach is to send feature phone users a very simple design, using typography, vertical spacing, and (a little) colouring. Maybe some borders too. Users with newer devices will still get an enhanced experience, with all the trimmings they can handle.
Do design on a small canvas and view designs on actual devices.
Don't design at widths bigger than about 320 pixels.
Feature phone screens start at about 128 x 160 and only go up to about 240 x 320. These tiny screens need a bit of extra attention when it comes to sizes.
Do use a simple one column layout.
Don't use a fancy grid layout system.
Feature phones have tiny screens that would make your columns too small, if they even understood the code to make the grid layout in the first place. Floating text and images often results in a broken layout.
Do use white backgrounds.
Don't use background colours. Yes, I know.
Feature phone support for applying backgroud colours is widely variable and can't be trusted, though. You might end up with text and background colours being the same, rendering the text invisible!
Do use as few images as you can.
Don't use lots of images.
Each image you add costs the user time (to download the image) and money (for data to download the image). On top of that, some browsers have an image quota or a page size quota: when they reach it they either stop loading the page immediately, or reject the whole page and load nothing!
Images should be small (less than 230 pixels wide), and can be displayed inline, or on a row of their own. No fancy positioning or floating is possible.
Do use a common serif or sans-serif family, at a large-ish size.
Don't use a fancy font.
Feature phones can't handle fancy web fonts: they can only really use the fonts they already have installed. On top of that, web fonts tend to be a lot of data, meaning a longer page load and more data cost for the user.
Since the screens are already tiny, don't make it worse by using a small font size, especially for body copy. Also, stick to regular and bold for font weights: anything else is often ignored or incorrectly interpreted.
Do use one colour for links throughout the site, and make them distinct from regular text.
Don't use multiple colours for links, or remove underlines.
Over-riding link colours in specific sections isn't always supported on feature phones, and they often add underlines to all links.