For some reason I made all my app pages (also the landing page) 1160px wide. Don’t ask me now why actually… but I was wondering if I couldnt just utilize the full width of the browser like the web apps for Evernote and Spotify for example.
I noticed though, that these web apps arent responsive, they seem to build up from left to right, having the menu on the left side and just cutting off on the right when the screen gets smaller. I wonder what width those apps are set to?
Anyone creating a full width app? My app is responsive (well working on that…) but I wonder if there are things i have to take into consideration when creating (changing everything to) a full width app?
I have actually been somewhat curious about this topic as well. I have assumed if an app is responsive, the initial size doesn’t matter much, but perhaps somebody else can provide a valid counterargument. The preset width for “full-width” is 1200px, which seems adequate. I wonder what the largest minimum width an app can have by today’s standards, and still be useable by most people?
The app that I am working on is using 980px for the page width and so far I’ve managed to make it 100% responsive. 1160px wide is not a bad width to use, depending on your content. For a general tip when it comes to your content width, I usually shoot for >1300px because the most common screen size of 1366px by 768px. This gives you at least 33px (66px total) of padding at full screen on those devices.
*Bubble.is looks like it used 1160px for its width as well.
thanks for the replies.
My problem now is that i created a test page and a test left menu where the page is 1366px wide. On preview it is not fullscreen on my 1920px monitor. I’d like to utilize the full width of my browser but it should still look ok on a smaller screen (not counting mobile here). How does spotify, wrike, evernote etc manage that do you think?
Is the page responsive?
Throw this up in the forum app.
yeah, utilizing responsive this gets fixed. I was just wondering why the web apps I mentioned arent responsive so thought I’d try the same to see what that results in 
Guess I better stay with responsive!
I’m a little confused and it would be easier if I could see a screen shot example of what it is looking like. I’m pretty sure I can figure out exactly how Spotify or those other apps are doing it, but I’m not sure if I know which element you are talking about. A link may be helpful too.
Spotify is responsive…?
Doesnt seem responsive to me?
Same thing for Evernote. However, OneNote is responsive…
Ok, I think I know what you are referring to now and that’s the link I use for Spotify too. In the case of Spotify, that is how it was designed. You think it is not responsive because you are shrinking your browser below their minimum width they are using for desktop devices.
You should be able to tell that it is responsive up to a certain point. They have a media query set up at 1224px wide, and their final one at 1030px wide where it doesn’t seem responsive anymore once you get below that. However, Spotify also has a native app that has a whole new set of style settings for mobile devices as well as their downloadable app that you can’t shrink below their minimum width.
Does that make sense?
*So their web app is not fully responsive, just designed for that specific viewport. Have you noticed that you can’t go to the play.spotify URL on your phone?
Evernote is probably similar to Spotify, since they have a downloadable app as well as their website or web app (depending on how you refer to it).
Yeah, for me it stops changing (thumb nail size and number changes indeed) at 1020px.
But of course, they have a native app so no need for a fully responsive web app. For me that is different, at least for now there wont be a native app so I’ll have to make it responsive.
So I guess what I’ll do is set the width of the page to 1920px and make it responsive so it would look fine on smaller screens…
I wouldn’t set your width to 1920px, unless you are referring to the max width, but play with your responsive settings. Check out this video: https://vimeo.com/169882386 It helps explain it and may give you some ideas depending on what you are trying to do.
FWIW, I’m expecting the narrowest view on my app to be 768, as that’s what an iPad Mini is when held in portrait mode. The app is for teachers, who are likely to have an old, lower resolution laptop, desktop, or Chromebook, or an iPad/iPad Mini. I’m designing it originally at 768, then thinking about ways for the app to “expand gracefully” out to 1920. It’s worked for us so far, but is a big backward in thinking (I think).
1 Like
It only feels backwards, it’s smart to design for the size that it will most be used and tweak for things for larger sizes. It’s not easy for me to start with mobile sizes first because I’ve learned how to do things my way a long time ago and its worked fine so far. I totally understand the concept of it though.
Another thing to think about when testing your responsive views. We resize the browser ridiculously when testing to see how things look, but your users don’t and most of them don’t care as long as it looks good full screen. So design for those device sizes and set your media queries at them. Don’t worry too much about the in betweens unless for some odd reason you think a user is going to have their viewport set to that odd point in-between common view sizes.
1 Like
Absolutely. For us, 768, 1200, 1366, and 1920 are my main “make sure it looks good here” widths.
2 Likes
My thinking was that I’d create the app at the max width (1920px) and use the responsive settings to make it look good at 1366, 1024 and tablet/mobile.
If I’d start at 1366, wouldn’t that mean I would also have to setup max widths which looks like extra work?
Ah, that makes sense…I totally misunderstood you there for a minute. That doesn’t necessarily mean that you will have to set max widths on elements for wider than 1366px or whatever you decide to start designing for. Making sure your app looks good at different widths and adding width settings to certain elements is always worth the extra work.
Take a look at some of your favorite sites at full screen 1920px, and you will probably notice the width of the page content has a max width near the 1300px range. If it looks like it is fully responsive without a content container, zoom out a little to make the page smaller and you may notice the fully responsive content ends up stretching really wide and doesn’t look as nice anymore. While the content in the container maintains a decent look when reduced to that size, really noticeable with full width rows on the page.
It might seem like its saves you some time designing for the widest screen size but it might not be necessary. Not to mention the amount of content you would need to completely fill all that space.
Just a thought, but you’re definitely heading in the right direction. I also think you are over thinking it a little, you can always change it as you figure out those sweet spots.
If it is your first app, try creating a cool landing page with a bunch of different elements (mostly to fill the page and figure out how some things work). Like a one page website that has some length to it. You can even setup your header with buttons/links that scroll the page to that section using the workflows. This will allow you to figure out exactly how to setup your responsive settings to get the right layout you are looking for.
Thanks.
I already built my landing page and the app (a front and backend) but now I’m thinking that the actual app doesn’t have to be the same size as the landing page and I could utilize the extra space while it looks more like an app than a web page. I’ll try some things with 1366 or 1300 then play around with the max width of the page to see if the left menu will ‘stick’ to the left side of the browser window.
1 Like
Right on, I’m sure you will get it figured out. I was just suggesting to do that so you could play with the responsive settings of elements as you adjust the browser width until you get it down. Sounds like you have a good idea of what you need to do though.
1 Like
