Αλαγη text σε διαφορετικες οθονες best practices?

[Ruhl]

Αν υπαρχουν best practices σε  αλαγες σε καποια στοιχεια που λογο μειωσης χωρου στην οθονη
1) να τα αλαζεις εντελως 
 2) να εξαφανηζεις καποιο μερος τους 

πχ σε 
1200+  <h1>Megalo keimeno leksis</h1>

500 <h1>Keimeno</h1>

Προς το παρον κανω κατι τετοιο με διπλασιασμο στοιχειων και εμφανιση αποκρυψη το οποιο εχει ετοιμη την κλαση στο bootstrap αλλα γινεται και με display:none; και ​display:inline-block;
 

<h1 class="text-center hidden-sm hidden-xs">Megalo keimeno leksis</h1>

<h1 class="text-center hidden-md hidden-lg">Keimeno </h1>  

και για κουμπια

 <a href="#" class="btn btn-default hidden-sm hidden-xs" role="button">Megalo keimeno leksis</a>

 <a href="#" class="btn btn-default hidden-md hidden-lg" role="button">Keimeno</a>

Αν και γινεται και με απλο διπλασιασμο του κειμενου με span τωρα που το σκεφτομαι

<h1 class="text-center">
<span class="hidden-sm hidden-xs">Megalo keimeno leksis</span>

<span class="hidden-md hidden-lg">Keimeno</span>

</h1>


Και για τα placeholders στις φορμες κατι τετοιο
if ($(window).width() < 400 ) {
$("input[type=email]").attr("placeholder","join our newsletter");
}
else { $("input[type=email]").attr("placeholder","email");}


Υπαρχει καποιος καλυτερος τροπος? και αν ξεχασα καποιο στοιχειο και γινεται με διαφορετικο τροπο οπως placeholders(εχει καποιο θεμα αν βαλεις 2 ιδια <input θελει εξτρα div στο ενα για να τα ξεχωριζει) με <h> <a>κτλ elements καντε προσθηκη.

 

[dominotrix]

Γιατι να αφαιρεσεις εναν τιτλο επειδη ειναι μεγαλος; Απλα αλλαξε το font-size του. Εκτος και αν δεν καταλαβα καλα τι θελεις να κανεις.

[alou]

Υπάρχουν διάφορες λύσεις ανάλογα πως θα προκύψει το περιεχόμενο και τι εκδόσεις του περιεχομένου υπάρχουν διαθέσιμες. Μια δύο απλές css-only προσεγγίσεις είναι κάπως έτσι

 

https://codepen.io/alou/pen/RZOVbL

 

Η μία περίπτωση με box flex και η άλλη με ch, δες

https://developer.mozilla.org/en-US/docs/Web/CSS/box-flex

και κυρίως το κομμάτι συμβατότητας

 

και

http://caniuse.com/#feat=ch-unit

[XPHSTOS_]

Αν δεν αλλάζει δραστικά το κείμενο στους τίτλους ή στα button... τότε μπορείς να κλείνεις μόνο τις λέξεις (όχι όλο το h1) που φεύγουν σε <span> και κάνεις αυτά hide. Οπότε δεν χρειάζεται duplicate element.

Αυτό σαν λύση μπακάλικη...
Στην πραγματικότητα το πρόβλημα σου είναι στην απεικόνιση και κυρίως και στο Information Architecture.
Κανονικά δεν κόβεις τίτλους για να γίνουν mobile friendly.
Γιατί το μήνυμα είναι το σηματικό και όχι το μέγεθος των γραμμάτων...
Το πιο σωστό είναι απλά να μικρύνεις το μέγεθος των γραμμάτων.

Edit: Για να μην παρεξηγηθώ, η πρακτική αυτή του να κρύβεις element και να εμφανίζεις τις mobile friendly εκδόσεις τους είναι θεμιτό να γίνονται αλλά όχι σε όλα τα buttons και σε όλα τα elements.
Δηλήδή το παράδειγμα με το placeholder είναι λάθος.
Το "Join in our Newsletter" θα είναι τίτλος του block και όχι placeholder. Οπότε θα είναι ορατό και στο mobile και στο desktop. Αυτό ορίζει σαν best practice και η google.

[dominotrix]

Ακομη δε καταλαβαινω γιατι να θελει να κανει κατι τετοιο. Ποιο προβλημα προκυπτει στην εμφανιση smartphone και κρυβει elements;;

[Ruhl]

Ακομη δε καταλαβαινω γιατι να θελει να κανει κατι τετοιο. Ποιο προβλημα προκυπτει στην εμφανιση smartphone και κρυβει elements;;

Ε τυχαινει καμια φορα καποιοι τιτλοι η κουμπια να φενονται καλυτερα πιο επεξηγηματικοι για τον χρηστη, μιας και σε μεγαλες οθονες που εχουμε χωρο φενετε και καλυτερα κατα την γνωμη μου απο το να βαλεις γραματοσειρα 70px και μια λεξη.

 

Ενοω αυτο που λεει και ο χρηστος δηλαδη αν τυχει  καμια φορα σε 1 τιτλο η κουμπι  πως το λυνουμε αν εχει κανεναν ποιο σωστο τροπο.

