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.
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.
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.
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
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”.
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)
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!
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!
