Maintenir la structure du forum plus longtemps sur écran moins large

Améliorer le responsive design

a marqué ce sujet comme résolu.
Auteur du sujet

Bonjour,

Je vous propose de modifier le responsive design pour que le forum est un état normal jusqu’à 500px, voir 420px en cachant l’avatar.

L’idée est : de rajouter tous les boutons présents dans la sidebar sur la page ; de maintenir l’avatar plus longtemps ; garder la signature plus longtemps ; rendre la sidebar un peu moins indispensable pour faciliter la navigation.

Ca devrait ressembler à ça :

Comportement des petits écrans :

Avec avatar :

Sans avatar :

Comportement écran "mi-large" lorsque la sidebar est masqué

J’ai oublié de mettre le bandeau : retour & nouveau sujet à la fin.

J’ai oublié d’afficher le "marquer comme résolu" quand il n’est pas coché il est gris-vert puis s’il est coché il devient vert. Il faudra lui mettre un effet "hover" pour faire comprendre à l’internaute que c’est un bouton. :) Quelque chose comme ça.

EDIT :

Pour la dernière maquette je ne sais pas quelle header mettre. :/ Celui sur l’image ou :

Car sur l’image ci dessous on n’a pas accès à la sidebar et donc pas assez au message suivi. A moins de rajouter seulement le bouton pour ouvrir la sidebar.


Code HTML si vous voulez essayer chez vous :

<div style="margin-left: 80px;">
<style>
.alert-box.info, .alert-box.success { /* Marquer comme résolu */
    background: #6c7e5e;
}

.pagination .next ~ .next {
    margin-left: 0;
}
.pagination .next {
    margin-left: auto;
}

.sidebar.mobile-menu-hide {
    display:none;
}

.topic-message .message .message-actions a {
    width: 0;
    text-indent: -9999px;
}

.content-wrapper, .full-content-wrapper {
    margin-left: 2rem;
    width: calc(100% - 4rem);
}
</style>
    <ul class="pagination pagination- pagination-chapter">
        <li class="prev">
            <a href="#" class="ico-after arrow-left" rel="prev">Retour à la liste des sujets</a>
        </li> 
        <li class="prev">
            <a href="#" class="ico-after star yellow" rel="prev">Ne plus suivre ce sujet (2 abonnés)</a>
        </li> 
        <li class="prev">
            <a href="#" class="ico-after email" rel="prev">Être notifié par courriel</a>
        </li>
        <li class="next">
            <a href="#" class="ico-after more" rel="prev">Nouveau sujet</a>
        </li>  
    </ul>
    <h1 itemprop="name">Comment faire une todolist pour git ?</h1>
    <h2 class="subtitle" itemprop="description">Marquer des issues "à faire"</h2>
</div>
<div style="margin-left: 80px;">
    <ul class="pagination pagination- pagination-chapter">
        <li class="prev">
            <a href="#" class="ico-after star yellow" rel="prev">Ne plus suivre ce sujet (2 abonnés)</a>
        </li> 
        <li class="prev">
            <a href="#" class="ico-after email" rel="prev">Être notifié par courriel</a>
        </li>
    </ul>
    <ul class="pagination pagination- pagination-chapter" style="background:#f0f0f0">
        <li class="prev">
            <a href="#" class="ico-after lock" rel="prev">Fermer le sujet</a>
        </li>
        <li class="prev">
            <a href="#" class="ico-after pin" rel="prev">Marquer en post-it</a>
        </li>
        <li class="next">
            <a href="#" class="ico-after star" rel="prev">Ajouter en une</a>
        </li>
        <li class="next">
            <a href="#" class="ico-after arrow-right" rel="prev">Déplacer le sujet</a>
        </li>
    </ul>
</div>

Doit-on améliorer le responsive design ?

  • +1 Oui
  • -1 Non

A,

Bon vol.

NB : Album imgur

Édité par A-312

✈️ // 🐺 Ami des loups // 🎮 Coding Game // 🐤 Twitter @A312_zds // :B // L’hiver vient // @**A-312** pour me ping

+6 -1

Cette réponse a aidé l’auteur du sujet

Je pense que l’on peut améliorer le design sur les petits écrans, mais je ne pense pas que manger de la largeur soit une solution. Quand je suis sur mon téléphone, c’est avant tout pour lire ce qui est écrit, et avoir moins d’espace dédié au texte qu’actuellement ne me serait pas plaisant.

Trouver une façon d’avoir les boutons et l’avatar, oui, pourquoi pas, mais pas sur la largeur.

+0 -0

Cette réponse a aidé l’auteur du sujet

Sur petit écran, je m’attends à voir le maximum de lisibilité possible, en gardant les espaces permettant la délimitation logique des messages. Du coup, la solution actuelle, qui supprime la sidebar, les avatars et les signatures, ça me semble très bien. Dans une taille intermédiaire, j’aurais tendance à supprimer les avatars avant la sidebar, pour garder ce qui est utile à la navigation.

+2 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte