Jump to content

Cre8asiteforums

Web Site Design, Usability, SEO & Marketing Discussion and Support

  • Announcements

    • cre8pc

      20 Years! Cre8asiteforums 1998 - 2018   01/18/2018

      Cre8asiteforums In Its 20th Year In case you didn't know, Internet Marketing Ninjas released many of the online forums they had acquired, such as WebmasterWorld, SEOChat, several DevShed properties and these forums back to their founders. You will notice a new user interface for Cre8asiteforums, the software was upgraded, and it was moved to a new server.  Founder, Kim Krause Berg, who was retained as forums Admin when the forums were sold, is the hotel manager here, with the help of long-time member, "iamlost" as backup. Kim is shouldering the expenses of keeping the place going, so if you have any inclination towards making a donation or putting up a banner, she is most appreciative of your financial support. 
fisicx

Mobile First

Recommended Posts

I've posted about this before and thought you might like an update.

 

I developed a Wordpress theme for mobile (cell) phones and tablets that works equally well on desktops. It's gone through a number of iterations but I'm now nearly where I want to be with it.

 

It is very lightweight and with a few configuration tweaks can be very fast on event the slowest connection.

 

The key is the full width page. Sidebars on a small screen are pretty much useless so I just got rid of them. What I've done instead is give you a onepage scroller on the homepage (people swipe up all the time) that can link to inner pages. The blog displays in one or two columns depending on the screen size. Make the container wider and your get three columns.

 

It's makes full use of the customizer and has a whole range of built in features: SEO, analytics, sliders, text toggles, contact forms and social media. The idea being you shouldn't need to add many, if any, plugins.

 

I'm using it on a number of my own and clients sites and it's going down really well. People like it because they use phones and tablets far more than they use desktops for browsing at that's why it works better than just about all the popular responsive themes.

 

