Welcome To The New Improved Autostraddle!

Hello Autostraddle! Welcome to the first day of the rest of our lives together! You may have noticed that things look a little different around here, and I’m sure you have lots of feelings about it, such as “I LOVE THIS!” or “WAY TO RUIN MY FAVORITE WEBSITE, ASSHATS!” Thus, our Tech Director Cee and our Design Director Alex are here to explain themselves and give you a little peek behind the scenes of our brand new world.


Cee: Tech Director

Hi everyone!

Cee here with this massive project’s technical report. Back when the website was really broken (remember all those 503 errors every day?), we launched an indiegogo campaign to fix the website’s code so that it worked.  While we were in there, we figured we’d redesign it, to bring it up to date and fix some design issues.

A few months into the project my friend Mike and I did a lot of talking about scaling large WordPress apps like Autostraddle for the kind of traffic we get. He suggested an ideal server setup which would mean getting us off of a “service” hosting and into self-hosting – building the servers ourselves and maintaining them. I figured we had nothing to lose, so around the beginning of January last year we started building the servers and testing the load. After a month or so of that, and lots of various load testing, we realized we were in a much better place on the new servers than where we were hosting (and spending a LOT of money monthly). We were finally ready to move the site, and I moved everything over on Valentine’s Day this year. There was a shaky week where we needed to reconfigure and tweak some settings, but after that the site has been running flawlessly. We’ve had almost 100% uptime for the past nine months. So, by quickly putting out the original fires if you will, we were able to relax and take our time with the redesign.

The redesign is one of the most complicated WordPress themes I’ve built to date, with over 4200 lines of code in the stylesheet alone. I’m proud of some of the more fun functionality we have here – the responsive code, masonry (how the boxes quickly scramble to get to their spots after the window is resized), the click navigation and how the navigation changes from large screen to mobile on resize while still being easily editable by Riese from the WordPress backend. I’m also really loving how the community section (BuddyPress) works finally and looks so much nicer and finally makes sense to me. I’ve added some new features there too – you can now search for local or like-minded Autostraddlers. Look for the “toggle search form” button in the Autostraddle Members page. You can now upload avatars directly to Autostraddle instead of having to use Gravatar (but that option is still there). Avatars are nice and big now, so you can actually see them. And finally, groups now work properly, and you can upload a photo for them.

This redesign has been really fun and interesting for me technically. Alex is a great designer and she’s really pushed me to come up with creative code solutions for her designs. I want to thank all of the supporters personally for helping us, and allowing Autostraddle to hire me. This has been a great project and I’m looking forward to the future!


Alex: Design Director

Whew! We’re finally here! WE MADE IT!

First, I’d like to personally apologize for the delay. The scope of the project was enormous for two people (one designer, one developer) and I’m guilty of optimistic deadlines. What can I say, this was a learning experience – a good one! The only person happier about this launch other than Cee is me.

Good design is obvious.
Great design is transparent.

I must have redesigned the redesign a full eight different times with tons of iterations for each. With each version, I found that I wasn’t adding more but I was taking away because I over-designed and over-thought it in the beginning.

One of the first iterations/concepts of the new redesign, made with construction paper

One of the first iterations/concepts of the new redesign, made with construction paper!

Where we’ve ended up is a result of a long process involving many people and much feedback, and but I’m confident that we’ve achieved the goals we set out to achieve.

Responsive Design
Autostraddle is now responsive, which means you can re-size your browser window and the content will adjust accordingly. Go ahead, give it a whirl! This makes our website viewable on many different devices, all at once. Pretty nifty if you ask me. The “boxy” layout we picked from the get-go was especially mobile-friendly.

Every element sits in it’s own “module” because this design best lends itself to a responsive layout. You don’t need to download a separate app — visiting our website on your device is as easy as typing in our URL. You can also save Autostraddle.com to your home screen for easy accessibility.

Navigation
Finding what you’re looking for should be as easy as ever now that we have brand new navigation and different ways to access content around our site. For example, every article is labeled with one (or more) category and tags. Click any of these and you’re brought to a page containing a feed of articles containing that category or tag.
article_categories
Also like Cee mentioned above, the search function now works. So you should be able to find anything you’re looking for and if you can’t, I want to know about it!

