Jump to content
Sign in to follow this  
MNG

Mobile Design

Recommended Posts

So basically I am going the route to just make a theme for mobile users instead of trying to make the current one responsive but I'm just curious does anyone know the dimensions for the PSD or is it just like a regular website?

Share this post


Link to post
Share on other sites
16 minutes ago, MNG said:

So basically I am going the route to just make a theme for mobile users instead of trying to make the current one responsive but I'm just curious does anyone know the dimensions for the PSD or is it just like a regular website?

It'd be a better idea to make your second "mobile" theme actually just a simplified responsive version of your main theme. Using fluid breakpoints you can ensure people are able to view the website well on any device, be it a huge iPhone XS Max or some tiny Android phone. This also helps ensure you don't end up with empty space when trying to specifically target break points.

 

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites
2 hours ago, Dave said:

It'd be a better idea to make your second "mobile" theme actually just a simplified responsive version of your main theme. Using fluid breakpoints you can ensure people are able to view the website well on any device, be it a huge iPhone XS Max or some tiny Android phone. This also helps ensure you don't end up with empty space when trying to specifically target break points.

 

I think this is a good idea too, it won't be easy to maintain two different themes.

  • Thanks 1

Share this post


Link to post
Share on other sites
2 hours ago, Dave said:

It'd be a better idea to make your second "mobile" theme actually just a simplified responsive version of your main theme. Using fluid breakpoints you can ensure people are able to view the website well on any device, be it a huge iPhone XS Max or some tiny Android phone. This also helps ensure you don't end up with empty space when trying to specifically target break points.

 

Yeah but it seems more difficult to get the bars and structure right on my current theme.

Share this post


Link to post
Share on other sites
19 minutes ago, MNG said:

Yeah but it seems more difficult to get the bars and structure right on my current theme.

Post a screenshot of your current theme? I've done a fair few desktop to mobile game jobs in my time.

Share this post


Link to post
Share on other sites
5 hours ago, Dave said:

Post a screenshot of your current theme? I've done a fair few desktop to mobile game jobs in my time.

That's how it looks in mobile https://prnt.sc/mtba8g

Share this post


Link to post
Share on other sites
2 hours ago, MNG said:

That's how it looks in mobile https://prnt.sc/mtba8g

I think you would just need to look into media queries with CSS/SCSS/LESS or whatever you want to use like this: https://www.w3schools.com/css/css_rwd_mediaqueries.asp 

This way you could basically set your elements like to include all your classes you need for that particular element. On mobile you may want your stat bar’s parent container to be basically 100% for example and on a tablet you’d want it to be about 33% and on desktop maybe like 16%. This way you have one style for all devices 

Share this post


Link to post
Share on other sites

Considering your layout seems to be created from Torns why not take inspriation on how they do their responsive site?

 

42CF5695-BAE0-455B-ADBD-89AE044594BF.png

  • Like 1

Share this post


Link to post
Share on other sites
Posted (edited)
5 hours ago, Dave said:

Considering your layout seems to be created from Torns why not take inspriation on how they do their responsive site?

 

42CF5695-BAE0-455B-ADBD-89AE044594BF.png

Yeah creating the layout was the easy part but when it comes to css it always get frustrating. I aiming for the torn look when it comes responsive aswell but it just seems like alot and I'm not really experience in that field.

Edited by MNG

Share this post


Link to post
Share on other sites
Posted (edited)

Before you concern yourself so much with in game content, you should be making your external pages mobile friendly. As a claimed 60%+ of internet traffic is now mobile, you have no excuse for not doing it - it should be done.

External Review

IMG_1107.thumb.PNG.fa16c12fb4fc96750ba9e0ac08efef37.PNG

 

When clicking JOIN on mobile (iphone 6s), the form layout doesn't even allow enough space for the placeholder text to display.

Few points here;

1. Have less padding around the box and remove the outer border - serves no purpose.
2. Make the pop up full width - maybe outer borders transparent, but element 100% width?
3. Close icon is black, so barely viewable. Took a while to see where to click to close.

 

IMG_1108.thumb.PNG.c67188672f2658a6e5ea1fc6270bf231.PNG

 

Forgot password page is a completely different layout and doesn't pull in any information to say where you are. This could easily look like a redirection / phishing attempt for an end user.


IMG_1106.thumb.PNG.b54b01f074fa67b05945a90c3323586a.PNG
 

Why JOIN no center!?

 

Also, you have a mis-encoded character in the footer, next to the copyright, showing as a diacritic.

 

Internal review

Lol, using LQQK as Username and Login name, with my personal (and valid) email entering a password, I hit sign up and it reloads to the home page. No email. Can't login with credentials. No error displayed on screen post submit so I don't actually know why it's fuxt.

SSL

Why do you not have SSL? Google/Chrome throws errors all over the place because of this. They're free, depending on hosting and how they support it - Lets Encrypt - Maybe via ACME.sh?

Edited by SRB
  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites
7 hours ago, SRB said:

Before you concern yourself so much with in game content, you should be making your external pages mobile friendly. As a claimed 60%+ of internet traffic is now mobile, you have no excuse for not doing it - it should be done.

External Review

IMG_1107.thumb.PNG.fa16c12fb4fc96750ba9e0ac08efef37.PNG

 

When clicking JOIN on mobile (iphone 6s), the form layout doesn't even allow enough space for the placeholder text to display.

Few points here;

1. Have less padding around the box and remove the outer border - serves no purpose.
2. Make the pop up full width - maybe outer borders transparent, but element 100% width?
3. Close icon is black, so barely viewable. Took a while to see where to click to close.

 

IMG_1108.thumb.PNG.c67188672f2658a6e5ea1fc6270bf231.PNG

 

Forgot password page is a completely different layout and doesn't pull in any information to say where you are. This could easily look like a redirection / phishing attempt for an end user.


IMG_1106.thumb.PNG.b54b01f074fa67b05945a90c3323586a.PNG
 

Why JOIN no center!?

 

Also, you have a mis-encoded character in the footer, next to the copyright, showing as a diacritic.

 

Internal review

Lol, using LQQK as Username and Login name, with my personal (and valid) email entering a password, I hit sign up and it reloads to the home page. No email. Can't login with credentials. No error displayed on screen post submit so I don't actually know why it's fuxt.

SSL

Why do you not have SSL? Google/Chrome throws errors all over the place because of this. They're free, depending on hosting and how they support it - Lets Encrypt - Maybe via ACME.sh?

Thanks for the input, I'm really all over the map with this. The only free time I have is on the weekends so i try to focus on everything at once but my main focus is the mobile audience as well so I will make the changes. It's been a while and the script is very old and outdated aswell. The game isn't no where near done but I'm working on the design area right now for both desktop and mobile.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...