I like it (but then again I'm biased). What do you think: http://onepage.aerin.co.uk/

 

And I'm quite chuffed with how this works: http://onepage.aerin.co.uk/image-slider/slider-overlay/

 

And with a few tweaks it even works nicely with woo: http://bobby.testblog.co.uk/

  • Like 1

Share this post


Link to post
Share on other sites

I'm a fan of your work. Will go check this out, thanks!

  • Like 1

Share this post


Link to post
Share on other sites
I like it (but then again I'm biased). What do you think: http://onepage.aerin.co.uk/

I like the text toggle idea. I see this more and more in other sites. I have one observation and it may be just my preference.

It's the images. I like it when the top of the image lines up with the top of the text. Not pixel perfect just close. Yes it is nit pick but struck me immediately.

Share this post


Link to post
Share on other sites

OK Mr Picky. I've lined up the images for you.

 

I've tried to make this theme as easy to edit as possible. There is the customizer but you can deactivate this and just edit the CSS. And now WP4.7 has the custom CSS thing in the customizer it's even easier.

Share this post


Link to post
Share on other sites

Looks good.

I did not want to mention it at first because I know how it is so easy to just be negative and criticise everything.

  • Like 1

Share this post


Link to post
Share on other sites

I like the text toggle idea. I see this more and more in other sites. I have one observation and it may be just my preference.

It's the images. I like it when the top of the image lines up with the top of the text. Not pixel perfect just close. Yes it is nit pick but struck me immediately.

 

I like text toggle, are you sure search engines do?

 

It's a very nice theme

Edited by Pete

Share this post


Link to post
Share on other sites

A couple of things:

 

  • Is it really necessary to have the home page in the menu at the top? If you click on it nothing happens because you are already there.
  • Lists show in a different font (could not find where you actually set the main font) and list links are not formatted the same as non-list links. So you have to add some CSS for ul and li, which also seems to mess up the menu colors. This could of course be a limitation of my CSS capabilities.
  • If you edit a page then click on view page, you see the page as expected. But if you are viewing a page and click on Edit Page (at the top) you are taken to the home page.
  • Massages?

 

I'm new to this one page malarkey, but have installed on a small site and I have to say it's growing on me.

Edited by Pete

Share this post


Link to post
Share on other sites

 

I like text toggle, are you sure search engines do?

I'm sure they do because if you look at the code which gets rendered on your screen the text is there as is all the text you have not expanded. The SE sees and reads all this.

Share this post


Link to post
Share on other sites

I'm sure they do because if you look at the code which gets rendered on your screen the text is there as is all the text you have not expanded. The SE sees and reads all this.

 

I wondered because you could say the same is true of masked text, e.g. white text on white background. You can see the text in the code but this is (or was) supposed to be a big nono when people used such techniques in the old days to stuff keywords.

Share this post


Link to post
Share on other sites

Wow. I'm impressed. Very nice work. I'll promote it in the next forums newsletter. I like the text toggle thingy too. How do you come up with the name for a theme?

Share this post


Link to post
Share on other sites

The image open in modal box on my android does nothing.

Share this post


Link to post
Share on other sites

@Pete


  • Is it really necessary to have the home page in the menu at the top? If you click on it nothing happens because you are already there. You may not always be on the homepage. Clicking on the Home link when you are on the homepage of any site will do nothing
  • Lists show in a different font (could not find where you actually set the main font) and list links are not formatted the same as non-list links. So you have to add some CSS for ul and li, which also seems to mess up the menu colors. This could of course be a limitation of my CSS capabilities. I'll take a look at this. The font shouldn't change.
  • If you edit a page then click on view page, you see the page as expected. But if you are viewing a page and click on Edit Page (at the top) you are taken to the home page. This is a onepage limitation. Wordpress thinks you are on the homepage no matter where you are on the page so will take you to the editor for the homepage.
  • Massages? Yes, free massages for all users

 

I'm new to this one page malarkey, but have installed on a small site and I have to say it's growing on me. It makes a much bigger impact on touch screens, it just feels more natural to scroll than to click. I never used to like them either but they can work well.

 

The image open in modal box on my android does nothing.

Thanks, I'll look into this but I've just run a couple of tests and it works OK on the emulators I used.

 

Wow. I'm impressed. Very nice work. I'll promote it in the next forums newsletter. I like the text toggle thingy too. How do you come up with the name for a theme?

Thanks Kim. I wrote a book in my youth and the main character was called Aerin. I brought the domain name to mess with and have just used it ever since. When I developed the one page theme the name AerinOne just seemed logical.

 

I keep looking at getting it on Theme Forest but there are so many hoops to jump through.

 

I'm currently working on optimising to the max so it's a fast as a fast thing in a fast place.

Share this post


Link to post
Share on other sites

@Pete

  • Is it really necessary to have the home page in the menu at the top? If you click on it nothing happens because you are already there. You may not always be on the homepage. Clicking on the Home link when you are on the homepage of any site will do nothing

 

True, but what I mean is that it seems the only way to have the home page visible is to have it in the menu. These days I find people often prefer not to have it in the menu as it causes clutter when people can get to it via the site logo or (in this case) the go to top button (which could say "HOME" because that is where it goes)

 

So if I wanted to rely on the logo for getting back home, I can't do that.

 

See:

 

http://www.webdesignerdepot.com/2015/08/the-ux-case-against-the-home-button/

Edited by Pete

Share this post


Link to post
Share on other sites

 

I wondered because you could say the same is true of masked text, e.g. white text on white background. You can see the text in the code but this is (or was) supposed to be a big nono when people used such techniques in the old days to stuff keywords.

I thought of that also.

 

Somehow I think Google can tell the difference between the two. One was keyword stuffing and the other is just more information relative to the rest of the page. You want a visitor to click the more button.

 

If the white on white text was relative to the theme of the page it would not have been hidden from the user who could have surely figured out it was garbage.

 

Just imagine clicking more buttons and seeing KW stuffing garbage. I bet the site would not be on your reading list for too long.

Edited by bobbb

Share this post


Link to post
Share on other sites

I thought of that also.

 

Somehow I think Google can tell the difference between the two. One was keyword stuffing and the other is just more information relative to the rest of the page. You want a visitor to click the more button.

 

If the white on white text was relative to the theme of the page it would not have been hidden to the user who could have surely figured it was garbage.

 

You are probably right. I think it was someone from Yoast (not necessary the be all and end all of SEO) who advised against tabs and spoliers.

 

I have found though, that my content within spoliers and tabs does get indexed so probably OK.

 

These days I find people often prefer not to have it in the menu as it causes clutter when people can get to it via the site logo or (in this case) the go to top button (which could say "HOME" because that is where it goes)

 

 

 

Thinking about it that would be really cool, to be able to change the name of TOP to HOME and somehow lose the now redundant HOME menu item

Share this post


Link to post
Share on other sites

My 'Home' link gets clicks more than the logo. And with this theme when you scroll down there is no logo anymore - all you see is the navbar.

 

And changing 'TOP' to HOME' works on the homepage it's no good if you are halfway down this page: http://onepage.aerin.co.uk/support-topics/where there is no 'TOP' button.

 

I know sites like Amazon and ebay don't have a home button but on sites like these you rarely need to go 'home'. But on a a news site like http://www.bbc.co.uk/newsyou do.

 

The only way to find out what works on your site is to test it.

 

PS: I stopped taking any notice of Yoast a long time ago when I realised how bad their plugin was at doing anything.

Edited by fisicx

Share this post


Link to post
Share on other sites

So if I wanted to rely on the logo for getting back home, I can't do that.

You still can click on the logo (or the site title).

 

The article you liked to was interesting but very focused on a narrow range of websites and the argument to remove the home button/link was tenuous.

Share this post


Link to post
Share on other sites

You still can click on the logo (or the site title).

 

The article you liked to was interesting but very focused on a narrow range of websites and the argument to remove the home button/link was tenuous.

 

I agree. But my point was not so much the rights and wrongs, but giving people the option to have the link or not, and /or customise the text of the TOP button to suit themselves.

Share this post


Link to post
Share on other sites
  • Lists show in a different font (could not find where you actually set the main font) and list links are not formatted the same as non-list links. So you have to add some CSS for ul and li, which also seems to mess up the menu colors. This could of course be a limitation of my CSS capabilities. I'll take a look at this. The font shouldn't change.

 

I'm probably wrong about the font, I was probably disconcerted by the colors of the links, which were just the old old default dark blue and purple. Also the background of the list ul container took on the same background defined in the header background.

Share this post


Link to post
Share on other sites

I agree. But my point was not so much the rights and wrongs, but giving people the option to have the link or not, and /or customise the text of the TOP button to suit themselves.

Aha! I get what you want now. That's an easy fix

 

I'm probably wrong about the font, I was probably disconcerted by the colors of the links, which were just the old old default dark blue and purple. Also the background of the list ul container took on the same background defined in the header background.

No, you are right. I need to tweak. You can edit your own CSS. look for the line: .entry p a and change this to: .entry p a, .entry ul a, .entry p a:visited, .entry ul a:visited {

Share this post


Link to post
Share on other sites

I used to follow the "No Home on Homepage" rule of thumb until WordPress became the norm. It's now an accepted standard and used far more than clicking on logos, which I've never recommended as the way home.

 

Sense of place and findability are my first choice. I always choose a link for "home" on every page in the header and in some cases, repeated in the footer for pages that a mile long for ease of use. If you watch how people navigate pages, it becomes obvious they all have different habits in how they use their mouse, arrows, and browsing styles.

Share this post


Link to post
Share on other sites

I'm an accommodating sort of chap and will bow down to the users needs even if I don't agree with it.

 

So the theme now has the option to edit the 'TOP' label and remove the 'Home' link from the main nav

 

The customizer is a fantastic tool - all you have to do is add the form field and wordpress does the rest.

 

Here's the latest version: onepage.aerin.co.uk/wp-content/uploads/aerinone.zip

 

The image open in modal box on my android does nothing.

I think I've discovered the problem: I hadn't linked any of the images (doh). Can you try again please.

Share this post


Link to post
Share on other sites

I have installed this on my wife's site:

 

https://shoutsistershout.org/

 

I really like it (she hasn't seen it yet so who knows if it will stay)

 

A couple more thoughts:

 

In this case the links to the blog (category and recent posts) used to be in the sidebar.

 

Instead I made a page for the blog "menu"and put that in the main menu.

 

The actual blog "menu" on that page is done by using the amr widgets anywhere plugin, so I could embed the category and recent posts widgets onto the page.

 

(Had to change the background div in CSS as it was grey and so the text looked bad)

.topbar

{background:none !important}

I wonder what other ways there are to deal with a blog, is this the best solution? Putting those navigation widgets in the footer would hide the blog away I think, and the blog is the main part of the site so how else to deal with it?

Share this post


Link to post
Share on other sites

I've been struggling with an elegant way to do this for a while and haven't yet found a good solution.

 

I cheated and linked from the main menu to a page which introduces the blog and then links to the actual blog page. If you use an h4 for the links you get some nice buttons for the categories and what not.

 

On the 'About' page use the shortcode [acf] for a rather smart contact form wit styling that matches the rest of the site. And it has the advantage that it stores all the messages in the dashboard as well as forwarding the emails.

Share this post


Link to post
Share on other sites

Update: we are sticking with this theme on the site I mentioned, very nice, but a couple of things you may want to address:

 

  • h2 in the footer (widget titles) doesn't take on the color specified in the Customizer for headings. (I added some CSS) Also is too close to previous widget (I have added top-margin and this gives a much nicer separation between the widgets)
  • When viewed on desktop, width of RH footer is much narrower than LH.
  • Tags page has some issues (see Tags widget in RH footer)
  • Blog posts Category page e.g. here has margins to left right and top, but normal pages don't. The LR margins are very obvious and seem particularly odd when viewing on mobile as the margins are more obvious there than on desktop view
  • Font awesome icons not working in menu when using Font Awesome for menus plugin. I tested this by switching between this theme and Twenty Sixteen, where FA shows in menus.
  • If you untick homepage scrolling, page background disapperaers
Edited by Pete

Share this post


Link to post
Share on other sites

I'm an accommodating sort of chap and will bow down to the users needs even if I don't agree with it.

 

So the theme now has the option to edit the 'TOP' label and remove the 'Home' link from the main nav

 

 

That is very accommodating of you, thanks.

 

However changing the wording of the TOP button is a bit limiting as the button size (width) doesn't change to fit a longer word.

Share this post


Link to post
Share on other sites

It should do. Did you install the version I linked to? I've changed the CSS so the width adjusts to fit the word.

Share this post


Link to post
Share on other sites

It should do. Did you install the version I linked to? I've changed the CSS so the width adjusts to fit the word.

 

Yes, I updated. I think it was some cache issue as it does work now.

  • Like 1

Share this post


Link to post
Share on other sites

I'm thinking outloud here...

 

I have a hobby site that has to be simplified for both users and me to manage. It requires photos of items and my daughter wants to help me write frequent blog posts about the items as I make them or people use them (I get lots of custom orders and people experiment and send me more ideas).

 

I like the simplicity and speed of your homepage and the text/toggle approach, which I was thinking of using to showcase or promote items and/or link to blog posts.

 

I have an Etsy shop and Amazon storefront for sales, so I don't need a cart. I do need nice entry ways to those two sites, which I envision in the top blocks.

 

I like the layout of the blog here https://www.cryoutcreations.eu/wordpress-themes/verbosa I set my daughter up with it and I love the layout. Rather than have 2 blog themes on one site, I wondered if your's can be modified to create a blog layout like Verbosa. I'm in debate as to whether to keep the side navigation, as your theme is nav on top and if users go to read the blog, the sudden change is not a good idea from a UX perspective.

 

My site is peacefulwraps.com I would want to use the logo in the header. The collage banner is flexible.I dislike sliders, which is why it's there. It doesn't have any conversions purpose though.

 

Am interested in your thoughts. I need fast, easy to manage, mobile, but that will deal with images since they are items where looks matter. I actually sell more on the PW Facebook page, which is more active and lots of word of mouth.

Share this post


Link to post
Share on other sites

OK so I'm bring up an old thread.

I liked the text toggle idea in the link above and wanted to test this out so I did a bit of research and found these two with no javascript at all. Clean, simple.

How to Create a Pure CSS Accordion
https://webdesignerhut.com/pure-css-accordion/

How to Create a Pure CSS Accordion Using Radio Buttons
https://webdesignerhut.com/pure-css-accordion-using-radio-buttons/

Edited by bobbb

Share this post


Link to post
Share on other sites

This is a lot of options which are interesting and in the end analysis the writer does not say to what he attributes the increase in traffic in 2016.

Mobile users are interacting with navigation elements a whole lot less than they used to be.....[graph]... Doesn’t take a genius to see that users aren’t tapping menu buttons much anymore.

He seems to be saying a lot of what is being said here about the hamburger helper. I've heard Grumpus and iamlost say something quite close to this.

320 pixels is not a lot of space and I'm back to my perpetual argument that smartphones are powerful stuff but limiting and today we have to dumb things down to the least common denominator. We have gone back to before the 640x480 VGA screens but with super resolution and an app for every function or site. I thought we invented browsers to get around that. What's next? Punched cards or paper tape?

There is no way I would work with a 640x480 VGA screen and 3 inch keyboard and no way I would watch a 15 inch colour television no matter what super resolution you can get.

Edited by bobbb

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×