jeudi 28 mars 2019

What are some best practices for designing mobile friendly websites?

I have a large amount of experience with general programming languages such as Java, Python and C. I self-study frequently and I am familiar with Design-patterns from the Gang of Four. I have recently been making mobile friendly websites, however overviewing my solutions I can surely suggest that my frontend development skills are not very good, despite a solution being found. I would suggest that I do not implement best practices and I would like to find a palce where I can improve my ability to create mobile response websites. I read a lot of the bootstrap4 framework and it helps for things like navbars, however certain things are not possible.

For example, a recent mobile responsive component of my website can be described in this link https://imgur.com/a/6SgaOVY

The general problem I solved was creating a full-width square with an image, text and an arrow.

For the desktop. The button has a width of 30% and the img is on the left. For mobile, the button has width of 100%, the img is on top, below is the text and finally is the button etc...

To solve such problem I used react and completed is roughly this way

let result;

if (desktop){
     result = /* 40 lines of html to create the solution for desktop */ 
} elif (mobile) {
     result = /* Same 40 lines of html, button width change, html reordering 
     to move the image on top */
} else {
     result = ...
}

{result}

As you can tell I am essentially tripling the code for each case sent back to the user. So far my only understanding of mobile responsive websites is to add a lot of series css conditionals using @media queries.

I have industry level experience with general programming languages but so far most of my frontend development is self-taught.

I would like to find any source of information that teaches best practices for creating efficient, readable, well-written css/html/js that is using to create mobile friendly websites.

Feel free to comment on my previous code example for recommendations

Aucun commentaire:

Enregistrer un commentaire