Making Reddit’s Layout Responsive
Reddit is the front page of the internet. Is it responsive tho?
It’s a place where many of us go to stay informed, entertained, or maybe it’s just a black hole we get lost in once in a while.
According to some website I used from one Google search, it holds the 6th spot for most successful social network website in its industry.
It’s fair to say, a LOT of people use Reddit. You probably have it in an opened tab somewhere.
It’s also safe to say that people aren’t only accessing Reddit on their desktops.
They’re on it on their phones, their tablets, and any other screen size and iteration in the spectrum.
We can never assume the context that people are accessing content.
This is where Responsive Web Development comes in!
My goal at the moment is to make Reddit’s main layout more responsive!
Disclaimer:
I’m not here to drag the developers of Reddit. Read my centering thoughts section when I made Github responsive...I honor them as smart developers working with what they have.
I am doing this as an exercise in my own enthusiasm over responsive user interfaces. I live with the conviction that responsive user interface is not only a great solution, but should be the standard in web design.
Besides, despite Reddit’s lack of responsive web components, they’re obviously doing something right by becoming the de facto front page of the internet.
At a Glance
Reddit is not responsive. At face value, Reddit becomes un-usable at any viewport size smaller than 650px.
Check it out:
Looking at it with my iPhone, they chose the m. way by serving a different experience if it’s on a “mobile device”.
It’s not a joy to use because it’s pretty clunky, and it keeps reminding me to download the app instead by bothering me with banners and pop ups that disturb my experience.
It does a good job of convincing the user to download the app (or something other Reddit app), but not in a good way. Unintentionally or not, in a way they’re saying, “this is trash, do this instead, and we’re gonna bother you about it until you do.”
Here’s What I Came Up With!
A responsive, Reddit layout built with flexbox and smart reusable components!
I choose the colors so you could see the sections clearly.
COME THRUUUU! Okay Let Me Show You My Process
First, I looked at the layout in general, and focused in on its main functions.
When met with a Reddit page, I have found there are a few main functions for the user:
- Submit a new post.
- Look at a post link
- Search
Let’s Talk Layout
I’ll be talking about the content choices later, but first let’s set up the skeleton.
I have separated it into three parts:
- Posts — Submit button, all posts
- Search box — search basic, and advanced
- Subreddit Extras — Some extra functionality like description and guidelines etc. Some have them filled out and some don’t. Sometimes there are ads.
This is mostly done in using Flexbox. I say “mostly” because there’s this thing I did:
The Subreddit Extras box goes below the Posts section in this mobile first design.
I was hoping to flexbox-finesse it into switching onto the right right side of the screen after a certain size. I played around with flex column and flex order to no avail.
But then I got an idea.
Because I was building with ReactJS components, I could add them to both to the side and to the bottom, and hide them respectively based on viewport size.
I know…I feel like I’m breaking rule here by repeating content, but here’s how I’ve reconciled it in my heart:
- It’s actually the same component in ReactJS. It’s not like I’m repeating code or content. If this was any other situation, I WOULD NOT RECOMMEND.
- The content is showing somewhere no matter what. It’s either on the side or the bottom.
- Hiding and showing UI is usually not a good idea. It either needs to be showing or not. Plus if someone is using a screen reader, they can’t access it and it would make it difficult for them. I would argue to say this is a different situation from that.
- “Content hidden with
display: noneis not usually announced by screen readers, apart from labels for form controls, regardless of the verbosity settings.” (source)
All the other parts of the layout is pretty self explanatory. It’s the content consideration that I made inside of them that’s got some ‘splainin’ to do.
Content Considerations
It’s what’s inside that counts. Right?
Content and Action Hierarchy
“Create your own subreddit” has the same style and size as “Submit a new link” and “Submit a new text post”.
When actions are using the same style and size, it typically communicates to the user that these are the main functions.
I would hardly suspect that people are making posts as often as they creating new subreddits.
I left “Create your own subreddit” out the main area and suggest that it’s moved somewhere in the header, where all of the other subreddits links are living.
Let’s Combine Similar Actions
When you click on “Submit a new link”, or “Submit a new text post”, they both bring you to a new page. Each with different, but pretty similar functions.
This is an opportunity to streamline user action and combine it into one button. It goes to a new page anyways, and the actions are easily dichotomized there.
This is all in efforts to reduce decision fatigue, which will give users more energy to stay on the site even longer.
My responsive version turns it into an all encompassing “SUBMIT NEW POST” button located at the top of the Posts area.
Having it at the top where all the other posts are increases the relationship and strengthens the action-story you’re telling the user.
“If I press this button, I will see my posts with all the other posts below.”
Search Functionality
So the gif shows you what happens when you first start to search.
A box slides under, which can be pressed to expand into an info box that shows advanced user search shortcuts.
I’m a big advocate of, “only giving users information when they care to know it.”
It’s my instinct is that users that are using search codes are not first time searchers on Reddit.
For comparison, Google has many advanced search codes, but they don’t feel the need to explain them to every user EVERY time they want to search. The people that seek them, will find them.
My recommendation is that they move these tips to the search results page or the advanced search page. Tell the user that in their next search, they can use these shortcuts.
Here’s my diplomatic, in-between solution:
I also made the default search scope the subreddit by default.
Why would I be in a Drag Race subreddit to search “Miss Vanjie” globally on all of Reddit? Secondly, why would I have to click a checkbox to limit it in the first place?
User defaults are really important. These microinteractions are vital to either relieving or diminishing a user’s fatigue. These little things decide whether a user finds a web app to be an enjoyable experience or a torture.
Other Opportunities
- Limit comment scaffolding to two layers max, meaning one reply and then replies under that at most. It works fine for Facebook. If you stay on Reddit enough, you’ll see that the most active threads become less readable as more scaffolding happens. Scaffolding is an anti-pattern to responsiveness.
- Find a way for a post headline to become even more responsive. My responsive design works fine, but I think there’s a way to somehow move the ranking and the upvotes section somewhere to free up even more space for the main content.
Conclusion
So there we are! We turned Reddit’s layout into a responsive component!
The major takeaway is that when meeting a design, it’s important to first siphon it into its main functions.
A design is communicating a lot of things to a user. We have to be mindful as to the kind of messages we’re sending them. Not only is this for the betterment of the business, but the betterment of every user that touches the design.
What should I make responsive next?
RV MENDOZA
Empathetic Front-End Web Development
I specialize in HTML, CSS, and ReactJS to help teams build responsive, modular and semantic web components for the modern browser.
Wanna work together? See what I’m all about at rvmendoza.com
Header image icon credit: Responsive Design by Kiran Joseph from the Noun Project
