Mobile Design

[MNG]

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?

[Dave]

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.

 

[electrode]

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.

[MNG]

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.

[Dave]

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.

[MNG]

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

[KyleMassacre]

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 

[Dave]

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

 

[MNG]

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?

 

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 March 6, 2019 by MNG

[MNG]

So far what I got 

[SRB]

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

 

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.

 

 

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.

 

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 March 8, 2019 by SRB

[MNG]

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

 

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.

 

 

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.

 

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.

[smith]

Torn having very odd layout

[Uridium]

too make sure that the Phone recognises your cell/mobile page add this bit of script to your index or header.php page

<SCRIPT>
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )     
{
   var url = "http://m.wizwych.com/";    
   $(location).attr('href',url);

}
</script>

 

obs change the URL to reflect to your site folder for the mobile/cell version. That way when a player who's on their phone plays it will AUTO go to the correct version.

[Dave]

I split the thread, let's keep this thread to it's original purpose.