Mobile website?

I thought my website was optimised for mobile - I got a notification on Adsense to say it was and it seemed fine. (I don't 100% understand mobile optimisation.).

Anyway, someone has told me that I need to get a mobile version of it. How can I do this? The site is in my signature.

Thank you!

 

The best way to design your web site is with mobile in mind first. There's barely a need to have 2 versions of your web site. Just create a responsive design that can resize or reorder the columns depending on device size. There are tons of grid libraries/scripts/frameworks that make this as easy and accessible as possible.

If someone told you, you need a separate mobile version of your web site you should decease taking advice from that person immediately because their expertise is out dated and no longer effective in 2015.

In 2015 your visitors want the SAME content, accessibility and experience on their Laptops as they do on their iPads and iPhones. I remember a while back I found a product on a well known web site that I wanted to buy. I headed out on a business trip and attempted to purchase it from my Droid. The web site was a mobile version and I couldn't find the page. I actually bought the product from a different site.

 

I respectfully disagree. If your website is built the right way, and that is focusing primarily on content, where its layouts are built with the sole purpose to guide the user in the most effective way possible to that content, by means of semantic markup, content - presentation distinction, progressive enhancement, graceful degradation and inevitably pleasant experience (achieved by improving legibility, finding the right contrasts and ratios), a responsive layout is but a mere consequence assisted by somewhat modern methodologies (think media queries).

I have never seen a single framework/grid system powered "responsive" layout actually following all the points previously stated. It might shrink it down to the size, but what's the point if it takes forever to load on a limited bandwidth handheld device? Now the anticipated counter-argument would be "yeaaaah right, everybody's got a fast internet today, why bother. Oh look, my awesome iPhone 13 with its 5G loads it in 0.2 milliseconds... etc". Okay, but if they're fine with simply sweeping the problem under the rug, why would they be bothered to make the website responsive? Unless I'm the one who completely missed the point, and having a responsive website is just plain and simply cool (think sliders, jQuery). Though I doubt it, there must be a reason to it and that reason is what people usually neglect, sadly.

Now this we agree on. There is no purpose to a separate mobile version of your website if the said website is already accessible and usable on ANY device you throw at it. That's what we call device neutrality, which is pretty much the single rule of serving content to the user agent/browser/client. And sadly, none of those frameworks you suggested actually allow this.

I'm confused. In your previous statement you're advocating methods that are not only outdated in 2015, but were so in 2005. Grid libraries rely entirely on presentational markup, which is one of the worst syndromes a website can suffer from. If I had to choose between a website which is "responsive" but sees its markup presentational and thus invalid, and a website which is not responsive, but has an undisturbed content flow and is semi-fluid/fluid and/or elastic layout along with dynamic non-metric fonts and actually giving a damn about WCAG, I'd choose the latter without a second of hesitation.

If I'm not making any sense to you, think of it this way. What is the simplest website there can be? It's probably a website that uses no styling or scripting whatsoever, relying entirely on the user agent to present its content to the client. Assuming that a proper semantic markup is used, by its very nature, that website achieves device neutrality and doesn't have its flow disturbed by a misuse of styling or scripting. It is fully responsive, accessible and usable. That leads to the conclusion that a website is responsive, BY DEFAULT. If a website isn't responsive, it is because the methodologies used to build it disrupt one (or multiple) of its fundamental aspects.

I hope you found this post helpful, if not, I don't blame you, cause pretty much the whole industry missed the point.

 

Did you try this site http://quirktools.com/screenfly/ to see if your site looks fine in various resolutions?

I don't know which site you're referring to, but I checked your http://thenewsgiraffe.com/ through it and it seems to be optimized just fine:

http://quirktools.com/screenfly/#u=http://thenewsgiraffe.com&w=1024&h=600

 

I said "mobile in mind first". That means exactly what was stated... keeping mobile in MIND first. Making sure your web site views well on a mobile device first rather than later. I highly doubt you are in disagreement with that.

What are you talking about? There are some frameworks or libraries or scripts that are less than 20 KB and there are others close to a megabyte. I have not mentioned a single library.

Again...there are in fact responsive grids available to use. Some of those frameworks will not take forever to load. There are dozens of popular ones and hundreds of lesser known ones to choose from. I made no mention of any specific library.

I think you are taking my post completely out of context... We are not in disagreement here.

 

Sorry NetStar, that's absolutely the wrong way to do it. It may work, but it will work simpler, more robustly and intuitively if you start with a basic, well structured and properly marked up document that is UI agnostic.

I'm in disagreement with your post. You suggest that using frameworks, libraries and scripts will aid in creating a responsive site or page. These only add weight and complexity to what is really a simple process. There is no added value. I am in favor of javascript libraries, but that implies that the developer needs to learn enough js to be able to trim that library to the site's needs and not blindly add a potload of scripts and libraries that he understands as well as I grok quantum physics.

And grid systems? $DEITY help us. Grids were and are pushed by print designers (even if they've never laid out a print page) who simply don't understand the web's meme of flow and reflow. They are attempting to simulate the paste-up board from the days of photo-offset printing. Do not get me started on the use of insanely non-semantic class and id tokens that increase the cost of development, compared to actually owning a clue, and the cost of maintenance. I am reminded of an aphorism from my days programming in assembly, "Write as if the guy who follows you is a violent psychopath who knows where you live."

If you're going to use frameworks, jQuery or grids, you'd better be looking over your shoulder; that guy may be there.

cheers,

gary

 

Look for posts by deathshadow. He has written on the subject and has often done rather complete rewrites of pages to detail the process.

cheers,

gary

 

@kk5st, You rang?

The site in question appears to be responsive and mobile friendly here, so I'm not sure what the issue is on that front. Seems to do what mobile should do... so no clue what that someone was telling you to do.

That said, I'm NOT a fan of that hamburger icon thing much less it being scripting based, and much of the page seems to be "JS for nothing" -- some of the numbered heading orders don't make sense but most of the H2 seem to be what should be h2 and the H1 checks out, so it's not fatally bad on that front. If anything the inconsistent DESKTOP layout seems to be far bigger a problem than the sites responsiveness.

It IS however pretty bloated. Painfully and agonizingly slow to watch load and ... oh yeah, it's screwing up on my phone because IT RUNS OUT OF MEMORY!!!

You've got a batshit crazy TEN MEGABYTE page built from 188 separate files... for a page that from what I'm seeing probably shouldn't be taking more than half a megabyte in 24 or so files. 77 images, 40 separate HTML embeds (iframe or object?!?), 24 JavaScripts, 12 CSS files all of which coming to HUNDREDS the total filesize needed for something so simple? That's probably preventing the page from working on any system with less than 2 gigs of RAM once it tries to decode it, much less run it or try to cache anything.

Under the hood it's a laundry list of how not to build a website, and I can honestly say it's the WORST I've ever seen on that front. I know I say that sites are bad that way ALL the time, but this one?

"You know the kind of woman that just screams trouble? You see her, and every warning bell in your brain starts going off, but you still manage to ask for her number? Well, that's all I ever hook up with. But this betty... whoa! She blew them all away in the shitstorm sweepstakes." -- Hannibal King

What he said about Danica, I say about that website. It blows them all away in terms of ridicoulously insane file sizes and file counts, and REEKS of endless pointless scripttardery, ineptly developed HTML and CSS, and a general slapping together any old way off the shelf solutions to every problem -- whether it was actually a problem or not.

I often say this, but never with this much zeal; throw it out and start over, there's NOTHING I'd try to salvage from that mess.

... and yeah, if anyone tells you a 'framework' is going to 'help', they're a mouth-breathing halfwit not qualified to flap their gums on the topic.

 

ARRGGHHH!! How has all that happened?

 

Well... massive images for each article that are too big to belong on an article summary, relative lack of proper image compression, too many social media plugins loading for every article... and the choices of technology are really biting you in the backside here.

I mean, it's turdpress so unless you took the time to bend it over the table like Mr. Grey, what it vomits up for code is usually gibberish ten times the size it should be. In this case you've got 111k of markup to deliver 15.1k of plaintext and maybe two dozen actual content images; that's anywhere from 8 to ten times as much code as should have been used, and that's just the HTML. The ridiculous amount of jQuery garbage resulting in 47 separate JavaScripts coming to a megabyte can take up to a minute in handshaking ALONE regardless of connection speed... likewise there is NO reason for a website to be using more than 48k of CSS in 2 files per media target. Your page seems to be sending screen media CSS to "all", which is just nonsense.

Though the lack of image optimization and insane number of images isn't helping either... Though one thing REALLY stands out:
http://thenewsgiraffe.com/wp-content/uploads/2015/04/nigel-farage.jpg

That single image by itself is HALF your bandwidth use. Once decoded that image ALONE is 40 megabytes, that then has to be run through a scaler given how you are using it which will suck on the CPU (and battery on mobile) like candy. All your images decoded come to around half a gig BEFORE we talk the scaler copies, and for many phones that's the free memory after you account for the OS and any running applets, much less the browser and it's cache.

Good rule of thumb, if you have a page filled with multiple articles, images larger than 256x192 per article is a BAD idea. If your total images breaks half a megabyte, it's a BAD idea. There's a reason you don't see these types of giant images on REAL websites... or if you do they are slow, painful to use and not very popular.

As I said a LOT of that is just off the shelf bits being slapped together any-old-way; and no matter how many "experts" out there will claim otherwise, that's one of the quickest roads to having a bloated, slow inaccessible site. Your choice of technologies and methodologies is pretty much asking for a website that nobody is going to wait for it to finish loading, much less actually want to use.

 

Thanks! Is there a way I can compress images so they don't take up as much?

I mean, there has to be a way I can have tonnes of images and posts on there without it being ridiculous, right? How do other sites manage to do it? It is just Wordpress that's being the bitch?

 

First tips for that would be to make sure you upload images that has already been through optimization. There is rarely any use for large images (unless the image itself is what you're trying to push/sell/promote/whatever) - if it's mostly for illustration, go for something no more than 1024x1024 in size (when viewing the image by itself), and make sure you have some sort of proper thumbnail-maker - I seem to remember there are some plugins for Wordpress that actually creates proper thumbnails for images, which you then can link to the original image. But, first of all - never, ever upload an image for use on a webpage that is more than half a MB in size.

 

your site is good for mobile & other devices, you only need to care about content compression to make it loads faster

_______
Awesome Mobile Site Builder (AMSB)

 

Hello

I totally agree to temp2. Your site need just content compression. Since it is the time where everyone is getting their website responsive I suggest you to get some help from the internet on how to get it right. We are a leading web designing company in Chennai and we make all our websites responsive.
Regards
John
http://spidergems.com

 

No, you don't need mobile version of website.
I have checked your website on Google Mobile Friendly Test and it is mobile friendly, you can check it here on google mobile friendly test tool : https://www.google.com/webmasters/tools/mobile-friendly/?url=http%3A%2F%2Fthenewsgiraffe.com%2F

And according to Google suggestion responsive website is better then mobile version of website, have a look at this mobile website tutorial : http://exclusivetechnews.com/mobile-website-tutorial/

 

Just a FYI, recently Google released a mobile friendly algorithm on April 21st http://searchengineland.com/library/google/google-mobile-friendly-update

There is a difference between mobile ready and mobile friendly.
What that means is if you have a mobile site or a responsive site, it is mobile ready, BUT that does not automatically means it is mobile friendly.

You can use this tool to test your site
https://www.google.com/webmasters/tools/mobile-friendly/

The update takes effect on individual page bases and the tool above can check on individual page only.
As of now there isn't a tool for you to mass check the entire site (as far as I know). But, you can check your Google Webmaster Tools to see which pages might have mobile friendliness issues.

 

many site provide tools for checking mobile friendly site you may search on google and then check it