Comments
Comment replies are hidden and you can make them visible by clicking the “Show Replies” button.
comments_open_and_closed
This button appears only when there are replies within that comment thread, which we think helps keep the comments more organized by thread discussion.

Showcasing Our Awesome Authors
We believe a big part of the experience here is the accessibility to our authors and writers. These guys do amazing work and they thrive off of you guys and your feedback. So we’ve added a few things in order to give our writers more real estate on the site and more ways for you to get to know them better:

  • Better author profiles, which you can access by clicking the name of the writer. Here, check out Vanessa’s profile as an example!
  • A short bio of the author follows every article
  • Authors are designated differently in the comment section of their articles by a teal circle around their photo

author_bios

You Should Go
We get a lot of requests to talk about, announce, or feature events and it became clear to us that we needed to offer an event-only space where we can recommend events that y’all should go to. This space is that box you see in the sidebar called “You Should Go”.
you-should-go

Let Us Know When You Like an Article
Let’s say hypothetically that you read an article on Autostraddle and you really like it and you want to let us know that you like it? Well, now we have a button for that! (But as always, it’s your comments that really mean the most to us)

thumbs_up
Click that thumbs up button if you like the article, and we can get a much better picture of what you guys like without having to solely rely on comments. It’s another way for us to connect with you on content so we can continue to create shit you like!

WTF is That Star in My Nav Bar?
That star you see up in that teal bar at the top of your screen is where we keep all the stuff specific to the Autostraddle universe!
star_menu
This includes links to: our social media outlets, information about us, the meet the team page, our brand new fancy event site, and well, you get the idea.

We’ll also be adding a “Feature Article” section post-launch.

We know that redesigns can be hard to get used to at first, but we really think you’re gonna like this. We’ll eventually be going to sleep, of course, as we are wont to do, but will be around tomorrow to chat with you about the new site in the comments!


Before you go! It takes funding to keep this publication by and for queer women and trans people of all genders running every day. And A+ members keep the majority of our site free for everyone. Still, 99.9% of our readers are not members. A+ membership starts at just $4/month. If you're able to, will you join A+ and keep Autostraddle here and working for everyone?

Join A+

vitamincee

I'm the former tech director for Autostraddle, which meant I oversaw all the tech-related stuff and did anything from coding the website to keeping the servers online.

I now run a queer/trans web design and development agency in Portland called Dapper Digital.

And I'm also a real estate agent!

I really enjoy making things, taking pictures, getting outside, cooking food, working on my house and garden, and travel.

they/them.

Cee has written 14 articles for us.

