Χρήσιμα Tutorials Για Responsive Κατασκευή Ιστοσελίδων

VN:F [1.9.22_1171]
Rating: 5.0/5 (3 votes cast)
FavoriteLoadingΠροσθήκη στα Αγαπημένα μου
13/04/2013 από
Zeoz

Η έννοια του responsive web design, η οποία ξεκίνησε από τον Ethan Marcotte είναι, ότι οι διατάξεις της ιστοσελίδας μας πρέπει να ανταποκρίνονται στη συσκευή του χρήστη, καθώς και ότι η σελίδα μας πρέπει να  ταιριάζει σε οποιαδήποτε συσκευή.

Στο βιβλίο του Responsive Σχεδίαση για ένα διαδραστικό δικτυακό τόπο περιγράφει τρία μέρη

  • A fluid grid
  • Fluid images
  • Media queries

 

Τα tutorials που μοιραζόμαστε σήμερα θα σας δώσουν μια καλή εμπειρία για τους τρεις αυτούς παράγοντες.

Responsive Design in 3 Steps

Responsive Design in 3 Steps

Beginner’s Guide to Responsive Web Design

Beginner’s Guide to Responsive Web Design

Coding a Responsive Resume in HTML5/CSS3

Coding a Responsive Resume in HTML5/CSS3.

Responsive Web Design: What It Is and How To Use It

Responsive Web Design: What It Is and How To Use It.

How to Turn Any Site Into a Responsive Site

Turn Any Site into responsive

Techniques For Gracefully Degrading Media Queries

Degrading Media Queries

Designing for a Responsive Web

Grids

Responsive Web Design: A Visual Guide (video tutorial)

Video tutorial.

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website.

Fluid Grids

Fluid Grids

Adaptive layouts with media queries

Adaptive Web Design

Convert a Menu to a Dropdown for Small Screens

Convert a Menu to a Dropdown for Small Screens.

CSS Media Queries and Using Available Space

CSS Media Queries and Using Available Space.

How to use CSS3′s Orientation Media Queries

How to use CSS3's Orientation Media Queries.

Techniques in Responsive Web Design

Techniques used in Responsive Web Design tutorials.

Responsive Design with CSS3 Media Queries

responsive-images

CSS effect: space images out to match text height

CSS effect: space images out to match text height.

Responsive Images: Experimenting with Context-aware Image Sizing

Responsive Images: Experimenting with Context-aware Image Sizing.

CSS: Elastic Videos

making videos responsive.

Responsive Content Navigator with CSS3

Responsive Content Navigator with CSS3.

Create a Responsive Web Design Template

Create a Responsive Web Design Template tutorial.

Responsive Horizontal Layout

Responsive Horizontal Layout tutorial.

Responsive Data Tables

Responsive Data Tables tutorial in CSS3.

Flexible Slide-to-top Accordion

Flexible Slide-to-top Accordion tutorial.

How to Build a Responsive Thumbnail Gallery

How to Build a Responsive Thumbnail Gallery tutorial.

Build a Responsive, Mobile-Friendly Web Page With Skeleton

Build a Responsive, Mobile-Friendly Web Page With Skeleton.

Fluid CSS3 Slideshow with Parallax Effect

 Fluid CSS3 Slideshow with Parallax Effect tutorial.

Optimizing your email for mobile devices with the @media query

making your email mobile ready responsive.








Hide ↑

Xtnd.it Group | e-xtend your possibilities

Ripple Effects με SVG και Javascript ~ Material Design 

18 September 2015

Ενα σε βάθος tutorial για το πώς να οικοδομήσουμε  ripple effect  που περιγράφονται με βάση των προδιαγραφών σχεδιασμού της Google και να τις συνδυάσουμε[…]

Read more...

5η Έκθεση για τις Υπηρεσίες Internet Web World Expo 2015

18 September 2015

 24-25 Οκτωβρίου – Ζάππειο Μέγαρο|  

Η WebWorldExpo[…]

Read more...

WordPress Greek Community 3rd meetup

21 April 2015

Τρίτη 28/04/2015, 18:00
THE HUB EVENTS, Αλκμήνης 5, Κ. Πετράλωνα

Η ελληνική κοινότητα του WordPress είναι εδώ! Αρκετό καιρό μετά το προηγούμενο meetup[…]

Read more...






Σχόλια

Δεν υπάρχουν σχόλια ακόμα.

Αφήστε ένα σχόλιο

 






RSS για τα σχόλια σε αυτό το άρθρο.  |  TrackBack URL



 
 
 

Eταιρείες παροχής υπηρεσιών διαδικτύου




 

Το Όραμά Μας

3d2 3d2

Η νέα εποχή ξεκινάει…

Είστε έτοιμοι;

Παρά τις όποιες δυσκολίες συναντήσαμε, τελικά μετά από 1 χρόνο περίπου, καταφέραμε να συγκεντρώσουμε τις δυνάμεις μας και να βάλουμε τις σκέψεις μας στο σωστό μονοπάτι.

Ξεκινάμε μια νέα εποχή για τα Ελληνικά δεδομένα. Κοιτάμε μπροστά και οραματίζομαστε το μέλλον με αισιοδοξία σε μία πολύ δύσκολη εποχή!

Αν είστε digital artist (web designer. web developer, programmer, 3d animator, graphic designer κτλ)  δώστε λίγα λεπτά από τον χρόνο σας να διαβάσετε το παρακάτω άρθρο. Σίγουρα σας ενδιαφέρει

 
web design forum

  • Προσεγγίστε νέους αναγνώστες και φίλους
  • Αποκτήστε το δικαίωμα να προωθήστε την σελίδα σας μέσω διαφημιστικών banner στο web design forum
  • Αποκτήστε συνδέσμους και backlinks δωρεάν
  • Αυτόματη προωθηση του άρθρου σας, σε διάφορες ιστοσελίδες κοινωνικής δικτύωσης.