Torn Goes Responsive

Torn’s free width layout was initially created within 5 minutes, eight years ago, and was the very first thing I ever coded. I paid no attention to styles, guides or gave any thought to structure. Simply a single table with a width of 100%, I gave the sidebar 20% and the content area 80%. Even Torn’s trademark grey (#CCC) background was created during these 5 minutes.

Over the past 8 years, we’ve grown accustomed to this free width layout, but it’s always been flawed and had several huge disadvantages. Each page was designed around this very ‘old school’ layout, and every new section added to Torn made it harder and harder to change it.

  • Content can never look perfect due to it always having to fill a random amount of space.
  • Lines of text often span far more than the optimal 75 characters per line.
  • A responsive layout which changes the site based on resolution is impossible.
  • A tablet and truly mobile friendly site is impossible.
  • All pages have totally different styles.

Take a look at all of the biggest websites today, you should see that all of them have a fixed width of between around 950px and 1000px. In fact, these days it’s very hard to find a single website which does not have a fixed layout within these dimensions.

Today we’re announcing our new sidebar, design and theme.

We’ve been working with professionals for months to figure out the perfect style, colours, margins, fonts, which will future proof Torn. We now have a crack team of new developers dedicated to converting the site, page by page.

  • Total cross-browser compatibility
  • Incredible experience in PC, tablets and mobile phones.
  • An awesome design which cannot be skewed by constantly changing widths.
  • An easier reading experience and more understandable layouts.
  • A far more professional looking game.

This project really is a mammoth task. We’ll be releasing it with just a few completed pages, but we’ll very quickly be releasing more I imagine on an almost daily basis. We’re expecting issues, and sections of Torn may be ugly for a while, but I’m certain it’ll all be worth it.

I have to be honest, at first I was skeptical… And while browsing the prototypes I felt a little uneasy. The feel of the site was strange and… well simply… totally different from what I’ve been used to for the past 8 years. I’ve no doubt that many of our old timers will feel exactly the same way.

However within a few minutes I was already feeling it sink in, and after using it for a few weeks now on the development server, I can’t imagine it any other way. The experience is undeniably excellent.

It’s certainly something to get used to – and I know a lot of the Torn community hate change – but you’ll just have to take my word for it. You do get used to it quickly, and when you do, it’s awesome! The advantages really prevail when you login on a tablet or mobile phone, words simply cannot describe – you’ll just have to try for yourself.

While we can’t offer a non-fixed and fixed site (there must be only one!), we’ll try to include a free-width sidebar so that old pages which haven’t been transformed yet still span the entire width of the browser window. However, once more and more individual pages are transformed to fixed width, a free width sidebar will begin to look very odd. Old school (plain text) will also be available, but not exactly as it’s seen today.

I think now it’s time to pass over to Kevin, the brains behind this brand new design and responsive layout, who can provide more detailed information and maybe a few screenshots!?

———————————————————————————————————–

“The brains”…? Thanks Joe, No Pressure then :)

Howdy All.

Yup, Joe’s highlighted all the key benefits above but I’d just like to reiterate one point which, in my opinion, is the real beauty and power of our new responsive design:

Uncompromised Mobile Experience.

Yes, playing Torn on your mobile device and tablets will soon be as good an experience as playing on your PC/Laptop. So, no excuses to fall behind on trades, gym trains, crimes or attacks.

We’ve focussed a lot of time and attention in this area due to the growing trend in mobile social gaming. We knew the current pages were in need of an overhaul and decided a new responsive design could achieve two goals with one task.

As a small team we have to stay focussed on what we set out to deliver and a mobile-friendly Torn was a big part of the 2013 strategy.

I hope this also helps explain our reasons for not developing a full Torn App.

If you can’t wait for the release of the RESPO update, here’s a sneak peak of the new responsive profiles page:

As seen on PC or Laptop…

…and the same page viewed on a tablet…

…and a mobile device…

Share

Back to Top

19 thoughts on “Torn Goes Responsive

  1. As a person with fat fingers and a Droid phone, this makes me very, VERY happy. Thank you :D

  2. This looks epic. Well done guys. One thing though. Do we still get to have a profile signature? It would be a sad day on torn if they were to be abolished.

  3. It should show if the player is online or not and the last action on a mobile device too!

  4. Thank you for putting efforts in creating a responsive Torn. I am sure more players will engage in the game more frequently knowing that the site is responsive! Keep the good work up! :)

  5. I can’t say I like it, to be honest.. I feel that if there is space it should be utilised as best as possible, rather than just being a huge empty space (see: youtube.com on a widescreen pc monitor.)

    Like, my eyes are side by side, not one above the other, I can best view a wide website, not a tall one.

    Whatever though, I suppose. Looks nice though.

  6. I’m excited for this! I play a lot on my phone and the new layout looks perfect for it!

  7. Thanks for your comments Benjamin.
    Youtube still uses fixed width layout but simply left aligns the content instead of positioning it in the center.

  8. Yes Hades, profile sigs are still there (if the player has set one up). Don’t fear, we’ve not abolished them. Thanks for your comments :)

  9. I’m extremely excited for these updates! I play a lot on my phone, and this new layout would surely help!

  10. Will the modules on the full and mobile versions (e.g., the sidebar or home page) be collapsible and/or rearrange-able like the tablet version?

  11. Looks great – smashing stuff.

    Interesting that Missions seem to stand out much more now with the updated layout. Will this lead to additional missions?

  12. Looks great! I have been patiently waiting for a more mobile friendly torn, nice to finally see a preview at least.

  13. I’d leave for good if profile signatures were done away with, that’s all I’ve done in torn since 2006! collect art.

  14. I have to admit due to inactivity on my part when I came back to Torn it was a bit of a shock all the changes that have already been implemented, but I’ve never been more in love with this game than I am now, it’s brought me back to Torn permanently and hearing that this is just the start of the new Torn is even more exciting. I’m sure you guys will get critics but as always you’ll take it on the Chin, you cannot please everyone but I’m certain this will please the majority of the player base. I for one am very pleased with the new design, I alternate between laptop and Mobile so this is perfect for me and players who do the same. Keep up the good work guys!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>