Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Reworked and recoded but I'm pants as design

Featured Replies

I've asked before about this theme and got some good feedback so I'm back for another go.

 

This is the full width version: http://onepage.aerin.co.uk/

 

This is a fixed width version: http://clean.testblog.co.uk/

 

Colours and layouts and whatever are all set in the customizer.

 

It performs well in speed tests (if you ignore the analytics and heatmapping scripts) and doesn't appear to have any major bugs.

 

But I'm not happy with the design. It looks OK and people like it but it doesn't quite have the the wow factor.

 

Suggestions would be most appreciated

 

And while you might not like wordpress, the ROI on theme and plugin development is excellent so I'll just stick with it for a while.

 

Well, I like WordPress. :)

 

Anyhow, my one comment for now is that I think the text on the full width version is too wide for comfortable reading.

Thumbs up from me. I think it works well.

 

Maybe the wow factor would come from people adding their own design factors, images, etc.

 

I agree with Jane B. I hadn't noticed when checking both of the pages in responsinator, where they both work nicely. When checking the full-width version on the PC (1920x1200) it feels like sitting too close to a cinema screen. I guess that's what the fixed-width one is for and you choose each depending on screen resolution.

 

Other obvious observations (just in case): Onepage has a red border around the menu upon scroll (in responsinator). Clean menu content upon scroll aligns to the left in portrait and centered in Landscape (in responsinator).

 

Also, it might be nice to separate the 3rd button as shown here:

 

padding.png

Edited by Grant Barker

  • Author

I would, but I haven't found one that's any good.

 

You'd think this would be easy but they all come up with suggestions that would mean a whole load of admin code to allow users to edit the layout.

 

All I want is some simple fixes that give the theme a bit of bling.

 

@@Grant Barker The red line has gone and the buttons now have some padding.

 

With regards the width. I can add an option to display a 100% page width but set the content width to whatever you want.

I just noticed that the testblog could use similar left-hand padding in the very top section, when the screen size is narrow. (Similar to the sections below it.)

Pretty obvious simple stuff from me, but I like to get involved on one par or another.

  • Author

Noticed that myself.

 

I'm working on the option to have a full width page with an option to fix the content width.

 

Also fixed the option have a logo and/or site title and tagline.

There are a lot of really great elements to it, but the thick black lines everywhere are killing it for me, especially the hrs.

  • Author

Thanks @@robbydesigns

  • I'll have a think about the background images. They are optional, it just added the option in the customizer because people like this sort of thing.
  • Do you have an example of a nav bar like this?
  • This is just a bog-standard WP gallery. I'll do some styling on this. Not sure the grid will work here (not that I'm a fan of grids) but I will have a play.
  • Because this is a site for tablet/mobile first the images tend to fill the content width anyway so putting them on the left may not change much. I'll do some more user testing on this
  • I'll add a close button (all you need to do is touch anywhere on the screen to close the modal)
  • Top button done. Just need to work out how to get it into the main content - it probably needs a centered div with the button on the right
  • The line height and spacing is something I've been testing for a long time. This might be a tad big but only a tiny amount - all results show better readability with bigger line heights and paragraph margins.
  • The theme now has a 'full width' option but a max-width on the content. This will allow people to adjust it themselves.

 

I'm trying to avoid using a grid as this often means all sorts of shordcodes and settings to make it work. The idea behind this theme is to keep everything as simple as possible. There's around 200 users wordwide so far and they all seem to like it so I'd don't want to change it too much.

 

@@robbydesigns, @@FuzzyLogic and others, happy to pay you or anyone else reading to do the design pizzazz

Edited by fisicx

  • Author

There are a lot of really great elements to it, but the thick black lines everywhere are killing it for me, especially the hrs.

What thick black lines? Where are the hrs you can see?

  • Author

Aha!

 

I see what you mean now. Here's the first iteration: http://clean.testblog.co.uk/

 

Ussrs can set the background colour in the customizer

 

The only thing I want to do now is close the small screen dropdown when you click on a link.

  • Author

I agree.

 

Which is why in the customizer you can set the width of the main content. It's about right at 960px but you can make it as wide or as narrow as you want.

Being very limited, trying to keep as much as possible, this is probably what I would do with it (more or less) - ignore the repeating background in the image, the background is still the same as you had it, also I have left open the possibility for the user to be able to choose the colour of the buttons since it is just a flat blue in my iteration.

 

 

  • Author

Thanks for that.

 

It's a fixed background so there shouldn't be any repeats (code courtesy of @rbrtsmith). It may be the software you used to create the screenshot that shows the tiling.

 

You can change pretty much all the colours, opacity and backgrounds and the wordpress customizer has a nifty custom CSS feature so you can make the buttons look like anything you want.

The real differences are the spacing between images, the overall space width (white content area), the content no longer encroaching into the image space, the header and footer full width with the header text to the side, and removal of the full width email button for a smaller one.

 

In simple terms I have tried to add more white space, a little colour to the buttons for easier on the eye contrast and a little more structural interest.

  • Author

OK Understand now.

 

The theme has option to display the header content on the left or centred.

 

The image spacing I get but the three images at the top are just a standard wordpress gallery. This has umpteen built in styling options (nothing to do with the theme) so I'd rather let the user decide how they want their images displayed (if they even use the gallery).

 

The featured images are something I'm experimenting with. On a usability forum I use someone suggested lining up the images with the top of the titles. I'm not convinced about this. But I can certainly add some padding left/bottom. This does need to be responsive though as the padding needs to reduce as the screen narrows. I may make it a percentage so it don't have to fiddle with lots of media queries.

 

The send button size and position are user options as are the colours, form fields and labels.

 

Good suggestion though, thanks.

The only thing I can respond to here is this

 

On a usability forum I use someone suggested lining up the images with the top of the titles

 

 

Line them up to the top of the paragraph, not the title, it looks idiotic from there.

  • 3 weeks later...

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.