responsive website design CU sau FARA js ?

Che · December 13, 2014

Tocmai am vazut acest tutorial:

Si vad ca foloseste doar html5 si css3 ca sa il faca responsiv.

Pe de alta parte vad ca sunt unii care folosesc si un anume fisier javascript pe langa htm5 si css3 ca sa faca un website responsiv.

Cum e mai bine si de ce ?

xact · December 13, 2014

Fara. Cu cat mai putin js, cu atat mai bine. CSS3 ofera solutii f elegante pentru design responsive; javascript presupune memory usage/resurse, de aceea e recomandat sa se foloseasca doar cand e neaparata nevoie.

MrGrj · December 13, 2014

Fara. Cu cat mai putin js, cu atat mai bine. CSS3 ofera solutii f elegante pentru design responsive; javascript presupune memory usage/resurse, de aceea e recomandat sa se foloseasca doar cand e neaparata nevoie.

Parerea mea e ca JS e mult mai stabil cand vine vorba de compatibilitate. Intr-adevar, CSS-ul ofera solutii mai usoare / la-ndemana oricui, insa nu sunt tocmai cele mai bune.

Consuma resurse, insa daca stii sa optimizezi metoda merge perfect.

E doar propria parere

Pacalici · December 13, 2014

Clar css. Singurele js-uri pentru responsive ar fi respond js (IE8 media queries) si html5shiv pentru elementele de html5.

jsonwhite · December 13, 2014

Bootstrap FTW !

Pacalici · December 13, 2014

Cu ceva dexteritate eu zic ca nu ai nevoie de bootstrap. Eu unu lucrez intr-un CMS unde e mai mare chinu sa adaug clasele de bootstrap. Mai bine fac manual tot.

aceveve · December 13, 2014

Pentru cei care au spus css: va rog sa-mi aratati si mie va rog un site responsive, facut de voi. Aici sau in privat.

P.S. il deschid cu IE ( incepand de la 8 ). Si NU, nu incepeti ca IE8 e de porc, ca e vechi. Uitati-va in niste rapoarte GA, sau orice altceva si o sa vedeti ca ~5% inca folosesc IE8 si IE9 . Ce ziceti? Credeti ca am vreo sansa sa vad ceva din el sau sa navighez pe el?

Che · December 14, 2014

Pentru cei care au spus css: va rog sa-mi aratati si mie va rog un site responsive, facut de voi. Aici sau in privat.
P.S. il deschid cu IE ( incepand de la 8 ). Si NU, nu incepeti ca IE8 e de porc, ca e vechi. Uitati-va in niste rapoarte GA, sau orice altceva si o sa vedeti ca ~5% inca folosesc IE8 si IE9 . Ce ziceti? Credeti ca am vreo sansa sa vad ceva din el sau sa navighez pe el?

Poti face sa-ti apara mesaj if IE8 or lower => mesaj: "Please upgrade your browser !"

aceveve · December 14, 2014

Poti face sa-ti apara mesaj if IE8 or lower => mesaj: "Please upgrade your browser !"

Spune-i asta clientului sa vezi ce te ia la suturi

In momentul asta, intrebarea e: IE sau CSS?
Mortii ma-sii de browser ca numai probleme creaza. In loc sa puna dracu IE11 pe toate versiunile de Windows, eroii astia de la Microshit s-au gasit sa puna max IE8 pe XP, max IE10 pe 7 si IE11 abia pe 8.1. Te caci pe el de IE, refuzi clientul si mergi mai departe.
@aceveve Ai vreo nelamurire, crezi ca ceva nu poate fi implementat, sau ce? WebToil.co

ORICE poate fi implementat, pe orice browser, dar nu cum au zis baietii cu foarte putin JS sau deloc

Si nu, nu poti sa refuzi clientul pentru ca cine vrea sa functioneze si pe IE e de obicei firma mare si pe langa website sigur ii mai faci si niste trimiteri de newslettere, campanii de bannere, etc. Si in vremurile astea nu vad cum poti sa refuzi pe cineva care vrea sa iti dea mii de euro

Che · December 14, 2014

@Gecko

Tocmai am vazut acest filmulet:

Codul este asta:

index.html


<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media 1</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  </head>
  <body>
     <header>
         Best Website Since Google
     </header>
     <nav>
        <ul>
            <a href="#"><li>Home</li></a>
            <a href="#"><li>About</li></a>
            <a href="#"><li>Blog</li></a>
            <a href="#"><li>Shop</li></a>
            <a href="#"><li>Gallery</li></a>
            <a href="#"><li>Contact</li></a>
        </ul>
        <div class="handle">MENU</div>
     </nav>
     <section>
        <h1>This is my article title</h1>


        Some text here. "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?""Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?""Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"


     </section>
     <script>
     $('.handle').on('click', function(){
        $('nav ul').toggleClass('showing');

     });   
     </script>



  </body>
