website responsive template

[Gunix]

Γεια σας.

 

Θα ήθελα την βοήθεια σας παρακαλώ.

Θέλω να φτιάξω μια ισοστελίδα με HTML, Bootstrap, JS. Αλλά πρώτα απ' όλα, θέλω να σχεδιάσω ένα website template (mockup) στο photoshop που να είναι responsive σε pc, table (portrait, landscape) και smartphone (portrait, landscape). Ψάχνοντας στο ίντερνετ βρήκα για grid system εδώ http://960.gs/.

Αλλά δεν έχει psd για tablet + smartphone. Πως μπορώ να το κάνω με αυτό ίδιο?

[dominotrix]

Σχεδιασε την σελιδα στο Photshop σε 1200px grid και πανω απο 1200px θα υπαρχει κενος χωρος εκτος απο καποια στοιχεια οπως background images και αλλα css elements τα οποια τα stretchαρουν στο απειρο. Το βασικο σου grid θα ειναι 1200px και επειτα θα παιξεις με τιμες % για να ειναι responsive. Πιο κατω πας συνηθως σε 1024px για οριζοντιο και 768px που ειναι το ορθιο tablet και στα 600px για κινητο.

 

Αν η σελιδα ειναι fullwidth τοτε τη σχεδιαζεις σε 1920px μιας και τοσο ειναι οι αναλυσεις μιας συμβατικης οθονης. Γενικα δεν υπαρχει το απολυτως σωστο και λαθος γιατι πλεον υπαρχουν παρα πολλες διαφορετικες αναλυσεις οθονων ειδικα σε smart συσκευες.

 

Παλαιοτερα υπηρχανε μονο 2-3 breakpoints αλλα με την αυξηση των συσκευων οι σελιδες αρχισαν και "σπαγανε". Οποτε προσπαθησε απλα να παιζεις με % παρα με fixed pixel τιμες.

[tzotzosgr]

δες αυτό θα σε βοηθήσει 

[Gunix]

δες αυτό θα σε βοηθήσει 

 

Εγώ λέω αν υπάρχουν αρχεία grid system psd για iphone, samsung, tablet.

[tzotzosgr]

Φίλε μου αν κανείς μια αναζήτηση θα βρεις πολλά! https://www.behance.net/gallery/18306051/Bootstrap-responsive-Grid-PSD-FREE-Mobile-Tablet-Web

[XPHSTOS_]

Εγώ λέω αν υπάρχουν αρχεία grid system psd για iphone, samsung, tablet.

Νομίζω τα είπαμε και στο Facebook.

Δεν χρειάζεσαι "έτοιμα" αρχεία... απλά φτιάξε guides με βάση τις διαστάσεις που θέλεις!

 

Για να σου δώσω να καταλάβεις, εγώ σχεδιάζω σε:

1920

1366

992

768

480

320

 

Εκτός αν πρόκειται για κάτι απλό που εύκολα πας από 1366 σε 768 σε 320 και είσαι κομπλέ.