Ειδα και εναν τυπα να προτηνει με το content:""  και before και after

 

Αλλα γενικα προφανως και μειωνεις τα μεγεθη της γραματοσειρας η του υψους της γραμμης η οτι αλλο χρειαστει για να φενεται καλα που ειναι το κυριο plan οταν αλαζεις οθονες χωρις να αλαζει το text στην html αλλα λεω για μια στο τοσο αν χρειαστει.

 

 

η πρακτική αυτή του να κρύβεις element και να εμφανίζεις τις mobile friendly εκδόσεις τους είναι θεμιτό να γίνονται αλλά όχι σε όλα τα buttons και σε όλα τα elements.

Υπάρχουν διάφορες λύσεις ανάλογα πως θα προκύψει το περιεχόμενο και τι εκδόσεις του περιεχομένου υπάρχουν διαθέσιμες. Μια δύο απλές css-only προσεγγίσεις είναι κάπως έτσι

 

https://codepen.io/alou/pen/RZOVbL

 

Η μία περίπτωση με box flex και η άλλη με ch, δες

https://developer.mozilla.org/en-US/docs/Web/CSS/box-flex

και κυρίως το κομμάτι συμβατότητας

 

και

http://caniuse.com/#feat=ch-unit

Καλα λινκς ευχαριστω 

[dominotrix]

Μα μπορεις να βαλεις vw σαν μοναδα μεγεθους ετσι ωστε τα κειμενα να ειναι "δυναμικα" σε μεγεθος. Αυτο θα το κανεις με @media rules για κατω απο 600px.

 

@media (max-width:600px){

    .p{font-size:6vw;}

}

[Ruhl]

Μα μπορεις να βαλεις vw σαν μοναδα μεγεθους ετσι ωστε τα κειμενα να ειναι "δυναμικα" σε μεγεθος. Αυτο θα το κανεις με @media rules για κατω απο 600px.

 

@media (max-width:600px){

    .p{font-size:6vw;}

}

Dominotrix ευχαριστω για τις απαντησεις και εχει πολλους τροπους οσο ειδα να κανεις το κειμενο δυναμικο να αλαζει και ρυθμους αλαγων http://type-scale.com/  

Ακομα δεν εχω καταληξει σε καποια τακτικη γιατι δεν βολευουν παντα και σε ολα και οσα αρθρα διαβασα καθενας τα δικα του rems vs em, vw,vertical rhythm, 100% η 62,5% για ευκολους πολλαπλασιασμους αρχικο στο body αλλα μετα διαβασα καθε συσκευη/browser εχει δικο της 100% οποτε αλαζει και &%^#&^%@!

Αν καποιος εχει να προτηνει καποιο βιβλιο/βιντεο/αρθρο με solid πληρες τεχνικες και λιγες τροποποιησεις στις οθονες θα το εκτιμουσα

 

Ψιλοασχετο με το original θεμα γιατι το main μου ερωτημα ηταν πως αλαζεις ολο το text να φευγει η να μενει εφοσον το επιλεξεις σε καποιο σημειο.

[dominotrix]

Dominotrix ευχαριστω για τις απαντησεις και εχει πολλους τροπους οσο ειδα να κανεις το κειμενο δυναμικο να αλαζει και ρυθμους αλαγων http://type-scale.com/  

Ακομα δεν εχω καταληξει σε καποια τακτικη γιατι δεν βολευουν παντα και σε ολα και οσα αρθρα διαβασα καθενας τα δικα του rems vs em, vw,vertical rhythm, 100% η 62,5% για ευκολους πολλαπλασιασμους αρχικο στο body αλλα μετα διαβασα καθε συσκευη/browser εχει δικο της 100% οποτε αλαζει και &%^#&^%@!

Αν καποιος εχει να προτηνει καποιο βιβλιο/βιντεο/αρθρο με solid πληρες τεχνικες και λιγες τροποποιησεις στις οθονες θα το εκτιμουσα

 

Ψιλοασχετο με το original θεμα γιατι το main μου ερωτημα ηταν πως αλαζεις ολο το text να φευγει η να μενει εφοσον το επιλεξεις σε καποιο σημειο.

 

Καταλαβαινω την συγχηση σου, μα καθε ιστοσελιδα ειναι διαφορετικη οπως και καθε οθονη. Εγω το φτιαχνω ετσι ωστε να φαινεται οσο το δυνατον καλυτερα σε καθε σελιδα. Δεν υπαρχει παντοτε ενας standard τροπος μιας και ειναι διαφορετικη η καθε ιστοσελιδα.

 

 

Ψιλοασχετο με το original θεμα γιατι το main μου ερωτημα ηταν πως αλαζεις ολο το text να φευγει η να μενει εφοσον το επιλεξεις σε καποιο σημειο.

 

Απλα δινεις 2 clases. Στο ενα class βαζεις κανονικα το style Και στο αλλο class το κανεις να κρυβεται κατω απο καποια pixels. Το κακο με αυτη τη μεθοδο ειναι πως παρολο που θα το εχεις display none πχ στα κινητα αυτο θα φορτωνεται, ασχετα αν δε φαινεται. Καλυτερα ειναι να του αλλαξεις απλα το style και να το προσαρμοσεις, παρα να το κρυψεις.