</html>

style.css


@media print{ /* arata la ce vrei sa faci print */
    nav, .ad{
        display:none;
    }
    a{
        text-decoration: none;
    }
}

div {
line-height: 1.5em;
text-shadow: none;
color: #656565;
font-size: 17px;
font-family: Helvetica, Sans-serif;
}

h1 {
color: #ED6F21;
}

body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

header{
    background: #00795f;
    width: 100%;
    padding: 40px 0;
    color: white;
    text-align: center;
}
a{
    text-decoration: none;
    color: inherit;
}
nav ul{
    background-color: #43a286;
    overflow: hidden;
    color: white;
    padding: 0;
    text-align: center;
    margin: 0;
    -webkit-transition: 0.4s;
       -moz-transition: 0.4s;
        -ms-transition: 0.4s;
         -o-transition: 0.4s;
            transition: 0.4s;
}

nav ul li{
    display: inline-block;
    padding: 20px
}
nav ul li:hover{
   background-color: #399077
}
section{
    line-height: 1.5em;
    font-size: 0.9em;
    padding: 40px;
    width: 0 auto;
}
.handle{
    width: 100%;
    background: #005c48;
    text-align: left;
    box-sizing: border-box;
    padding: 15px 10px;
    cursor: pointer;
    color: white;
    display: none;
}

@media screen and (max-width:580px){
    nav ul{
        max-height: 0;

    }
    .showing{
        max-height: 20em;
    }
    nav ul li{
        box-sizing: border-box;
        width: 100%;
        padding: 15px;
    }
    .handle{
        display: block;
    }
}

Va rog mult de tot sa imi raspundeti la intrebarile astea (nu prea le am cu programarea).

1. Cum poti face meniul sa se miste fara sa folosesti Ajax/javascript ci doar CSS3 si html5 ?

2. Ce anume face "box-sizing: border-box;" mai exact ?

3. Cum faci in asa fel incat sa mearga si pe browserele care nu suporta js/ajax ?

Multumesc mult de tot !

Pacalici · December 14, 2014

1. Folosind transition si transform poti anima elementele din meniu. Functioneaza pe acelasi principui cu butoanele animate (parca tu intrebasei pe forum) numai ca animezi position, width, height, etc . Uite ceva gasit rapid si care pare dragut Navigation Bar by Jan Kad?ra .S-ar putea sa fi vrut un raspund cu exemplu la ce ai postat dar no time now deci sorry.

2. default e content-box. Nu stiu definitia sincer dar :

- default value adica content-box atunci cand dai width 100% si mai pui padding/border, o sa iti mareasca elementul la 100% + valorile tale.

- border-box iti ia padding si border din acel width de 100%

3. CSS3 animations pe IE8 poate chiar si 9 cred ca nu prea exista. Poti face de exemplu cu modernizr sa vezi daca suporta css3 sau nu, apoi folosindu-te de clasele care le adauga (js, no-js daca nu ma insel) poti face functii doar pt IE-urile vechi).

Sper ca am raspuns pe inteles si ca te-a ajutat.

Che · December 14, 2014

1. Folosind transition si transform poti anima elementele din meniu. Functioneaza pe acelasi principui cu butoanele animate (parca tu intrebasei pe forum) numai ca animezi position, width, height, etc . Uite ceva gasit rapid si care pare dragut Navigation Bar by Jan Kad?ra .S-ar putea sa fi vrut un raspund cu exemplu la ce ai postat dar no time now deci sorry.

Trebuie sa mearga pe mobil, nu neaparat pe ecrane mai mici. Pe mobil nu ai mouser hover si nici hover pentru simplul motiv ca nu ai mouse, si nici hover nu prea ai cum sa-l ai pe mobil. Prin urmare codul de pe codepen nu merge pe mobil.

Oricum, vad ca e destul de frumos realizat acel menu, insa e SCSS si nu CSS3, nu ai putea sa-l faci CSS3 ?

Multumesc !

soimuletzu1 · December 15, 2014

poti sa te folosesti de siteul asta sa iti converteasca din scss in css , Sass to CSS , cand vine vorba de cross browser is de parere ca ii necesar js. Cel putin pt. ie8.

Sign In

responsive website design CU sau FARA js ?

Recommended Posts

Che

xact

MrGrj

Pacalici

jsonwhite

Pacalici

aceveve

Che

aceveve

Che

Pacalici

Che

soimuletzu1

Join the conversation

Browse

Activity

Pages