Jump to content

Cre8asiteforums Internet Marketing
and Conversion Web Design


Photo
- - - - -

Mobile First


  • Please log in to reply
32 replies to this topic

#1 fisicx

fisicx

    Sonic Boom Member

  • Hall Of Fame
  • 1976 posts

Posted 21 December 2016 - 03:20 AM

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...slider-overlay/

 

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



#2 cre8pc

cre8pc

    Dream Catcher Forums Founder

  • Admin - Top Level
  • 14788 posts

Posted 21 December 2016 - 10:37 AM

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



#3 Nny777

Nny777

    Gravity Master Member

  • Members
  • 194 posts

Posted 22 December 2016 - 09:19 AM

Very neat!



#4 bobbb

bobbb

    Sonic Boom Member

  • Hall Of Fame
  • 3394 posts

Posted 22 December 2016 - 10:59 AM

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.



#5 fisicx

fisicx

    Sonic Boom Member

  • Hall Of Fame
  • 1976 posts

Posted 23 December 2016 - 03:53 AM

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.



#6 bobbb

bobbb

    Sonic Boom Member

  • Hall Of Fame
  • 3394 posts

Posted 23 December 2016 - 09:49 AM

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.



#7 Pete

Pete

    Light Speed Member

  • 500 Posts Club
  • 539 posts

Posted 24 December 2016 - 09:31 AM

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, 24 December 2016 - 09:31 AM.


#8 Pete

Pete

    Light Speed Member

  • 500 Posts Club
  • 539 posts

Posted 24 December 2016 - 11:24 AM

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, 24 December 2016 - 11:24 AM.


#9 bobbb

bobbb

    Sonic Boom Member

  • Hall Of Fame
  • 3394 posts

Posted 24 December 2016 - 01:03 PM

 

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.



#10 Pete

Pete

    Light Speed Member

  • 500 Posts Club
  • 539 posts

Posted 25 December 2016 - 12:01 PM

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.



#11 cre8pc

cre8pc

    Dream Catcher Forums Founder

  • Admin - Top Level
  • 14788 posts

Posted 25 December 2016 - 04:48 PM

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?



#12 glyn

glyn

    Sonic Boom Member

  • Hall Of Fame
  • 3285 posts

Posted 26 December 2016 - 04:12 PM

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

#13 fisicx

fisicx

    Sonic Boom Member

  • Hall Of Fame
  • 1976 posts

Posted 28 December 2016 - 10:26 AM

@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.



#14 Pete

Pete

    Light Speed Member

  • 500 Posts Club
  • 539 posts

Posted 28 December 2016 - 10:38 AM

@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.webdesign...he-home-button/


Edited by Pete, 28 December 2016 - 10:41 AM.


#15 bobbb

bobbb

    Sonic Boom Member

  • Hall Of Fame
  • 3394 posts

Posted 28 December 2016 - 10:39 AM

 

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, 28 December 2016 - 10:44 AM.


#16 Pete

Pete

    Light Speed Member

  • 500 Posts Club
  • 539 posts

Posted 28 December 2016 - 10:45 AM

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



#17 fisicx

fisicx

    Sonic Boom Member

  • Hall Of Fame
  • 1976 posts

Posted 28 December 2016 - 11:15 AM

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...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, 28 December 2016 - 11:16 AM.


#18 fisicx

fisicx

    Sonic Boom Member

  • Hall Of Fame
  • 1976 posts

Posted 28 December 2016 - 11:23 AM

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.



#19 Pete

Pete

    Light Speed Member

  • 500 Posts Club
  • 539 posts

Posted 28 December 2016 - 11:36 AM

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. 



#20 Pete

Pete

    Light Speed Member

  • 500 Posts Club
  • 539 posts

Posted 28 December 2016 - 11:40 AM

  • 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.



#21 fisicx

fisicx

    Sonic Boom Member

  • Hall Of Fame
  • 1976 posts

Posted 28 December 2016 - 12:01 PM

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 {



#22 cre8pc

cre8pc

    Dream Catcher Forums Founder

  • Admin - Top Level
  • 14788 posts

Posted 28 December 2016 - 12:47 PM

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.



#23 fisicx

fisicx

    Sonic Boom Member

  • Hall Of Fame
  • 1976 posts

Posted 29 December 2016 - 02:30 AM

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.



#24 Pete

Pete

    Light Speed Member

  • 500 Posts Club
  • 539 posts

Posted 29 December 2016 - 04:41 AM

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?



#25 fisicx

fisicx

    Sonic Boom Member

  • Hall Of Fame
  • 1976 posts

Posted 29 December 2016 - 05:39 AM

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.



#26 Pete

Pete

    Light Speed Member

  • 500 Posts Club
  • 539 posts

Posted 30 December 2016 - 07:19 AM

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, 30 December 2016 - 07:37 AM.


#27 Pete

Pete

    Light Speed Member

  • 500 Posts Club
  • 539 posts

Posted 30 December 2016 - 07:41 AM

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. 



#28 fisicx

fisicx

    Sonic Boom Member

  • Hall Of Fame
  • 1976 posts

Posted 01 January 2017 - 09:33 AM

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



#29 Pete

Pete

    Light Speed Member

  • 500 Posts Club
  • 539 posts

Posted 01 January 2017 - 10:52 AM

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.



#30 cre8pc

cre8pc

    Dream Catcher Forums Founder

  • Admin - Top Level
  • 14788 posts

Posted 19 January 2017 - 04:49 PM

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.cryoutcr...-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.



#31 bobbb

bobbb

    Sonic Boom Member

  • Hall Of Fame
  • 3394 posts

Posted 17 March 2017 - 02:07 PM

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://webdesignerh...-css-accordion/

How to Create a Pure CSS Accordion Using Radio Buttons
https://webdesignerh...-radio-buttons/


Edited by bobbb, 17 March 2017 - 02:08 PM.


#32 cre8pc

cre8pc

    Dream Catcher Forums Founder

  • Admin - Top Level
  • 14788 posts

Posted 17 March 2017 - 03:13 PM

I've been buried in mobile nav myself this week and facing a new site with 4 levels. Found this today...

 

https://sitesforprof...avigation-menus



#33 bobbb

bobbb

    Sonic Boom Member

  • Hall Of Fame
  • 3394 posts

Posted 17 March 2017 - 07:02 PM

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, 17 March 2017 - 07:28 PM.




RSS Feed

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users