AMERICAblog goes mobile!

I’m happy to announce that AMERICAblog’s new mobile site is live.

You don’t need to do anything special to access it – if your smartphone and/or tablet is compatible with the mobile template, you should be redirected there automatically when you visit www.AMERICAblog.com using your cell phone or tablet device (iPad, etc.). If your device is not supported by our mobile template, you’ll be redirected back to the normal desktop version of the homepage.

americablog-mobile-featured

Supported devices include:

iOS
iPad (Mobile Safari on iOS 5+, Google Chrome on iOS 5+)
iPhone (Mobile Safari on iOS 5+, Google Chrome on iOS 5+)

Android 4
Nexus 7 (Google Chrome)

Kindle
Kindle Fire (Amazon Silk)

While the mobile site looks a lot like our regular site, it will take you a few minutes to get used to how to navigate through stories.  But trust me, you’ll get it.  I did.  Here’s a quick tour of the site layout.

Tablet template (iPad, etc.)

For starters, let’s look at the layout for tablet devices, such as the iPad. Overall:

  • To read a story just click the title or the picture.
  • You can view the different sections of our site by clicking on the “SECTIONS” button at the top left.
  • If you want to get back to the home page at any time, just click the AMERICAblog logo at the top center.
  • If you still want to use the old homepage, just click the funny TV looking button in the upper right-hand corner (if you’re using a tablet, you’ll also see that it says “desktop site”).

If you only remember two things, it’s this: If you’re in a pickle, just click the AMERICAblog logo at the top of the screen and it will take you back to the home page.  Or if the page you’re on is acting up in some way, try refreshing/reloading the page.  I’m sure there will be some glitches as we’ve been working on this a while, but we only just launched it Friday evening.

Horizontal tablet homepage (if you’re holding your ipad horizontally):

home-horizontal

 

Vertical tablet homepage:

home-vertical

Story page on a tablet:

Note that once you’re in a story, there are several additional buttons at the bottom of the page, these include the social media buttons:

  • The speech bubble with the 3 dots in it is to comment on the article – click it, then click “comment” and it should take you to the regular version of the site, where you can scroll down to the comments and comment as usual.
  • The rocket ship will eventually show you more articles from our site that you might like.
  • The square box with the arrow coming out of it is for sharing the article via Facebook, Twitter, Pinterest, or email.
  • And the heart lets you select your favorite articles and do something that honestly I don’t understand as of yet.  So let’s handle that one later – in any case, the other functions I just listed are the more common ones.

Please do continue to share our articles via social media.  It’s hugely important for our traffic, now more than ever since so many people cruise social media looking for blogs posts and news articles to read, rather than going to the sites directly and just browsing.  The only way we get good traffic is by people sharing our articles on Facebook, Twitter, Reddit, Pinterest, Tumblr and everywhere else.  Someone was asking me recently why it mattered sharing articles on these various sites – because it’s the only way we get enough traffic to make enough ad revenue to keep the site going.

Our revenue is directly proportional to how many visitors we get, and how many pages they read, each month.  So the more articles you share on social media, the more you help us, and every other site you like. Thanks.

So here is one of the story pages on my iPad – you scroll through the stories multiple pages by swiping to the left on a tablet:

home-vertical-story

Not the two little dots at the bottom of the story page – the first dot is black, and the second is grey.  That indicates that this story has two pages, and you are on the first page.  Swipe to the left to read the second page.

 

Drop-down list of site sections:

home-horizontal-sections

 

Mobile template

On the mobile/cellphone homepage, just swipe up to browse through the stories.  When you see a story you like, click the headline and it will take you to the story.

On a mobile story page, you scroll through an individual story by swiping up.  To scroll to the next story on our site, swipe to the left.

Mobile homepage:

iphone-home-vertical

 

Mobile story page:

Note that the social media/share button is the funny little box in the upper right hand corner of the story page – the box has 1 dot splitting into 2 dots.

iphone-story-vertical

 

Dropdown of site sections:

On the mobile site, you can find the various sections of our site by clicking the box with a small triangle in it in the upper right hand corner of the page. Just click a section to see our most recent stories on that subject.

iphone-subjects

Trust me, you’ll get the hang of it.  I always find these new designs confusing at first, but after you play with them a bit they become intuitive, and then downright easy – and even, dare I say, easier than scrolling around our regular desktop template.

I hope you like the new design of the mobile template.  A lot of folks have been asking for it, so I’m glad it’s finally here.  Thanks as always, JOHN

