Issues With Responsive Layouts |
|
Thepipe
|
I've been reading a lot of posts regarding issues with responsive layouts. In fact, I've been reading WAY too many posts. This tells me there are legitimate issues or that people are really dumb because they can't figure out something simple. My guess is, it's the former.
Reading through a forum is one way to possibly find the answer to a question or problem. Forums have their advantages, but easily finding the answer to issues isn't always one of them. Why? Because there are literally dozens of posts about issues with responsive layouts and in many instances, dozens of comments and replies for each post. This takes time. Once you find posts that might be related to your issue, you then have to read through them to see if they're outdated and no longer apply because of an update, etc. This takes more time. Then reading through all the back and forth for posts that are at least current takes even more time and in many instances you never get an answer.
Sorry for going off on a tangent there, but it had to be said because people in the forums often ask "Have you even read the previous comments?" No - not always. I'd rather spend my time getting things done than reading pages and pages of conversation that, in a number of instances, have never provide a satisfactory answer to the question(s) I have.
Now that I've gotten that out of my system ...
Regarding header issues that arise in responsive layouts .. I've seen a number of "solutions" mentioned. However, most, if not all of these aren't really solutions. They're work-arounds and some are downright kludgey.
The Imagelink option for disappearing logos in headers is one instance. It's a poor solution because it doesn't address the main problem users are having - the header disappears, along with everything in it when resizing for mobile layouts.
I tried the Imagelink option, but because my logo is mostly white on a header that is dark red, all the Imagelink option gives me is a white logo on a white background - useless! And the Imagelink option gives you no alignment, positioning, margin or padding options. This means you can have your logo anywhere you want as long as it's on the left. I haven't tried it yet, but my guess is many of the problems I noted for this solution also apply to the "Controls/social icons" solution that some users propose for disappearing logos.
In another post, a user claimed that the "header background image" option solved the disappearing header problem. Not really. If your header includes a logo, is full width and has a fill color and/or pattern that are applied using Artisteer's tools, this means you have to create a huge graphic just to make sure your header doesn't disappear - because according to the user's post, the background image is always displayed. This may be true (I haven't fully tested it yet), but if it works, it means you're adding a lot of overhead to your site's load time - just so you can make sure your header appears properly in mobile layouts. This seems crazy to me.
BTW - this is taken directly from the Artisteer manual ...
"With Artisteer YOU immediately become a Web design expert, editing
and slicing graphics, coding XHTML and CSS, and creating CMS templates and WordPress themes - all in minutes, without expensive software like Photoshop or Dreamweaver, and with little or no technical training required."
This seems pretty misleading to me.
I bought Artisteer because I didn't want to have to learn absolutely everything there is to know about HTML, CSS, PHP, JavaScript, etc. I'm not lazy and don't mind learning enough to get by, but apparently, I'll have to dig into all of these topics deeply if I want to get the results I'm looking for. Plus, I have to learn all of Artisteer's element names so I can properly tag them too!
Please don't get me wrong. I think Artisteer has a lot going for it. However, if it wants to be a viable option for professional designers and non-professionals alike, it has to offer solid options for responsive web sites. Solutions that "sort of" work or require kludgey work-arounds won't cut it. At least half of all web visitors now use their mobile devices to access web sites, so solid, working responsive layout tools and options are a must.
Apologies for the rant.
|
| |
Antonina
Artisteer Team
|
Hello,
Please have a look at this article, that was created especially for the customers who need to change the header and its elements, so that it looks well in responsive mode/modes. We hope that it is helpful for you: http://www.artisteer.com/?p=responsive_header
At the same time we are working on improving responsive header view and customization.
If some specific assistance is needed, please feel free to contact us directly via http://www.artisteer.com/Default.aspx?p=support
|
| |
Thepipe
|
I'm looking over the article now, but it seems as though at least 2 issues still remain. Currently, my header is a fill color and pattern applied by Artisteer, with a logo that is centered horizontally. If I understand the article correctly, the logo needs to be inserted as an Imagelink and a new image needs to be created to serve as the background - which should be inserted as a header background image. As I mentioned in my initial post, this is not the most efficient solution. I say this because I assume my current background simply takes a single colored pixel and either stretches or repeats it horizontally & vertically to fill the entire background. The pattern is then layered over this. I'm not sure how the pattern is drawn, but since I'm using one that is just repeating squares, my guess is, it's drawn the same way. If this is the case, then I'd be replacing a few pixels with an image that contains thousands of pixels, since it would need to be a single image that is not stretched or repeated. It may not seem like a big deal, but from an overhead standpoint, this is extremely inefficient.
I've done a little testing so far - inserting the logo as a background image, but this hasn't worked well. My header has a fixed position - by this I mean it should stay at the top of the page as you scroll down. I've placed a horizontal menu bar in the header so that it will be fixed and remain at the top as well. However, when I test this on my iPod Touch, in portrait or landscape mode, the menu does not remain fixed. The background color of the header is white and the logo appears fixed - floating on top of everything as I scroll down the page. I do not have a tablet to test with, but my guess is the same problem will occur in both tablet portrait and landscape mode.
The other issue I have with responsive layouts is that they also impact an image slider I have on the page. My understanding is this should only be an issue if the slider is in the header. Mine is not. It is below the header. So why is it being messed up?
If seeing the problems helps, the site can be viewed at:
http://www.crescentsuiteshotel.com/brelundi/
I can also provide the .artx file if needed for troubleshooting.
When viewed in tablet-landscape mode (simulated using a desktop browser), about half the height of the slider is cut off. The navigation bullets also "migrate" off the left hand side of the screen if the browser window is resized. Clicking and dragging to re-size the browser window width makes the navigation bullets move to the left until they eventually disappear. You may think this is anything to worry about because nobody will re-size their tablet or phone browser windows. However, it is still a problem for people that do not run their desktop browsers in a maximized window.
In tablet-portrait and phone portrait modes, the slider fairs better. However, the images are not cropped to optimize the content. If there is a way to crop/reposition slider images for responsive layouts in Artisteer, I haven't found it. In phone landscape and portrait modes, the slider height seems okay, but the same issue with cropping/positioning of images still occurs.
My apologies for the length of this response. If these issues are better dealt with directly with tech support, I'll be happy to deal with them. I posted to the forum because I thought I'd get greater input and a faster response.
|
| |
Kelly
|
I have to say I TOTALLY agree with you, and I've had the same complaint in the past regarding the misleading "with little or no technical training required" line.
I am having a responsive issue also, related to the main horizontal menu. You can see it at: http://70.39.148.206/~theitali/
The problem is the menu "wraps" when shrinking the page (or viewing it on a lower resolution or smaller screen) - this ONLY happens between around 1100 px wide resolution down to when the site goes into "tablet" mode - once it hits the spot for tablet size, the menu (correctly) goes into it's responsive "vertical" mode.
My client is viewing the page on a laptop with a low resolution and is seeing the menu wrap and is unhappy with it.
I've have reached out to support, but it seems they are in a different time zone or something because it always takes at least 24 hours to get a response. I have to say I haven't had much luck posting here recently either. I've even posted this question on another website that promises expert advice (it costs about $40 per question). I've had pretty good luck with that site over the years, but this is the second time I've tried asking a question there with the word Artisteer in the title and I don't get any response at all. I'm hoping this will be different.
I believe it has something to do with the navigation buttons themselves, but I can't find anywhere that I can change them from a fixed size to a percentage - if that would even work!!!
If anyone here can help me, I will be eternally grateful.
|
| |
jrgweb
|
@Kelly - I haven't studied your page but a quick fix so that your customer will be happy, try adding this to the bottom of your styles.css
body {min-width:968px!important;}
You can adjust the width as needed by increasing the px.
At some resolutions you will get a scroll bar at the bottom but the menu's shouldn't wrap.
When do you want the responsive menu to kick in? At what resolution?
|
| |
jrgweb
|
@Kelly - WOW!! Your customer must be viewing on a 800x600
Works just fine on 1064x600 and above.
Might be time for an upgrade. 
But that said, yes I know how stubborn customers can be and we are here to serve them.
|
| |
Thepipe
|
Thanks Kelly. Good to know I'm not the only one who is frustrated over this stuff.
|
| |
Kevin
|
Quote Antonina:
Hello,
Please have a look at this article, that was created especially for the customers who need to change the header and its elements, so that it looks well in responsive mode/modes. We hope that it is helpful for you: http://www.artisteer.com/?p=responsive_header
At the same time we are working on improving responsive header view and customization.
If some specific assistance is needed, please feel free to contact us directly via http://www.artisteer.com/Default.aspx?p=support
Where may I find a comprehensive directory of articles such as the one referred to by Antonina? I could not find this in the Docs directory.
|
| |
techtom
|
Kelly,
What about using some CSS Media Queries to control the menu a bit better at different screen sizes?
Try adding this to the bottom of your style.css file.
@media (min-width: 896px) and (max-width: 970px) {
ul.art-hmenu>li>a, ul.art-hmenu>li>a.active, ul.art-hmenu>li>a:hover, .desktop ul.art-hmenu>li:hover>a {padding:0 16px; }
.art-hmenu>li>a, .art-hmenu>li>a:link, .art-hmenu>li>a:visited, .art-hmenu>li>a.active, .art-hmenu>li>a:hover {
font-size: 14px; }
}
@media (min-width: 816px) and (max-width: 895px) {
ul.art-hmenu>li>a, ul.art-hmenu>li>a.active, ul.art-hmenu>li>a:hover, .desktop ul.art-hmenu>li:hover>a {padding:0 14px; }
.art-hmenu>li>a, .art-hmenu>li>a:link, .art-hmenu>li>a:visited, .art-hmenu>li>a.active, .art-hmenu>li>a:hover {
font-size: 13px; }
}
@media (min-width: 769px) and (max-width: 815px) {
ul.art-hmenu>li>a, ul.art-hmenu>li>a.active, ul.art-hmenu>li>a:hover, .desktop ul.art-hmenu>li:hover>a {padding:0 12px; }
.art-hmenu>li>a, .art-hmenu>li>a:link, .art-hmenu>li>a:visited, .art-hmenu>li>a.active, .art-hmenu>li>a:hover {
font-size: 12px; }
}
|
| |
Nomafo
|
What if you don't use a background image in the header, but just insert a normal image.
When looking at smartphone, the image does not resize, it just dissapears.. what to do then?
|
| |
Antonina
Artisteer Team
|
Nomafo, in this case I would recommend you, to use the "Visibility" option by right-clicking the image - in this way you can decide in which modes the image wil be visible or not. Several images can be inserted - just control their visibility, to decide in which mode which image version should be present. The same for Imagelink controls. The only different at this point is htat Imagelinks are visible in Default responsive mode, but to make the regular imge objects visible in responsive, Custom Responsive mode should eb enabled.
Kevin, for now there is no special section containing the new articles, but we plan to create it in the future. For now we share the links in the forum threads and provide them in the support tickets if necessary.
|
| |
Efforts Unlimited
|
Hi.Ya header issues are present and make lot of problems for me also.
|
| |
jenifferhomes
|
I've done a little testing so far - inserting the logo as a background image, but this hasn't worked well. My header has a fixed position - by this I mean it should stay at the top of the page as you scroll down. I've placed a horizontal menu bar in the header so that it will be fixed and remain at the top as well. However, when I test this on my iPod Touch, in portrait or landscape mode, the menu does not remain fixed. The background color of the header is white and the logo appears fixed - floating on top of everything as I scroll down the page. I do not have a tablet to test with, but my guess is the same problem will occur in both tablet portrait and landscape mode.
The other issue I have with responsive layouts is that they also impact an image slider I have on the page. My understanding is this should only be an issue if the slider is in the header. Mine is not. It is below the header. So why is it being messed up?
If seeing the problems helps, the sites can be viewed at:
http://downtownlalaw.com/
http://www.losangelespersonalinjurylawyers.co/
|
| |
techtom
|
jenifferhomes,
your themes are not artisteer themes but still have same issues as most responsive themes.
First thing to remember is the just because a theme is responsive does not mean it will always respond as you want it to. I almost always have to finetune my responsive sites css.
In your case your responsive code is in the media.css file.
If you check the @media settings for .page-header > .wrapper you will see it is set to display: none;
This hides your logo when it gets to a certain size screen width. You can create your own @media queries to overwrite the standard ones and just add them to the bottom of your media.css file.
for example try adding this to the end of your media.css file.
@media only screen and (max-width: 767px)
.page-header > .wrapper { display: block !important; height: 160px; }
|
| |
|
|