Bad website design? you can help!

I have received numerous comments from visitors saying that my website have an outdated design, give impression of 1990s, is cluttered, etc. Some people suggested redesigning my website and gave me examples of… so-called “modern responsive themes” with big pictures and just few rows of text. Example theme: http://demo.graphene-theme.com/franz-josef/

These themes are good for a company offering ONE service or product, that do not need more than 5 pages (Portfolio, Pricing, Services, Blog, About us, etc).

These themes do not suit my website which is intended an encyclopedia-portfolio covering many topics, of which 60% of traffic goes to Housing in Singapore section, my closest competitor is Wikipedia. Actually I inspired my website design from Wikipedia: having a sidebar on left side, articles with titles and few subheadings, photos aligned on right, etc (over time I aligned most photos on center).

Starting from 2009 a lot of content made myself (1-person work) was posted on website, visitors suggested to add more and more stuff, some people emailed me their floorplans “to contribute”, until the point when many people started complaining about website being cluttered and having too much info, thus decided in late 2012 to stop adding excessive more content, stop adding everything that comes in my mind or everything that people suggest.

Before complaining about theme, take a look in http://www.teoalida.com/thesims/ a sub-website using same Graphene theme but on most pages having max 200 words and 6 images.

Maybe the problem is not the theme…. maybe the problem is having too much content on main website, especially too much text and too many images on each page, etc (the page Singapore HDB Floor Plans hold the record, 90+ floor plans, 40+ photos, 8000 words article), but exactly this BIG content helped me getting audience, thousands of Facebook likes on HDB Floor Plans page, more than any other page of website.

Installing a “modern responsive theme” with few lines of big text may do worse because my current content will be spread over multiple screens and people need to scroll more. I agree that website may look better by removing large part of text and images, not need to change theme, but this will make visitors angry because the great content that they love will GONE.

Basic rules of website design: as I learned in 2009-2010, you should put all essential info on the first 650 pixels of page (on the fold), most people have 1024×768 or 1366×768 screens and title bar, taskbar, etc, eat 100 pixels in vertical. Many people don’t bother scrolling down, thus what is below than 600 pixels (below the fold) may be not noticed, people may quit website if do not see good content on first screen.

In the last years I see more and more websites that break the rule. Having just few rows per screen… you need to SCROLL A LOT to read the essential info, that normally fits on a single screen. How many people love scrolling?

This trend is probably driven by rising mobile users (mobile = small screen that fit just few lines of text) but on desktop and laptop computers who last years turned from 4:3 to 16:9 (same vertical but more space horizontal), such websites waste screen space and needing to scroll makes them HORRIBLE in my opinion.

Maybe mobile users are rising, but my website have 70% desktop traffic, most traffic being from universities and workplaces, where people use computers.

Themes used so far

If you think that my themes SUCKS, feel free to suggest another theme, but pay attention to 3 requirements:
– Header and sidebar on left, NOT with a full-width picture on first page.
– boxes of color for each post, sidebar widget, etc. I love this… as opposite of fully white background themes.
– A lot of customization options via graphical interface, for a NOOB like me with zero PHP knowledge.

I started using WordPress in August 2012 using Tarski theme, in October 2012 I found Graphene theme. I done a survey and people preferred Graphene.

Over time I improved the design of Graphere theme, but this theme is NOT RESPONSIVE.
In 2014 I was looking for a better, responsive theme that fits my 3 criteria, the ONLY ONE found was Suffusion, it does resize according browser window but don’t hide sidebar automatically like a true responsive theme. I done again a survey and people preferred Graphene again.

So what can be improved without making a major change that may lead to loss of audience?

The Graphene theme was dark blue since early 2014, links blue, some part of text red, but people complained that there’s too many colors, I changed them to gray in April 2015 (this shall be done in March for Lee Kuan Yew death), but other people complained about lack of contrast, I changed to light blue in April, then back to dark blue at end of April…

On 27 June came with idea to remove blue background from article titles and use horizontal lines instead, also I changed background to gray instead of white, also removed BOLD from titles and enlarged font size instead, from 20 to 24 and small titles from 18 to 20 (inspired from what other websites do, bigger titles). Was this a BAD decision?

One of these changes (most likely removal of prev/next pots links) had negative effects increased bounce ratio. I restored the blue theme, then in July tried 2 more options. Every weekend I done a small change, testing effects on visitor behavior of each theme, week by week. Also figured out how to make page titles and in-page headings gradient like widget headers.

Using WP Mobile Edition

In early 2016 there was a news about a Google update that penalize websites that are not readable on phones, downranking them when user search something on mobile devices. Since Graphene is not responsive, I installed WP Mobile Edition plugin that automatically switch to a different theme when visited from mobile devices. The downside of this is that the mobile theme did not displayed sidebar widgets were I placed code for Clicky and for chat widget, effectively preventing visitors to contact me from phones, unless they click the switcher at bottom of page to see desktop theme.

After many small changes during the years, website became looking like this in October 2017.

 

Switching to Graphene 2.0

After years in which I desperately tried to find a responsive theme similar with the highly loved Graphene Theme, in October 2017 Graphene team launched Graphene 2.0 with Bootstrap responsive framework replacing 960.gs grid system.

I updated my website theme to 2.0 and finally I have a responsive website that looks good on both computers and mobile phones. Once again, I customized theme colors, making different shades of gray for main content, sidebar, titles, etc (instead of same white background), customized fonts, spaces between paragraphs, tables, etc.

Probably most of you liked navigation bar to be on left side. Me too, but HAD TO put it on right side because when viewed on mobile phone (or small browser window on computer), left column appear at top and right column under it.

Feel free to suggest changes!

No paid web development offers please!

Even if I am making money by offering some services on this website, the website itself offer mostly free information so I appreciate if you return in favor with FREE advices, NOT paid offers. I am using only themes available in https://wordpress.org/themes/, constantly updated and maintained by volunteers. I am NOT interested to pay any developer to make a custom theme just for me, which risk to break when WordPress core files are updated and have to pay again the developer to update theme.

4 comments

Skip to comment form

  1. Hey!Assalamualaikuum Cik Bedah here! I just wanted to be a kaypo and ask you if you could redesign your website to fit in with my irritating-ness. I know this task is hard to fulfil as my personality is difficult to duplicate into drawing form. Also, you should provide more baking tips to your readers as many of your readers are my mak cik friends who are ‘expert’ bakers. Actually, that’s false. So, in order to help their families, I am advising you to put never-before-seen tips on how to bake on your website. PS: I got 50 people reading your website. NO HATE AT ALL. All love :3

    1. Some people have no lives!

  2. IKR LIKE OMG

    1. You left 3 stupid comments and sent 3 messages on chat while I was offline, with invalid email… do you think that I take in serious your bullshit?

Leave a Reply

Your email address will not be published.