306 Comments

  1. Really good job you guys.

    The thing that I like most about the redesign is that there are humans who care enough to have an Autostraddle in the first place and care SO MUCH that they are always making it better and better. Whenever you all roll out these big upgrades, I feel like we have just renewed our vows and are promising to stay together forever and ever. So, thanks for that.

    I am especially excited about the new events section, because this is a thing that I have wanted but never asked. However, when I click on the star and then on events I want it to open in a new tab or else for the events page to have a really obvious link back to the Autostraddle home page.

    Thank you again you are all the best.

      • yeah! when gawker/jezebel did their most recent redesign alex was talking about how much she loved it and i was like BLECH I HATE IT and she just laughed and said people usually hate redesigns and then grow to love them over time and i was like NO NEVER and then like 3 weeks later i was obsessed. not with the content, mind you, just with the design. but here at autostraddle you can fall in love with the design AND the content, slowly but surely…or at least i hope you do! <3

    • Ahh finally! Someone who hates it! I was starting to get worried, because it’s like statistically impossible to not have someone hate it.

      Also, what Vanessa said. Change is hard, but I have to believe that it’s at least better than what it was before :)

  2. I really love the new design! The only thing that is gonna take me a little while to get used to is having to hit the “Show Replies” button in the comments sections. I love seeing everyone’s responses to all the comments, whether they are witty or insightful or heartbreaking or just all the feelings. So having to actively seek out that communal response is gonna take a little bit for me to get used to. I get that it makes it more streamlined though, and will probably stop tangents from completely taking over a discussion…but I kind of liked that part. ;-)

  3. My jaw literally dropped when I opened the sections and they just kept opening. All the way to “recipes.” I could cry! This is a delight! 98% of this is a delight! (I don’t like hidden replies. But guess what, I can just leave my mouse right over the button and click as I scroll. not a big deal, and it probably WILL help with accidental replies/not-replies being in the wrong places)

    Amazing job, Cee & Alex.

  4. The new design is way prettier and ‘breathes’ better. Thanks for all the incredible work you’ve done.

    Suggestions: I’m not a fan of the hidden replies to comments which privilege the original comment over the replies (and often, I feel the replies are more interesting and often more lucid than the original comments). It also makes it almost impossible to search for replied content within a long thread (for instance, using the Mac search function).

    Please, please, please, make comments editable. Sometimes I’m multi-tasking and misspell something and it drives me bonkers that I can’t edit it. Many other forums (including Facebook) allow you to do this… why not AS?

    • Seconded on both counts. If there’s some reason you don’t want to make comments editable indefinitely, I’ve seen blogs where they can be edited up to 5 minutes after posting so that at least typos etc. can be fixed.

  5. Hey guys! It’s me, Alex!

    I’d like to take a moment to discuss the current closed vs. open reply comment set up…

    Having the comment threads default to closed is definitely a huge change, arguably the biggest change to the redesign in terms of user experience. Believe me, we didn’t take this change lightly on our end.

    We’ve chosen to default to closed comment threads because, ultimately, we think it’ll make your comment experience here better. You won’t have to scroll through as much stuff to see all the comments on an article. When the inevitable flame war erupts, it won’t derail the discourse. It’s also how they do it at various other community-based websites.

    We believe it not only cleans up the comment section and make it so much easier to look at, but this way, you choose which conversations you’d like to see and be involved in.

    Yes, it’s scandalous, a huge change, and we anticipated that it wouldn’t be popular at first. But give it some time, and let’s see how it goes.

    Thanks for the support, the amazing comments and feedback, and please do continue to let us know what you think and any issues you might be having!

    xo Alex

    • We’ve chosen to default to closed comment threads because, ultimately, we think it’ll make your comment experience here better.</blockquote
      Translation: We like it that way, so that's the way it'll be.

      It’s also how they do it at various other community-based websites.

      Maybe I’m just not visiting enough community-based websites, or just haven’t happened to chance across the same few… I’ve never encountered anything like this before. I’ve seen “all comments hidden by default,” sure… but never been forced to scroll, stop, click, scroll, satop click scroll, stop, click… just to be able to read anything beyond the top-level comments.

      make it so much easier to look at,

      Maybe easier for some of y’all. Makes it much more difficult for me to look at.

      but this way, you choose which conversations you’d like to see and be involved in.

      Well… actually, no — you choose for me which conversations I’m allowed to see without putting in lots of extra effort. You may feel like you’re giving lots of control; I feel like you’re taking it away. It’s frustrating.

      and we anticipated that it wouldn’t be popular at first.

      Translation: We knew it would be a problem, but the folks who don’t like it will give up on trying to speak up after a little while.

      But give it some time, and let’s see how it goes.

      Trust us, you’ll love it just like we do (or you’ll quite trying to complain about it.) Either way, it’s a win/wi— well, it’s a win for some of us!

      Make it an option. Hell, leave it as “hidden comment replies” by default, even — but please, please, please don’t force this huge step backwards!

      Also, some of the practical things I’ve noticed brought up as far as functionality goes, that have nothing to do with whether anyone likes the change or not: Can’t find-on-page within the hidden comments, if you follow a link from an email notification you don’t end up on the comment you’re there to see… seems like there was something else, but — I can’t find where it was in all of the collapsed comment threads, and I can’t search for it on the page since it’s hidden (unless I start at the top of the page and manually click on every single “show comments” button until I find the one I’m looking for.)

      Or maybe you haven’t seen those complaints about the comment system because the new, “better” way lets you easily miss out on important bits like that?

      Also, wherever the vote for editing comments was, second that. Again, can’t find it easily. Also, comment preview would be really helpful (did I forget to close my tags? Was that supposed to be em or strong? Did I laeve serveral tyops in that lasrt sentence? Too late now…

      • Oh! A translation of myself! That’s a first for me.

        Thanks for the feedback – we’re on it. As mentioned to Sally above, a “Open/Show All” button is a technical capability that we’re not yet sure we can implement, but we’re looking into it as we speak because obvs it’s a great idea and there’s no reason why we wouldn’t have that function besides not having the technical ability to do so.

        Hang tight cause we’re working it out. All the comments/feedback are appreciated because it helps us makes this site better!

  6. Ack. It’s so bloated. These huge buttons and huge spacing between everything, especially in the comments section. I definitely sized the site down to 75% to read it. I know that this is the current design trend, but it’s annoying.

  7. Hey everyone! I’m aware of the anchoring bug for nested comments (when you reply to a comment and end up at the top of the page instead of the comment, or when you click on the comments in the sidebar and you end up at the top of the page, or via email, etc). I’m working on a fix now, hang in there.

  8. Normally when a site changes it’s something that was pushed on the site from the corporate turds above and it’s so they can get the maximum amount of ad views. It’s almost always painful and feels like somone came into your house and redecorated without asking. But this whole process has been amazing and the feeling that we got this done as a community through donating and feedback is incredible. Great work everybody!

    I’m passing out hugs here! *hugs*

      • I’ve seen a lot of people asking for it for a long time here. It’s quite annoying to write a long, impassioned comment only to see a bunch of typos in it after you hit publish and not be able to do anything about it.

        It’s especially rough for someone like me who has a large vocabulary but trouble spelling and a pathological hatred of typos.

        • I would like to be able to edit my comments as well: now that we can use HTML tags and attributes, I’d like to go over all my old comments, removing the underscores I placed around the titles of long works and italicizing them instead; and removing the URLs I placed after text in which I discussed the content of the pages to which they lead and embedding the links directly in the relevant text instead.

    • Yeah, definitely. It’s very pretty, but I kind of miss the… Autostraddleness of the last one? With all kinds of shades of purple?
      Maybe it’s too Pinterest-y for my tastes (although the front page was definitely less overwhelming when I sized it down a notch.)

  9. so new and exciting! I also notice that pretty much the only thing I mentioned in survey feedback a while ago seems to have been taken on board and it feels quite reassuring to know that you read through and noticed what we said and took it on board. <3

  10. You know when you wait a really long time for a thing, and then you start to worry that you’ve over-hyped the thing, and then the thing happens and it’s actually way more fantastic than you thought it would be?? THIS IS THAT THING!

    Major props to Alex and Cee for a job very well done! So worth the wait!

  11. I have been reading autostraddle every day since about 2009/2010. I hardly ever leave comments but this layout is amazing and so much more user friendly. You guys always seem to put a lot of work into this site and it never disappoints.

  12. I’ve been a certified lurker for nearly two years but this is my first comment (yay!) and I really want to say that this whole thing looks so great and I’m so happy that I donated because it’s probably one of the most worth-it things I’ve ever spent money on.

    Anyway, I love Autostraddle and I’m going to be yelling about how wonderful the site looks for like 10 billion years<3

  13. …oh. CRY. MUCH CRY. Really, though. There are actual tears running down my face. I am sure I will absolutely love the new design a month from now, but I am a sentimentalist at heart and I have to take a minute to grieve for the old Autostraddle (and write unnecessary comments about my grieving process). I’m not sure what exactly it was about the old design that I got so attached to, but I’m rather sad to see it go so abruptly. Everything feels foreign and fancy and shiny new and I’m kind of overwhelmed and all of this is very upsetting. *Belle voice when the Beast sends her father back to the village without letting them have a moment together* I DIDN’T EVEN GET TO SAY GOODBYE. My ungratefulness aside, congratulations and good job.

  14. Talk nerdy to me….I love the new redesign. I love that it is so mobile friendly. I used to get a little angry with the old site. Not like mom yelling at her kids in Wal-mart angry but angry enough to shake my fist in the air.

    For reals…it looks great. I love it.

  15. I’m super excited because i just was able to join (thank you Chloe) & when the site got the redesign, the cookie error went away : D Yeay~~

    Also, i don’t know much of anything of writing up sites & the design, but ghhgfghjk i salute you for your prowess & dedication because dayum.

  16. Question: is there a place where people can submit story/essay ideas? Not a pitch to write one myself, but something I would like someone else to write? Formspring used to be good for that, especially the anonymous part.

  17. The new design is amazing! I feel like I got a new phone; it looks so different and pretty. It really reads beautifully, too.

    A couple of small things:

    1. The search box doesn’t focus when you click on the search button, you have to tab/click into it.

    2. I know the position:fixed banner at the top of the screen is becoming standard, but it eats a pretty big amount of space on mobile, especially considering that the “Sign In/Members” banner goes into the next line.

  18. I had to size it down, but after initial shock and immediate rejection I must say that I like it! Yay! Acceptance of change without having a major whinge proves how awesome Autostraddle really is.

    The only thing is I miss the purple. I love purple. I also find the light blue hard to read on the white.

  19. Loving the new site so far! Admittedly I’ve only clicked on one (this) article. But still.

    I can’t write code for WordPress without getting a million errors and becoming extremely angry so I’m even more impressed

  20. I might be the only one, but I find the format of the actual articles to be incredibly difficult to read. I want paragraph indentations or at least more space between lines. I feel like even the comments have more space between lines of text which make it easier to read. The text in the articles runs together and makes it difficult to focus, no matter what size my browser is or if it’s on my phone.

  21. The functionality is much better, but I’m not fond of the design, especially the articles. It’s a very “busy” design, your eyes go all over the place. I wish the articles were stacked like the previous autostraddle design.

    • Yeah agreed, my first reaction to the home page was “my eyes”. It’s much harder to read the headlines, too much stuff drawing the attention to other parts of the page. I thought I’d get used to it but we’re a couple of days in now and it’s still a really unpleasant browsing experience.

  22. I LIKE THIS. I like this a lot! And I appreciate all the work you guys put into it, you are amazing. for real I appreciate you.

    I also sized down on my monitor a bit like some people said so I can see more at one time. So far 90% seems better and I’ll see if I like 75% more (I have a biggish laptop, that’s super helpful, isn’t it).

    One little thing. I love that you can see latest comments now, but if you click on those comments, it doesn’t take you to the full thing (maybe it does if they’re not nested replies?) I’m sure the reply thing is a thing you will be working on (given earlier comments) I just wanted to point that bit out.

    I like the color scheme, it’s sexy.

  23. I just wanted to say that as an aspiring web developer (with maybe a little design thrown in there? I don’t know?) this is all so very relevant to my interests. Ugh can there be like some articles on learning to code, and looking real real gay in the process?

  24. Ok, two small things after using it for a few days.

    -There’s no indication of which like buttons you’ve clicked vs those you haven’t.
    -The colors. It’s kind of a complex small thing, mostly related to the super low contrast between comment boxes and the general background. One, it’s extremely painful trying to read anything in grey or teal text; this is fo sho my last comment for the day because I have to go do something about the headache it’s triggered. Two, it’s kind of hard to distinguish between comment blocks? There’s not a clear indicator of indented-ness within one thread, and the division between threads is hard to tell also. If the inset was more clear, or comment boxes alternated colors, or maybe both, it might be easier?

    Or alternately I’m just having a visually sensitive month and just need to go find my migraine meds and stop reading the comments from here out. :\

  25. I’m loving the redesign more and more each day :)

    Just wanted to say that I keep having to scroll back to the top of articles to share and like the article which is somewhat annoying – it’d be awesome if those buttons could repeat somewhere below the post.

    My fave thing about the redesign might very well be the very simple articles from the archive widget – I’m finding all these old ones I’ve never read and it’s been magical.

    Anyway, just wanted to provide some more feedback. :)

  26. I can tell a ton of work when into this, but I gotta say it: I think the old layout was better for the main page. This makes it feel more like a blog than an actual website… Kind of makes me think of Afterellen which is something I never want to think of. I do love that there are more topics covered and an increase in columns. YAY. The actual posts are much cleaner, but the front page worked better in the previous layout.

Contribute to the conversation...

Yay! You've decided to leave a comment. That's fantastic. Please keep in mind that comments are moderated by the guidelines laid out in our comment policy. Let's have a personal and meaningful conversation and thanks for stopping by!