Re: Nav bar warning "You have at least one button with both a link and a menu
Thanks so much, Gary. You are really kind to take the time to do this, especially so I can "see" it. I love it a lot. I will take the time to digest and figure out how you did it so I can apply or start over. I do want the mobile version and computer version to have quick load times, but how can I do that and make it "look" this way, if I do separate pages?
And for the dog site, I know I need to consolidate a lot of stuff...so this way with 5 pages, I am learning and seeing if I can manage to do the larger site and how.
As for the "Gallery" would love to hear what you have to say. I can start another thread, if that's best. I've used that program mostly because I can sell stuff with PayPal. For my mom's site, I'd prefer them reaching out to her so I didn't add the selling part.
I haven't used Xara much for Gallery as I haven't been crazy about how I did it. Let me know if you want to help, guide me..start a new thread so it helps others...
Sue
Quote:
Originally Posted by
Initiostar
OK no problem Sue - it was easier to start from scratch: this is a test template that works across desktop, tablet and mobile.
https://initiostar.co.uk/demo/sue/#
It is a one-page standard website, 1200px desktop width, single variant 540px wide, Scale-to-fit-Width maximum 1200px. The menu links are to text headings (where the target text is a Heading 2 style). Personally, I would still revert to using more pages as the expected page load time for a full-content mobile variant is >5s.
The test template is entirely adaptable, but it maintains a style consistency with text styles and named colours (easy to change across the site) :
Attachment 131208
The mobile variant uses a common hamburger icon as a 'top-of-page' link in order to maximise the viewing window; there is a single top-of-page arrow in both variants too.
I have left the standard mobile variant menu layer in situ should you want to experiment with it, but avoid popup links to anchors (it can get confused without some additional code).
There are (IMO) better ways for creating a picture gallery (but that's a whole different storyline).
Hopefully, this give you a few ideas - happy to answer any questions :D
Gary
Re: Nav bar warning "You have at least one button with both a link and a menu
Okay, Gary...here's some questions, some dumb. Why the "menu spacer?"
How did you get a nice small frame around the man's picture on the 1st page? I work in photoshop and know how but have never figured out here and it should be so darn simple! I tried to in Xara to see what you had done, but I could not.
I love the one arrow that slides down the page. I hadn't thought of that and earlier today added an error on each section. There's a lot to like on what you did. Now for me to learn!
Even when I pull out a shape (placeholder) sometimes it doesn't stay square on the edges and concaves..and that has me baffled what setting I hit that does that.
So for speed, leave the computer the way it is and for the mobile add pages so that it loads fast? What would you do?
Also on the dog site, would you delete the mobile version, so that I am fixing one version and then add it later, or do 1 page at a time for each versions? And I may start from scratch now...so many things to think about and I like that you have been so good at letting me pick your brain!
Thanks so much! I"m glad I chose to write in.
Sue
Re: Nav bar warning "You have at least one button with both a link and a menu
Gary, found how to do the shape, frame around .... trying to figure out a few things that you did and why..
On the variant mobile, the menu made and hidden on the left side..why? What and how does that work?
Can you explain the "menu spacer" you made??
Re: Nav bar warning "You have at least one button with both a link and a menu
Quote:
Originally Posted by
SueB
Okay, Gary...here's some questions, some dumb. Why the "menu spacer?"
How did you get a nice small frame around the man's picture on the 1st page? I work in photoshop and know how but have never figured out here and it should be so darn simple! I tried to in Xara to see what you had done, but I could not.
I love the one arrow that slides down the page. I hadn't thought of that and earlier today added an error on each section. There's a lot to like on what you did. Now for me to learn!
Even when I pull out a shape (placeholder) sometimes it doesn't stay square on the edges and concaves. And that has me baffled what setting I hit that does that.
So for speed, leave the computer the way it is and for the mobile add pages so that it loads fast? What would you do?
Also on the dog site, would you delete the mobile version, so that I am fixing one version and then add it later, or do 1 page at a time for each versions? And I may start from scratch now...so many things to think about and I like that you have been so good at letting me pick your brain!
Thanks so much! I'm glad I chose to write in.
Sue
Sue, let me try to answer some of the questions:
1. The 'menu spacer' is just a temporary (off-page) guide that I place between text links to make the space between them the same; you could be more precise and use the ruler and vertical guides.
2. The frame around the picture is (in this case) a line; select the picture, right click on any colour from the colour bar, pick line colour in the drop down and set the line width to your choice (in the example it was 4px). The are other ways to do this too.
3. You have the updated template from me - I would copy and paste the content from your own 'web' design file into the new template and rearrange to suit the increased page width for both variants. Only then will you get a feel for what it looks like for real. I'd use the heading anchors as they are in the new template for now.
4. Leave your working live site as it is - you could create a test site by adding another directory/folder (say) 'test'. You can then upload your test site to this folder and access it with http://www.beverlyee.com/test/
5. If you do this, then you can review the performance of your new site using a Google browser; hit F12 and you will see a tab called 'Lighthouse' - just run this and it will provide you with a performance guide and other info.
Personally, I would focus on one site at a time; maybe sort this one out first?
Chris and Acorn had some good ideas for the Dogs site; if I read the suggestions correctly, the first task would be to get all the info for each dog into its own page and create a menu structure that is easy to follow, down and back up. In terms of a process, I always set up the desktop and mobile structure together, then work through the pages one-by-one. The challenge otherwise is a you get a great desktop site only to find that it does not transition well into a mobile variant. But different designers work if different ways.
Gary
Re: Nav bar warning "You have at least one button with both a link and a menu
Quote:
Originally Posted by
Initiostar
Sue, let me try to answer some of the questions:
1. The 'menu spacer' is just a temporary (off-page) guide that I place between text links to make the space between them the same; you could be more precise and use the ruler and vertical guides.
2. The frame around the picture is (in this case) a line; select the picture, right click on any colour from the colour bar, pick line colour in the drop down and set the line width to your choice (in the example it was 4px). The are other ways to do this too.
3. You have the updated template from me - I would copy and paste the content from your own 'web' design file into the new template and rearrange to suit the increased page width for both variants. Only then will you get a feel for what it looks like for real. I'd use the heading anchors as they are in the new template for now.
4. Leave your working live site as it is - you could create a test site by adding another directory/folder (say) 'test'. You can then upload your test site to this folder and access it with
http://www.beverlyee.com/test/
5. If you do this, then you can review the performance of your new site using a Google browser; hit F12 and you will see a tab called 'Lighthouse' - just run this and it will provide you with a performance guide and other info.
Personally, I would focus on one site at a time; maybe sort this one out first?
Chris and Acorn had some good ideas for the Dogs site; if I read the suggestions correctly, the first task would be to get all the info for each dog into its own page and create a menu structure that is easy to follow, down and back up. In terms of a process, I always set up the desktop and mobile structure together, then work through the pages one-by-one. The challenge otherwise is a you get a great desktop site only to find that it does not transition well into a mobile variant. But different designers work if different ways.
Gary
Thanks Gary. I get #1 now. Figured out #2 after I sent the reply. It was a duh moment! Just not a place I had looked for it.
I really like your template and can't thank you enough. I love the size pages you created.
Thanks for #4, agree, great idea. Although I'm able to preview and check things, I guess not the same and GREAT idea to tell me about the "lighthouse" tab...I've never seen that!
Yes, will focus on the 1 site at a time. That's all I can handle. LOL That's why I did my mom's short and much more manageable since I started fresh.
I agree, Chris and Acorn, had good suggestions. I need to go back and re-read them.
#1Next question: Do we always have to have a pasteboard background and a rectangle page background? And if starting off on a blank page, how is that created and do you name it? As you can tell, not something I know anything about or have tried.
#2 question: When you set up the desktop/mobile version, you create your 1st page, call it a template for yourself, and then duplicate those pages a certain number of them or how to you do both at the same time? I think when I started using Xara I did do that and then someone advised to do just the desktop and then tell xara to do the mobile and you can tweak the mobile more easily that way. It's always good to hear how others do things and I can learn...and I'm almost always willing to try. I like to learn and appreciate you taking the time to answer and show me more than words can say!
Sue
Re: Nav bar warning "You have at least one button with both a link and a menu
Quote:
Originally Posted by
SueB
Thanks Gary. I get #1 now. Figured out #2 after I sent the reply. It was a duh moment! Just not a place I had looked for it.
I really like your template and can't thank you enough. I love the size pages you created.
Thanks for #4, agree, great idea. Although I'm able to preview and check things, I guess not the same and GREAT idea to tell me about the "lighthouse" tab...I've never seen that!
Yes, will focus on the 1 site at a time. That's all I can handle. LOL That's why I did my mom's short and much more manageable since I started fresh.
I agree, Chris and Acorn, had good suggestions. I need to go back and re-read them.
#1Next question: Do we always have to have a pasteboard background and a rectangle page background? And if starting off on a blank page, how is that created and do you name it? As you can tell, not something I know anything about or have tried.
#2 question: When you set up the desktop/mobile version, you create your 1st page, call it a template for yourself, and then duplicate those pages a certain number of them or how to you do both at the same time? I think when I started using Xara I did do that and then someone advised to do just the desktop and then tell xara to do the mobile and you can tweak the mobile more easily that way. It's always good to hear how others do things and I can learn...and I'm almost always willing to try. I like to learn and appreciate you taking the time to answer and show me more than words can say!
Sue
#1: Where a document is set to a web page, it automatically creates a rectangle for the Page layer and Pasteboard layer and you will see these are locked. You can of course make changes to those layers - most of this is explained in the Help manual. When you start with a blank page it is given the name 'index' and as you add additional pages you can give them a meaningful name.
#2 There are many different approaches - my preference is to create structure that includes a desktop and mobile variant at the beginning. There are though lots of templates now that come with a mobile and desktop structure - just that your classic Wild Theme doesn't. It is really up to the designer to do what they feel comfortable doing; some will start with a blank page, others a template and some will use both depending on the requirement.
Gary
Re: Nav bar warning "You have at least one button with both a link and a menu
Quote:
Originally Posted by
Initiostar
#1: Where a document is set to a web page, it automatically creates a rectangle for the Page layer and Pasteboard layer and you will see these are locked. You can of course make changes to those layers - most of this is explained in the Help manual. When you start with a blank page it is given the name 'index' and as you add additional pages you can give them a meaningful name.
#2 There are many different approaches - my preference is to create structure that includes a desktop and mobile variant at the beginning. There are though lots of templates now that come with a mobile and desktop structure - just that your classic Wild Theme doesn't. It is really up to the designer to do what they feel comfortable doing; some will start with a blank page, others a template and some will use both depending on the requirement.
Gary
Thanks for #1, I started practicing and also reading the manual. Since I'm so visual, I will see if I can find some videos too.
#2, actually I always get a template that has desktop and mobile...and this one did too. Not as nice as you did though. :)
Also would like to understand how to make the mobile links into the "hamburger" in the style that you set up. I've only done the hamburger with Xara's navigation...so need a bit more help on this one and then I think I am good for a bit. I'm getting a lot of it but the mobile with the hamburger on the one you created, I don't know how to link it together right.
Thanks again for your time and knowledge...=D>
Re: Nav bar warning "You have at least one button with both a link and a menu
Quote:
Also would like to understand how to make the mobile links into the "hamburger" in the style that you set up
Hi Sue,
A picture probably explains it more than lots of words:
Attachment 131219
WRT to the Beardies site that kicked-off this thread, I took Acorn's idea from earlier in the thread (which to me was like 'family-tree menu') and turned it into a family-tree photo menu on a dedicated Beardies page (rather than just a dropdown menu). Chris's idea for a dedicated page for each Beardie would work well with a family-tree menu and in-page heading/anchor links.
The Fun Days and Links are popup menus; this gives you a lot more space to play with; not sure this is the best approach, but it's an idea.
https://initiostar.co.uk/demo/testBeardie/index.htm. Not by any means a template and the mobile menu needs some bug fixing too.
There is some great content across your Beardies site, but it's no mean task to embark on changing too much of the site.
If there are specific ideas you like, I would start another thread.
Gary
Re: Nav bar warning "You have at least one button with both a link and a menu
Quote:
Originally Posted by
Initiostar
Hi Sue,
A picture probably explains it more than lots of words:
Attachment 131219
WRT to the Beardies site that kicked-off this thread, I took Acorn's idea from earlier in the thread (which to me was like 'family-tree menu') and turned it into a family-tree photo menu on a dedicated Beardies page (rather than just a dropdown menu). Chris's idea for a dedicated page for each Beardie would work well with a family-tree menu and in-page heading/anchor links.
The Fun Days and Links are popup menus; this gives you a lot more space to play with; not sure this is the best approach, but it's an idea.
https://initiostar.co.uk/demo/testBeardie/index.htm. Not by any means a template and the mobile menu needs some bug fixing too.
There is some great content across your Beardies site, but it's no mean task to embark on changing too much of the site.
If there are specific ideas you like, I would start another thread.
Gary
Hi Gary. The attachment says "invalid." :(
I like what you did...on the index.htm...and agree, would like to do some of the items. I like the "family tree" very much. Yep, that's my goal.
I was asking specifically how to incorporate what you set up on the Beverlyee site, where the menu was hidden on the site and I thought that I needed to do something to add to it to create the hamburger mobile version. If not, that's okay. Just trying to learn from your examples.
Can you share the last version of the xar file so I can pull it apart and look at how you did the hamburger menu...please. If you have the time...
I will start a thread on a few things, including doing the mobile hamburger to get more ideas...and if I do it on my mom's site, it will make it easier for the dog site in the end.
Good job figuring out what do was related to who...wow! impressive!
Sue
2 Attachment(s)
Re: Nav bar warning "You have at least one button with both a link and a menu
Let's try the picture again Sue,
Here's the info
Attachment 131220
This should be the XAR.
Attachment 131221
You could just paste your content into the XAR and take a look thereafter.
Gary