I am in quite a bind with my company's website. My company has spent thousands on this website and I am limited to using a non-open-source CMS system. I had to fight (and we paid $1,200) so I could be provided one CSS page to work in. Our website developers charge us up-the-wazoo for every little change so I cannot ask them to program this (they would probably estimate $3-5k for the work).
Our original lighthouse page, here (live): http://www.golakehavasu.com/activities/more_to_do/lighthouses.aspx has this terrible code where the user clicks on the lighthouse name and a separate window pops up with a photo of the lighthouse. By the time the user is done, 23 separate windows have been opened. Since we are a vacation community and we get a lot of snowbirds in the winter, and I have to explain how to double-click, we get calls from them wondering why our website corrupted their computer (yes, this really happened). I'd love to ignore the calls, but I can't. I needed a better solution for those less web-savvy.
I wanted to convert these images into a hover/popup situation, and although being very limited due to the developer's lockdown of the site (and not being a total tech-head coder), I was able to research some code and get the popups to reasonably work. The test page is here (not live): http://www.golakehavasu.com/test.aspx
One major problem: When getting near the bottom of the lighthouse table, the lighthouse photos are underneath the footer and are not visible; this won't fly with the boss.I need those popups to stay within the browser window, and have zero access to upload a file directly to the server (I can only create pages through the CMS back-end system). My hands are tied here. Any help would be greatly appreciated, and it would score me some big points with the boss-man (and possibly help to get me hired on full-time with medical insurance benefits).
I'm trying to copy/paste my code but it's getting stripped. Tried to post the website where I got the code but the system says my reputation is under 10 so I can't post more than 2 links.
Again, please help.
I have no idea why I am doing this, other than I am really bored...
Set .lighthousepopup a:hover span to have margin-top: -350px;. This will shove the pictures up so the bottom is inline with the hyperlink and they don't fall off the bottom of the screen.
But now you have the same problem on the top, so you'll need to fix the first few rows to not have this using the nth-child selector. Because of the weird layout of the table (caption below the column headers and everything in tbody, really?), the first row is actually the 6th, so you'll need to start there.
table.grid tr:nth-child(6) td .lighthousepopup a:hover span,
table.grid tr:nth-child(7) td .lighthousepopup a:hover span,
table.grid tr:nth-child(8) td .lighthousepopup a:hover span,
table.grid tr:nth-child(9) td .lighthousepopup a:hover span
{
margin-top: 0px;
}
So now rows 1-4 have the top of the image inline with the link, and the rest of the table has the bottom of the image inline with the link.
Related
URL: tinyurl.com/36utmdnc
In Google Search Console, I am seeing thousands of errors for Core Web Vitals, particularly the CLS in Desktop mode. I've made a number of changes, such as removing all ads, tweaking the CSS, HTML and other code. I've been making changes for a year actually, but I've really tried tackling this problem over the past 2-3 months, since "Page Experience" is showing a big reduction in "good URLs" and I believe it's now affecting my traffic volume from Google Search. It's been weeks now and the CLS is not changing in Search Console. I've tried validating for a couple of months now.
The example URL above (a product page) has a CLS score of 0.33 according to Google Search Console / Core Web Vitals. It seems all of the errors are on my product pages like the example above. I've ran tests in PageSpeed Insights, which shows a CLS of "0". I understand the reports shown in Google Search Console are from "Chrome User Experience report", which is different than PageSpeed Insights "lab setting".
Here are things I've done:
Opened Chrome Developer Tools and clicked the checkbox for "Layout Shift Regions", which flash blue during a layout shift. Also checked the "Core Web Vitals" to enable to overlay that adds up CLS throughout the entire browsing experience.
Opened the Network Tab and throttled the speed down to "very slow tests" and carefully watched for layout shifts while the page loads slowly.
Carefully read the guides on web.dev/cls/ , ran Chrome's LightHouse test, ran tests on various sites like webvitals.dev/cls , defaced.dev/tools/layout-shift-gif-generator/ , webpagetest.org/webvitals, etc.
Manually tested using different screen resolution widths/heights using Chrome Developer Tools (800px width, 1400px width, 8000px height, etc).
Asked tech-savvy friends/users to also check and help identify the CLS.
I can't find anything that could cause a large CLS of 0.33. The number of CLS errors in Search Console is staying steady, going up and down by about 100 URLs every day, but the same example URL above has been stuck there for months. So I was hoping someone with knowledge could find it or identify the underlying issue.
Thanks
I cannot see a CLS score of 0.33 for that page, and agree that testing it myself shows very little CLS.
You are correct that PageSpeed Insights is lab-based, but it also shows the field-based data at the top, and in this case it is saying it does not have enough field-based data for this URL and so is displaying the origin-level data for all the pages for your site.
Google Search Console also shows field-based data, but groups pages it thinks might be similar and gives them all the same CLS scores. This is done at a bit more lower-level grouping than the whole origin so it may group all your product pages together for example, if it has data for some of them.
This page for example has a hover effect that gives a huge CLS when it's used - though can't quite see why as finding it difficult to trigger manually in dev tools.
It is possible those pages are the ones with the actual CLS issue and they are being lumped in with your good page under the product pages group. I would investigate if you can reduce the CLS on that hover effect.
Separately, I notice you are lazy loading your images but not specifying width and height on them. This can lead CLS if the images are not loaded by the time that area scrolls into view for example this test when linking to a bit at the bottom of the page. It is recommended to always include image dimensions on lazy-loaded images (and in fact on all images!) to avoid this. This could be another reason for your high CLS, which is not as evident in lab-based tools that typically only load the top of the page without lazy-loaded content.
I also recommend you read the Debugging Web Vitals in the Field and also the more advanced Measure and debug performance with Google Analytics 4 and BigQuery for additional information as to how to answer why your field-based metrics may be different than what you can observe.
I have a basic footer that would be super easy to create in almost any environment but email.
i am looking to do a email/phone/unsubscribe line to appear like
"email#email.com | 1-888-PHONENO (1-888-111-1111) | Unsubscribe"
works perfect in desktop view (600px width) but once i try and do anything responsive it dies and formats all crooked. I've had good luck with flex box with apple products, but many of the microsoft products (email clients) strip the flexbox out. so i am using table but finding it difficult to make it responsive.
I would use media queries but when i use display:none, it doesn't always work. it almost like the sendgrid console wont let me target certain elements. for example i can easily change the html background using html, but when i give classes to elements, nothing happens, id's either. its like the style doesnt get applied.
to solve this issue i'd be totally happy with writing different header/footers and then rendering them per the view (599 down, 600 up) if anyone has experience using media queries in emails or sendgrid please advise.
I could also write a responsive table but having trouble w how to set that up for the above. some of the items would need to be wrapped, like it would be ok to render on 2 lines in mobile as long as the style looked decent. right now it looks jacked.
you cant-
due to email clients rendering code totally different (some strip margins/padding, some strip flexbox, some strip other things from your css)
just stay to best practices: inline style, single column tables work good on almost anything. keep it simple.
I made a nice looking inline css flex box footer. looked great on mac/google products, looked like garbage on all outlook/samsung.
so i had to dumb down my beautiful footer to something that was more compliant across platforms.
litmus is a tool we bought that really helps. you basically just have to design it then test. litmus will show you previews on every possible email client so u can go thru and find a good balance of compatibility and design.
for sendgrid, the built in template and drag and drop option render good on everything. use the v3 api and dynamic templates. use a drag and drop then add html blocks to customize what u need to. use the drag and drop as much as possible because they build a robust html code for you. unless you want to manually type out a 600 line email that is totally disorganized.
I'm finishing up a Mailchimp template and Gmail is the biggest headache now.
In my head I have some styles (css) and media queries. If I put the media-queries at the bottom - it stops most of the styles from getting through. If I put the media queries at the top - all my styles work perfectly but the mail looks "broken down" (like it should under 600px width / Mobile) like the media queries already kicked in.
Firstly I didn't think Gmail should read anything inside of a media-query and secondly why are is my mail shown "responsive" when I have full browser width?
---- on a side note ---- I know I can go through everything and add inline styles but, I have three templates and I'd rather not if I can get away with it :)
I found out through extensive google-ing that I'm not the only one in the world that had this (weird) problem. I quote Lucas Mainardi below that posted an answer to a similar problem for Outlook.com.
Basically, putting an extra style tag with your media queries just before the closing body tag will fix things.
I've tested on my devices (gmail, iphone, thunderbird) and it doesn't seem to do any damage for clients that didn't have problems before. I'm also waiting for my Mailchimp inbox inspections to finish (where I test more clients like Outlook, Android etc). I'll edit my answer if it seems to do any harm, otherwise consider this a solution.
Hello James,
In the comments bellow I posted a possible solution to this issue in Outlook.com.
The problem seems to be the area in which the email is loaded. Apparently, the area starts out in a small size and is resized a few seconds later, but in that time the media queries fire up and display the mobile version. This is because the media queries are read first in the hierarchy of the code (they're at the head section) and the HTML email is read second.
The solution I found is to place the style section which contains the media queries after the HTML e-mail, specifically right above the closing body tag.
I tried this out in Litmus and all seemed to work just fine across the board (no other browsers/mobile devices/e-mail servers seem to be affected negatively, displaying the exact same version of the email with the styles in the head section).
Taken from http://emailwizardry.nightjar.com.au/2013/08/28/media-queries-in-html-email-cover-all-your-bases/
Since last week, my Facebook like button with count display + send button ("button_count layout" as they name it in their plugin page) is looking weird, missing the blank space there used to be between the "like" count and the "send" buttons. First I thought it had something to do with Wordpress and the plugin being used to display it since I first noticed it in my WP based site, but after investigating I've come to the conclussion that Facebook has changed the styling without advice. It is looking this way in their own plugin page, tested with different browsers and operating systems.
This is how it looks now. Notice the lack of space between like count and the send button:
This is how it used to look until one or two weeks ago:
Has anyone else noticed this change? I still have not tried to add the missing spacing by any means because I am not yet sure if the change will be permanent or if it is some sort of "bug" by Facebook. I haven't been able to find any reference using Google about this.
Well, after 9 days with no answers and having Facebook changed during this period the style of its "like with count + send" button, getting back the little gap between them, this question has lost its sense. It seems like they weren't minding a lot their "old" button since they were going to change it.
It seems also like I have such good aim making the right questions in the right moment! xD
I'm using the Facebook Comments plugin for a local travel website in an area with poor internet. When the net is slow often the comments plugin takes forever or does not load at all. When it doesn't load it is just blank space instead which makes the page look odd. I want users to know that there should be content there.
Any ideas for how I could display a LOADING graphic while waiting for the Facebook Comments plugin to load? And then maybe if it hasn't after 10 or 15 seconds it returns an error message in that space instead.
I think a possibility might lie in the #Comments value that Facebook returns. Maybe a graphic could be loaded until that value is returned?
Found a solution elsewhere - maybe it will help someone else with a similar problem:
Just replace this snippet with the current one you have where you want the count to appear,
Place the gif image in the same folder as the html file. Or change the path in the src="" to the correct path on your server.
You should see a loading animation while the count of comments from facebook updates.