Landing Page for a mobile app

This is my own simple app I did a while back while playing with android development. I thought it would make a good product for a landing page. Working with Flexbox made this project take longer for me. Still, it was good practice. I’m not sure if I’m sold on it as compared to CSS Grids, but time will tell.

Landing Page

@davisg67 You did it​:ok_hand::ok_hand:

The page does not fit on mobile sceens. Try designing it to fit on screens of 320px width then expand wider.

@brandon_wallace I went down to 432 px and it looked fine. What are you seeing at 320 px that doesn’t fit?

As an aside, I use Bootstraps guidelines when I set my breakpoints. They are;

  • Extra small devices Phones (<576px)
  • Small devices Tablets (≥768px)
  • Medium devices Desktops (≥ 992px)
  • Large devices Desktops (≥ 1200px)

@davisg67 Overall I like it but there’s something about it that doesn’t make it a fav and I want to say it’s just the colors. From your video on down I like everything so it’s just the top portion I’m not crazy about and I don’t know why. And yes, I know that’s not in the least bit helpful. It may be that the Android app and the sign up don’t quite mesh side by side. Either way, it’s minor. Good job!

Thanks for the guidelines, I’m making a note of those. As to the top of the page, I agree. I think the app icon and email signup spaced across is throwing off the balance. I may try repositioning them more central.

1 Like

@Roma

I used to use Bootstrap as a guide for breakpoints, but after doing research
I discovered that it is better to add your breakpoints based on your design. Every
design you do will be different. You may design a page that needs only two
breakpoints, tweleve breakpoints, or zero breakpoints. I once made a page that
had everything centered and it looked great on all screen sizes no breakpoints
necessary.

davisg67’s design will not fit on the phones with smaller screen sizes such as
the iPhone 5/SE which I see a lot of people still using. You will not know which
devices people will use to access your website so the best thing to do is to
start with the smallest devices out there and expand upward. You want to reach
the largest audience possible right?

It is also a nice challenge to be able to design on a screen so small and make
it still look visually appealing.

I agree, it does start to fail some at 320. from 430 on up the responsiveness seems to work. However, I would point out that on a small phone like that at 320 a user can rotate it and the layout is once again good. From a design and challenge point of view though I agree, designing from 320 on up would make for good design for all possible screens.