PS Before you ask why I didn’t use the old mobile site we had, that was Blogger’s mobile site (and we’re now on WordPress) but also, the Blogger design had no ads, for starters.


Follow me on Twitter: @aravosis | @americablog | @americabloggay | Facebook | Instagram | Google+ | LinkedIn. John Aravosis is the Executive Editor of AMERICAblog, which he founded in 2004. He has a joint law degree (JD) and masters in Foreign Service from Georgetown; and has worked in the US Senate, World Bank, Children's Defense Fund, the United Nations Development Programme, and as a stringer for the Economist. He is a frequent TV pundit, having appeared on the O'Reilly Factor, Hardball, World News Tonight, Nightline, AM Joy & Reliable Sources, among others. John lives in Washington, DC. .

Share This Post

44 Responses to “AMERICAblog goes mobile!”

  1. Oh god yeah, I’m sure people think poetry writing is downright silly. Let them try to write a poem. That was probably the hardest thing I’ve ever tried writing (had an upper-level class in it in college, damn). Fiction writing was quite difficult too.

  2. karmanot says:

    “why should we give you money, all you do is write all day.” —-Good god, does that attitude drive me crazy. I would often reply: “poetry is even easier.” Hand slaps forehead—Oh the irony.

  3. I’d be curious to see a screen shot of what it looks like on Safari on your iphone, because on Safari on my iphone it’s gorgeous. As for more than one topic at a time, you scroll through the various stories by scrolling up with your finger. I just scrolled through ten headlines in about 3 seconds. Couldn’t have been easier. I’m having a hard time understanding why that’s somehow unmanageable. The ten most recent headlines in 3 seconds is too slow? 20 headline in 6 seconds?

    And even better, when you’re IN a story on your iPhone, you swipe to the left or right and it takes you to the next story – so you can browse the headlines and the first paragraph, then swipe to the next and browse the headline and the first graf. It’s actually freaking amazing how well this thing works on the iphone. I just tried it again, amazing.

    I’m totally open to constructive criticism. But I will push back when I feel that the criticism is more based on “oh my god you changed something,” rather than it truly being something that doesn’t work as well. This template rocks on the iphone. It’s somewhat quirkier, I’d argue on the tablet – ipad etc – but even there, the ability to go to our home page, see the top 5 stories, then swipe to the left and see the next 5, and so on, is also pretty amazing and efficient.

  4. Monoceros Forth says:

    Agreed. I don’t know what it is about “mobile” devices that causes UI designers to throw all common sense out the window.

  5. Monoceros Forth says:

    Yeah…tried to use the mobile version of this site a bit more but, at least on my iPhone in Safari, it’s bloody awful. Huge pictures taking up a ton of room and scarcely more than one topic visible at any given time. As I said earlier, however, there’s an iOS browser (Mercury) that lets me pretend I’m using a desktop…because, frankly, most “mobile” interfaces are utter rubbish.

  6. “The only real PITA is dealing with ads.” LOL Yes, that would be the #1 requirement for any mobile design is that it brings in the same amount of income, or more, or we close down :) Any mobile design has to bring in the same amount of money, and I’ve not seen too many that would. You either need all the same ads on the page – and I’m not sure you build a responsive page that includes all the ads we have – or you need a design that somehow maximizes page views while having one or two ads per page, which is what this one does. My Web guy wants to design his own, but this was there, my ad guys has been using it for half a year on his site, and has spent a lot of time working out the kinks, so I wanted to give it a try. I’ll still talk to my web guy about how he’d design it differently, and how we could keep the same income (whether it’s the same ads, or more pageviews to compensate for the ads). But everything is going mobile, our mobile traffic doubled in the last year, and there’s a lot of thought that people want mobile sites to look more like apps, things they can scroll through etc. So, points taken.

  7. I will never forget years ago when we used to hold more regular fundraisers (back when people donated, before the economy collapsed), and one people wrote (actually a few did), “why should we give you money, all you do is write all day.” I just sort of scratched my head on that one, since most people know they’re not good writers, and would die if their real job was writing a news story, or an essay, every day (actually several day). But when someone else is a writer, it’s considered a fluff job.

  8. I want you to visit, but I also want to pay my mortgage. Those have been somewhat mutually exclusive since the economy crashed in 09. And not just for this site, but for any and all media sites on the Web. Some of the concerns are merited – the template is a bit slower. As for the pages being broken up, I like it that way – makes it quite easy to read on a table or cell, and it’s easy to browse by just flipping pages (damn you, Gutenberg Bible, how dare you put the story on more than one page!)

  9. Tatts says:

    Chrome is not the default browser for Android devices. Android has its own browser. Some manufacturers may include Chrome when they skin their version of Android, but it’s not a default.

  10. intoxination says:

    I agree 100% – responsive is the way to go. Not only does it take device detection out of the equation, but it also makes development and maintenance much simpler. Start with your design in either desktop or mobile (mobile first is the biggie now), then create your CSS media queries, setting breakpoints where things need to change. The best part is that there’s tons of frameworks out there to help with this, like Twitter’s Bootstrap, though I prefer just doing it all myself.

    Also there is another problem with device targeting, which is countless resolutions. If you target only Apple, you don’t have that many resolutions to deal with, unlike Android. Using some sort of responsive grid design, you can easily have your design scale down to about any resolution out there. The only real PITA is dealing with ads, which have been very slow to jump on the responsive bandwagon (though AdSense has started rolling out some responsive units and there are javascript tricks you can use with DFP).

    Oh and the best part of responsive designs, is that it works fine with WordPress and about any CMS out there, since everything is done handled in CSS. Also if you employ server-side page caching, it helps with performance as you’ve only got a single version of the page to cache, instead of versions for the different devices.

    In the end though, there is nothing really wrong with using a service like OnSwipe. As matter of fact it can easily be used in conjunction with a responsive design. Have OnSwipe hit the devices it is designed for and everyone else gets served the responsive template, and the current template you are using really wouldn’t be all that complicated to switch over to responsive. The roughest part would be the header section, but there’s tons of open source solutions out there for things like your site section navigation.

  11. Whitewitch says:

    I never enjoy the “mobile” versions of websites…I love my iPhone really I do…however I never use her to visit websites because she does such a crappy job and most of the time you can view the comments and everyone know, aside from John and others fine writing it is the comments I enjoy….they make me laugh, cry and see a perspective on the story I might not have realized.

  12. Whitewitch says:

    I feel for you…my husband was a stay at home grandpa for our beloved grandson for his first six years and people actually had the nerve to comment that he must enjoy early retirement…his dedication and love allowed our children the ability to get back to work to support their new bundle of joy, have insurance and know that Gramps was home minding the little one. He worked harder than any of us – for sure!!!

    Funny what people consider to be work and then judge…weird eh? Well done you by the by.

  13. karmanot says:

    John, you and crew juggle the complexities so well and produce a quality site rarely matched. Even well intentioned drive by nit pickers would be astonished if they had labored at the accomplishments represented every day in setting up an informative, relevant and entertaining production of excellence.

  14. karmanot says:

    I couldn’t agree more P. John and crew do an outstanding job here.

  15. zeiche says:

    Not a fan of mobile versions of sites. Now, pages take longer to load, pinch-zooming is disabled, pages are broken up into a bunch of annoying mini-pages, and navigation is forced into unnatural sideways scrolling. Cult of Mac uses the same layout and I read them less because of it. If mobile sites were really the thing, we would still be using WAP browsers. But we don’t.

    Now this site uses a comment system that hates allowing you to see what you are typing, banners that hover over what you are trying to read and now this. If you don’t want us to visit, just say so.

  16. Tatts says:

    I’m not blaming John (except that he chose Onswipe ;-) ). I used the term “you” in a general sense, and I knew that he didn’t do the actual work himself (I assumed he hired someone who didn’t know what they were doing). Then I saw the Onswipe comments.

    You miss the point I make. There is no reason to have “iOS down pat” nor figure out Silk’s “peculiarities”. The Web is supposed to be device-agnostic! How many different computers/tablets/smartphones should I have to buy to have access to the Web if it becomes fragmented like this?

    This is a step backward, and a very bad choice, IMHO. No professional web developer would ever design a site to act this way. Ever. And that’s why you never see any other sites that work like this.

  17. BeccaM says:

    Aye — the limitations involved here have nothing to do with John’s web skills. It’s the back-end provider of the mobile conversion, OnSwipe. They have iOS down pat, and clearly have figured out Kindle’s peculiarities via Silk (their web engine), but Android and Windows 8 (tablet mode) have yet to be supported.

    Whatever else, it ain’t John’s fault.

    It’s okay by me — I read and post via desktop 100% of the time anyway. Just thought I’d see if the new mobile interface was available on my Galaxy tablet and/or phone to provide some feedback.

  18. BeccaM says:

    I’ve seen 1st hand how many hours a day you put into the site. It’s daunting.

  19. Tatts says:

    John, I do web design, and the simplest way to make a site mobile is to just get the screen size from the browser (using @media) and have a CSS style sheet that feeds the right size to that visitor. You do it once and you’re done. For everyone. For every browser. For every device. For ever.

    And it does NOT have to remove your ads–that’s entirely up to you (and to CNN). Philly.com still has ads, so do lots of mobile sites.

    The problem is that although Apple products are 67% of your traffic, the next Apple product to come down the pike may not work, then you have to make a new setup for that one, and then the next one (meanwhile you’re also ignoring every Apple user who’s not using iOS 5+ and every Apple with a different preferred browser and everyone running the two most popular mobile browsers). You spending a lot of time chasing shifting technologies, when the industry-standard method (CSS style sheets) would be done once and accommodate every visitor no matter what they were using–and all on your terms.

    If you can feed an iPad or a Nexus 7 an acceptable page at a certain resolution, that exact same page should be available to everyone else no matter what hardware or browser they are using. That’s how mobile style sheets work. That’s how the Web works.

    The question I ask is–if this is such a good solution, why isn’t anyone else using it?

    I know that sounds dismissive and snarky–but it is a dead serious question. I’m not denigrating the effort, but this is seriously out of step with the way the web works and what visitors expect. It’s the primary job of a web designer to accommodate ALL visitors using his expertise, not force visitors into doing it his way. Doing the latter drives people away.

  20. pappyvet says:

    Many have zero concept of the time it takes or the work involved. If you told them you worked at the local hardware store they would grasp it immediately.

  21. It’s an actual full-time job. I still laugh when I tell people this is my job, and then they ask me how much time I spend on it, as if it’s a hobby – who asks you how much time you spend doing your job? LOL I then tell them, during the week around 12 to 14 hours a day, and they reply, my god you do that full-time! And I repeat, IT”S MY JOB :) I go to bed late, so I can write the morning posts the night before at like 10, 11 or midnight, then get up a little late. What do you do.,,

  22. pappyvet says:

    Years ago I had a website called “BeetlNutt,” it was concerned with science,spirituality,the animal kingdom and the odd editorial which I loved to write.
    But I soon discovered that even with a small website like that it took a great deal of time and energy. New stories , new thoughts, the upkeep! Remember counters and guest books? I can imagine the effort it must take to produce this site and the commitment to move foreward with it. I have no idea when you sleep John.

  23. Actually, Apple products are 67% of our mobile traffic. So it’s a good start. As for CNN and Philly.com, I suspect they don’t have to hold Christmas fundraisers to buy a new computer for their editor :) Meaning, when you have a lot of money to throw at a project, it helps. If i had a lot of money, I’d consider building our own mobile site. But, I know with all the designs we’ve had over the years, getting it to work on every browser and every device is a royal pain. Look at all the problems we’ve had with this site, and its ads, on IE over the years (not that that’s a surprise – IE).

    Finally, any mobile design has to take into account that usually a mobile page has fewer ads. We’re already on life support with this site – I’ve mentioned before that I was going to close the site down for good last Christmas, and only the redesign, and increased traffic, saved us. When you have fewer ads, you generally have less revenue. And when you’re teetering on economic collapse, you can’t do less revenue. So you have to find a mobile design that permits more page views along with those fewer ad slots, to make up the difference.

    Oh and I just checked CNN’s mobile site, not a single ad on it. Thats insane. 1/3 of our traffic is now mobile/tablet. Imagine if we did what CNN did and gave up all of our ads on 1/3 of our traffic. I’d be a full-time consultant, and AMERICAblog would be a domain pointing to a porn site, if we lose 1/3 of our advertising in order to emulate the CNN model :)

    All I’m saying is that I hear you. But running a business on the Web is a far more complicated process than it looks. :)

  24. Tatts says:

    This is odd. Why would it be device-specific? I go to all sorts of sites (CNN, Philly.com, etc.) and see the mobile version automatically on my phone. I know they aren’t WordPress sites, but pixels are pixels and Chrome is Chrome. If it displays in Chrome on a Nexus 7, why shouldn’t I be able to see it using Chrome on my HTC? Or any browser on a Nexus 7 or any tablet or smartphone?

    WordPress does not, in and of itself, prevent the site from being optimized for mobile devices. Americablog can sniff the phone or tablet simply for screen size using the @media query. All it needs to know is the screen width info that is returned from the device that’s trying to browse the site.

    This isn’t how the Web is supposed to work, and it seems unnecessarily complicated (and audience-limiting), as it needs to be configured for every single mobile device that might visit (and every OS and browser update that’s applied to existing devices)? The days of “This site is best viewed in Netscape Navigator.” (or IE5) are long gone, and the web is better for it. This is a move away from the standardization that has allowed the Web to blossom.

    I can’t think of any other site that is hardware-specific. Weird.

  25. BeccaM says:

    As a note folks, this new mobile layout/system does not work on:

    – Windows 8 tablets or phones
    – Android tablets or phones, excepting only the Nexus 7 mini-tablet

    It does work on:

    – iPads & iPhones
    – Kindle Fire

  26. BeccaM says:

    I did some research over on the OnSwipe site, and it looks to me like the Nexus 7 is the only native-Android device they currently support. (Kindle Fire is a modified Android base.)

    Anyway, you might want to add a note that their Android support at present is minimal, and probably will doesn’t work on most people’s Android or Windows 8 tablets or phones — except for the aforementioned Nexus 7 mini tablet and the various flavors of Kindle Fire.

    I’d imagine your iPad readers will love the update though. Looks cool.

  27. That’s odd, it works fine on Safari on my iphone. And personally, I liked the site the way it is, but a lot of people prefer mobile versions, they’re far easier to use on the bus, etc – especially on phones, though they can be easier on tablets too.

  28. pappyvet says:

    I’ll wait for you two to figure it out before I ask about which device you would recommend for my upgrade. Provided of course that Becca doesn’t charge too much for the new template. ;-}

  29. Monoceros Forth says:

    It’s not working too well for me on Safari on my iPhone but, in order to view this site on my cell phone, I’ve taken to using the Mercury browser that gives me the option of faking my browser identity, so I can browse websites without having to put up with oversimplified “mobile” versions. Generally I dislike mobile versions of websites and prefer to view a site on my phone the way it’s supposed to look.

  30. pappyvet says:

    Giggle !

  31. BeccaM says:

    No he can’t. I’m his template provider and we’re canceling his old template because it hasn’t been grandfathered. But here’s this other template for only 3x as much. I’ll be sure to send him a suitably scary letter about his template expiring.

    Don’t tell him there’s an even better template for half what he was paying before, which I am required to offer by law, because that’d eat into my profits.

  32. BeccaM says:

    Nexus 7 is one specific model of Android tablet produced for Google specifically, and has a 7″ screen. It’d be like saying the site worked on an iPad Touch, but with no information as to whether it works on an actual full-sized iPad.

    Google Chrome is the default browser for most Android devices. I also have Firefox for Android loaded on my tablet, which is the Samsung Galaxy Note 10.1 — literally the most popular Android tablet out there right now.

    I also cleared my cache on my Galaxy S3 android phone. No luck.

    The mobile site does load correctly on my Kindle Fire (original model).

    So I guess OnSwipe just doesn’t like Samsung products.

  33. pappyvet says:

    Giving myself an upgrade for Christmas,looking foreward to the new site!

  34. Lol you can keep your current template ;-)

  35. Oh god sorry about that. The thing I posted said this is the compatible Android device:

    Android 4
    Nexus 7 (Google Chrome)

    What is Nexus 7, or is that google chrome?

  36. pappyvet says:

    Trying to improve and adapt is a good thing, so thanks belongs to you John.

  37. BeccaM says:

    That’s why I decided to volunteer as guinea pig and do a thorough test. Figured I’d let ya know what was and wasn’t working.

  38. BeccaM says:

    Just tried it. Also cleared browser history and sacrificed all my cookies. Nada.

  39. pappyvet says:

    GAD ! I hope this doesn’t mean that John used the same company that put together the healthcare website ! By Gum I want enquiries made ! Someone get Lindsey Graham on the phone. Someone is taking advantage of John and I smell treachery ! ;]

  40. Thanks. I know it can be trying for folks when we change things. So thank you.

  41. Hmm… If you’re up for it, I had to empty my cache on the iPad to get it to work.

  42. BeccaM says:

    I’m not having any luck on my Samsung Galaxy Note 10.1. It just shows the regular desktop-style site.

    Default Chrome browser, Android 4.1.2

    Even tried going to ‘touch.americablog.com’ and it looks like it wants to load something from ‘OnSwipe’ — then it bounces right over to the regular site.

    Also tested it using Firefox for Android. Same results.

    Addendum: Also the same result on my Galaxy S3 phone. Android 4.1.2, built-in browser.

  43. pappyvet says:

    Bravo John ! Well done !

© 2019 AMERICAblog Media, LLC. All rights reserved. · Entries RSS