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 https://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 (2016)

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 theme (2017)

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.
An update of Graphene theme allowed sidebar on either side, keeping it below main content when viewed on phone.

Feel free to suggest changes!

Below screenshots shows the LAST version of Graphene 2.0 theme
(March 2020, just before changing to Kaira theme).
 

And a experimet with Franz Josef theme… visually nice, but bugged and lack social media buttons and other MUST-HAVE features

Switch to Vogue theme by Kaira (2020)

Even with responsive Graphene 2.0, people keep criticizing my website for being ugly, ancient, designed in 1990s “is so poorly designed that at first impression I though that is a SCAM site, but I gave a second change and saw that you have great products”

I wanted specifically a theme without banner. On Graphene I made an image with site title and email address to protect it from SPAM, but many people do not pay attention to banner and asked via live chat box what is my email, other people complained that there is no button to go to homepage, the did not realized banner is linked to homepage). So banner was useless, it eat screen space and slowed down website with a fraction of second.

Over years, traffic moved from computers to phones, search engines algorithms evolved, thus having a fast loading website with post excerpts placed in grid or masonry layout is better than having 10 full length posts on home page, to get as many keywords is possible.

My attention went again to Franz Josef, I set up a temporary site and made a mock-up with that theme to ask website visitors what they think about it. Most said that is much better than Graphene, but it lacks social media buttons and have some compatibility bugs with latest WordPress version. They stopped updating Franz Josef in January 2018 to focus on Graphene and its paid version Graphene Plus ($55/year), that add option of masonry layout and more customization. While Graphene Plus may solve my needs, I do not want more comments about bad website design. Thousands themes been launched over years and I think that there may be better options.

While looking through WordPress themes, I came across Overlay theme by Kaira. On 1 March I emailed https://kairaweb.com/wordpress-themes/ asking to recommend me a theme having a couple of features, because they made 12 nearly-similar themes and I did not had time to test all myself. Got reply recommending me Overlay theme which is their newest product with lots of customization options, being newest product it do not have yet a DEMO that I can test before purchasing (their other themes have DEMO where I played with configuration and made sure that suits my website).

I bought Overlay ($35 – license for 5 sites) but it lacked 2 features I need (ability to put social buttons left/right side of website title, they were in top bar above title and this added few unnecessary pixels from screen space, and ability to exclude certain categories from blog homepage). Kaira agreed to exchange Overlay with another theme, so I choose Vogue, received on 13 March.

On 15 March 2020 I started redesigning website

  • Took few hours to add featured images for all posts, and manually write post excerpts (WordPress allow by default excerpts but it chose first 55 words (or other number) from each post. Kaira themes as well as most themes, you MUST add a feature image to show it in post excerpt. Graphene theme excerpts automatically pick 1st image from post (is possible to replace them by adding a featured image chosen by me).
  • Moved sidebar to right because it seems to be more popular on blogs (in contradiction with email services having sidebar on left).
  • Beside theme change, someone advised me to use tinypng.com with it I could reduce size of my PNG images with 60-70% compared with the size generated by saving in Adobe Photoshop.
  • I also want to switch from All in One SEO pack to Yoast SEO plugin which seems that its popularity increased last few years.
  • Once I finalize website redesign, I make home page blog full width (removing sidebar from homepage, still showing on posts).
  • In the future I will continue to do changes in CSS code and colors to reduce number of people complaining about bad website design.

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 thoughts on “Bad website design? you can help!

  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. 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. Required fields are marked *