Kérdés DD Garden 40 téma responsive (mobil) megjelenítés szerkesztése

Több
2014 dec. 13 08:09 - 2014 dec. 13 08:10 #1 Írta: kocsislaci
kocsislaci létrehozta a témát: DD Garden 40 téma responsive (mobil) megjelenítés szerkesztése
Üdv mindenkinek!

Az elmúlt hetekben sokan panaszkodnak az oldalunk mobil megjelenítésére a lassú betöltés miatt. Sajnos igazuk is van ugyanis responsive megjelenítés során az összes modult is megjeleníti a mobil készülékeken a téma. Na az oldal teljes letöltése során méréseim szerint több mint 20 MB adat kerül letöltésre. Ez Wifi hálózaton egy jobb telefonnak nem is okoz gondot, de egy mobilnetnek már igen.(főleg hogy 100MB a legtöbb helyen 1000FT környékén kerül eladásra.)

A másik probléma amit jeleztek, hogy az oldal logója kicsúszik a megjelenítésből ami tényleg így is van....

Kérdések:
1. Hogyan lehetne webes felülettől különálló logót berakni? Egyszerüne egy képi hívatkozással és kész? (munkahelyen vagyok itt nem tudom megnézni)
2. Hogyan tudom a webes felületen lévő modulokat "nem megjeleníteni" mobil nézetben?
3. Esetleg az lehetséges, hogy egyes mdulokat megjelenítsek külön külön?

OLDALAM CÍME

template.responsive.css
/* Created by Artisteer v4.2.0.60623 */

.responsive body
{
   min-width: 240px;
}
  
.responsive img 
{
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}  
  
.responsive .dd-content-layout img,
.responsive .dd-content-layout video
{
   max-width: 100%;
   height: auto !important;
}

.responsive.responsive-phone .dd-content-layout img 
{
   margin: 1%;
}

.responsive.responsive-phone .dd-collage,
.responsive.responsive-tablet .dd-collage {
   margin: 0 !important;
}

.responsive .dd-content-layout .dd-sidebar0, 
.responsive .dd-content-layout .dd-sidebar1, 
.responsive .dd-content-layout .dd-sidebar2 
{
   width: auto !important;
}
    
.responsive .dd-content-layout, 
.responsive .dd-content-layout-row, 
.responsive .dd-layout-cell 
{
   padding: 0;
   display: block;
}
    
.responsive .image-caption-wrapper 
{
   width: auto;
}

.responsive.responsive-tablet .dd-vmenublock,
.responsive.responsive-tablet .dd-block
{
   margin-left: 1%;
   margin-right: 1%;
   width: 48%;
   float: left;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

.responsive .dd-responsive-embed 
{
   height: 0;
   padding-bottom: 56.25%;
   /* 16:9 */
    position: relative;
}

.responsive .dd-responsive-embed iframe,
.responsive .dd-responsive-embed object,
.responsive .dd-responsive-embed embed
{
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

.responsive .dd-header 
{
   width: auto !important;
   max-width: none !important;
   min-height: 100px !important;
   min-width: 0 !important;
   text-align: center;
}

.default-responsive .dd-header 
{
   height: auto;
}

.default-responsive .dd-header *
{
   position: relative;
   text-align: center;
   -webkit-transform: none !important;
   -moz-transform: none !important;
   -o-transform: none !important;
   -ms-transform: none !important;
   transform: none !important;
}

.default-responsive .dd-header .dd-headline, 
.default-responsive .dd-header .dd-slogan 
{
   display: block !important;
   top: 0 !important;
   left: 0 !important;
   margin: 2% !important;
   text-align: center !important;
}
    
.default-responsive .dd-header .dd-headline a, 
.default-responsive .dd-header .dd-slogan 
{
   white-space: normal !important;
}

.default-responsive .dd-header .dd-logo
{
   display: inline-block;
   margin: auto !important;
   left: auto;
   top: auto !important;
   width: auto;
   height: auto;
}

.responsive .dd-header .dd-slidenavigator 
{
   position: absolute;
}

.default-responsive .dd-header .dd-positioncontrol 
{
   top: auto !important;
   right: auto !important;
   bottom: auto !important;
   left: auto !important;
   width: auto;
   height: auto;
   margin: auto;
}

.responsive .dd-header #dd-flash-area
{
   display: none;
}

/* Search and other elements in header element directly */
.default-responsive .dd-header>.dd-textblock
{
   position: relative !important;
   display: block !important;
   margin: 1% auto !important;
   width: 75% !important;
   top: auto !important;
   right: auto !important;
   bottom: auto !important;
   left: auto !important;
}

.default-responsive .dd-header .dd-textblock 
{
   position: relative !important;
   display: block !important;
   margin: auto !important;
   left: 0 !important;
   right: 0 !important;
   top: auto !important;
   height: auto !important;
   width: auto;
   background-image: none;
}

/* '.dd-header *' used noram align, but for '.dd-textblock *' we must force align because of preview */
.responsive .dd-header .dd-textblock *
{
   text-align: center !important;
}

.default-responsive .dd-header .dd-shapes > .dd-textblock,
.default-responsive .dd-header .dd-slide-item > .dd-textblock
{
   display: none !important;
}

.default-responsive .dd-header .dd-shapes > .dd-textblock *
{
   text-align: center !important;
   width: auto !important;
   height: auto !important;
   display: block;
}

.default-responsive .dd-header .dd-slider .dd-textblock *
{
   text-align: center !important;
   width: auto !important;
   height: auto !important;
   display: block;
}

/* For icons like facebook, rss, etc. */
.responsive .dd-header>.dd-textblock>div 
{
   width: 100%;
}
/* dynamic width nav */
.responsive nav.dd-nav,
.responsive .dd-nav-inner
{
   width: auto !important;
   position: relative !important;
   top: auto !important;
   left: auto !important;
   right: auto !important;
   bottom: auto !important;
   margin-top: 0;
   margin-bottom: 0;
   min-width: 0;
   text-align: left !important;
}

.responsive nav.dd-nav
{
   min-width: 1%;
   margin-top: 1%;
}

.responsive .dd-nav 
{
   padding-left: 0;
   padding-right: 0;
   margin-bottom: 20px;
}

/* full width hmenu, instead of inline-block */
.responsive .dd-nav ul.dd-hmenu 
{
   float: none;
   text-align: center;
   display: none;
}

/* elements on different lines */
.responsive .dd-nav ul.dd-hmenu li,
.responsive .dd-hmenu-extra1,
.responsive .dd-hmenu-extra2
{
   float: none;
}
  
/* horizontal margins */
.responsive .dd-nav ul.dd-hmenu>li:first-child, 
.responsive .dd-nav ul.dd-hmenu>li:last-child, 
.responsive .dd-nav ul.dd-hmenu>li
{
   margin-left: 0;
   margin-right: 0;
}
 
/* separator */ 
.responsive .dd-nav ul.dd-hmenu>li:before
{
   display: none;
}

/* vertical distance between items */
.responsive .dd-nav ul.dd-hmenu a
{
   margin-top: 1px !important;
   margin-bottom: 1px !important;
   height: auto;
   white-space: normal;
}

.responsive .dd-nav ul.dd-hmenu>li:first-child>a
{
   margin-top: 0 !important;
}

.responsive .dd-nav ul.dd-hmenu>li:last-child>a
{
   margin-bottom: 0 !important;
}

/* fixes for extended menu */
.responsive .dd-nav .ext, 
.responsive .dd-nav ul.dd-hmenu>li>ul, 
.responsive .dd-nav ul.dd-hmenu>li>ul>li,
.responsive .dd-nav ul.dd-hmenu>li>ul>li a
{
   width: auto !important;
}

/* submenu position on hover */
.responsive .dd-nav ul.dd-hmenu ul
{
   left: auto !important;
   right: auto !important;
   top: auto !important;
   bottom: auto !important;
   display: none !important;
   position: relative !important;
   visibility: visible !important;
}

.responsive .dd-nav ul.dd-hmenu li.active>ul
{
   display: block !important;
}
.responsive .dd-nav ul.dd-hmenu ul li.active>a
{
   font-weight: bold;
}

.dd-nav .dd-menu-btn 
{
   border: 1px solid #404040;
   border-radius: 3px;
   box-shadow: 0 0 3px 0 rgba(0, 0, 0, .2);
   display: none;
   -svg-background: linear-gradient(to bottom, #707070 0, #000 100%);
   background: -ms-linear-gradient(top, #707070 0, #000 100%);
   background: -moz-linear-gradient(top, #707070 0, #000 100%);
   background: -o-linear-gradient(top, #707070 0, #000 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #707070), color-stop(1, #000));
   background: -webkit-linear-gradient(top, #707070 0, #000 100%);
   background: linear-gradient(to bottom, #707070 0, #000 100%);
   margin: 3px;
   outline: none;
   padding: 5px;
   position: relative;
   vertical-align: bottom;
   width: 20px;
}

.dd-nav .dd-menu-btn span 
{
   background: #E0E0E0;
   border-radius: 2px;
   display: block;
   height: 3px;
   margin: 3px 1px;
   position: relative;
   -moz-transition: background .2s;
   -o-transition: background .2s;
   -webkit-transition: background .2s;
   transition: background .2s;
}

.dd-nav .dd-menu-btn:hover span
{
   background: #f3f3f3;
}

.responsive .dd-nav .dd-menu-btn 
{
   display: inline-block;
}

.responsive .dd-nav .dd-hmenu.visible 
{
   display: block;
}

.responsive .dd-nav ul.dd-hmenu>li>ul>li:first-child:after 
{
   display: none;
}
.responsive .dd-nav ul.dd-hmenu ul a
{
   padding-left: 4% !important;
}
.responsive .dd-nav ul.dd-hmenu ul ul a
{
   padding-left: 6% !important;
}
.responsive .dd-nav ul.dd-hmenu ul ul ul a
{
   padding-left: 8% !important;
}
.responsive .dd-nav ul.dd-hmenu ul ul ul ul a
{
   padding-left: 10% !important;
}
.responsive .dd-nav ul.dd-hmenu ul ul ul ul ul a
{
   padding-left: 12% !important;
}
  
.responsive .dd-nav ul.dd-hmenu>li>ul
{
   padding: 4px;
}
  
.responsive .dd-nav ul.dd-hmenu>li>ul:before
{
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}

.responsive .dd-sheet
{
   width: auto !important;
   min-width: 240px !important;
   max-width: none !important;
   margin-right: 1% !important;
   margin-left: 1% !important;
   margin-top: 1% !important;
}

#dd-resp {
   display: none;
}

@media all and (max-width: 768px)
{
    #dd-resp, #dd-resp-t { display: block; }
    #dd-resp-m { display: none; }
}

@media all and (max-width: 480px)
{
    #dd-resp, #dd-resp-m { display: block; }
    #dd-resp-t { display: none; }
}

#dd-resp-desktop {
   display: none;
}
#dd-resp-tablet-landscape {
   display: none;
}
#dd-resp-tablet-portrait {
   display: none;
}
#dd-resp-phone-landscape {
   display: none;
}
#dd-resp-phone-portrait {
   display: none;
}

@media (min-width: 1200px)
{
    #dd-resp-desktop { display: block; }
}

@media (min-width: 980px) and (max-width: 1199px)
{
    #dd-resp-tablet-landscape { display: block; }
}

@media (min-width: 768px) and (max-width: 979px)
{
    #dd-resp-tablet-portrait { display: block; }
}

@media (min-width: 480px) and (max-width: 767px)
{
    #dd-resp-phone-landscape { display: block; }
}

@media (max-width: 479px)
{
    #dd-resp-phone-portrait { display: block; }
}
.responsive .dd-content-layout, 
.responsive .dd-content-layout-row, 
.responsive .dd-layout-cell 
{
   display: block;
}

.responsive .dd-layout-cell 
{
   width: auto !important;
   height: auto !important;
}

.responsive .dd-content-layout:after, 
.responsive .dd-content-layout-row:after, 
.responsive .dd-layout-cell:after 
{
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
}

.responsive .dd-post
{
   border-radius: 0;
}

.responsive .dd-footer-inner
{
   min-width: 0;
}
.responsive .dd-footer
{
   margin-top: 1%;
}

.responsive .responsive-tablet-layout-cell 
{
   width: 50% !important;
   float: left;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

.responsive .responsive-layout-row-3 .responsive-tablet-layout-cell 
{
   width: 33.33% !important;
}

.responsive.responsive-tablet .items-row .item ,
.responsive.responsive-phone .items-row .item 
{
    width: auto;
    display: block;
}








KÖSZÖNÖM
[/b]
Mellékletek:
Utolsó szerkesztés: 2014 dec. 13 08:10 Írta: kocsislaci.

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
2014 dec. 13 15:42 - 2014 dec. 13 18:33 #2 Írta: Zotius
Zotius válaszolt a témára: DD Garden 40 téma responsive (mobil) megjelenítés szerkesztése
Néhány tipp a méretcsökkentéshez, fontossági sorrendben:
1.) A site háttere az 1920×1080 px méretű hatter.png kép, ami már önmagában is 2,6 MB méretű (ugyanez jpg-ben csak 349 kByte). Gyakorlatilag ez csak a full HD képernyőkön jelenik meg, a lap tartalma mellett bal- és jobb oldalon. A responsive megjelenítésénél semmi haszna, mivel nem látható, a responsive verzióból ki lehetne venni.
2.) A nivo-sliderben pörgetett képek számát és méretét is lehetne talán csökkenteni. Jelenleg, ha jól látom, 5 képet cserélgetsz benne.
varda.png409,3 kByte
u17nagy.jpg144,1 kByte
130.jpg297,9 kByte
sli.png286,3 kByte
csapat.jpg441,1 kByte
összesen:1578,7 kByte
A képek mérete összesen 1,55 MB. Az oldal megtekintésekor ezek mind betöltődnek, még akkor is, ha egyszerre csak egy kép látható.
Ha mindenáron ragaszkodsz hozzá, akkor lehetőleg jpg formátumot használj, nagyobb tömörítési faktorral, még ha a minősége kissé romlik is ezáltal. Png itt nem kell, mivel itt nincs szükséged áttetsző háttérre.
3.) A kupa eredményeket excel táblázatból készített képekkel jeleníted meg. Ezeknél is célszerűbb lenne valami html-alapú táblázattal megoldani a megjelenítést, így ezek is sokkal kisebb méretűek lennének.
Szóval, összességében a képek kapásból összesen 2,6 + 1,55 = 4,15 MB forgalmat generálnak, nem beszélve az oldal további tartalmairól. Ez pedig máris az általad írt 20 megás forgalom ötödrésze...
4.) Igaz, hogy a nivo slider 600×800 portrait formátum felett jelenik csak meg, de mire a böngésző "eldönti" a képernyő méret alapján, h betöltse-e vagy sem, az is időbe telik, lassítva ezzel a megjelenítést.
5.) A "Kisvárda Master Good" felirat egy képen van a melette balra lévő logóval. Jelenleg a szöveg kilóg jobb oldalon. Esetleg, ha ezek külön képek lennének, akkor responsive módban betördelhetők lennének egymás alá a kisebb képernyőkön is.

A modulok elhelyezésére nincs tippem, esetleg próbáld meg az elrendezést a jelenlegi sidebar1|content|sidebar2 osztás helyett content|sidebar1|sidebar2 sorrenddel (mindkét oldaloszlopot jobbra téve). Responsive rendereléskor a jobbra lévő oszlopok a content alá kerülnek, s talán jobban élvezhető lesz kisebb képernyőkön is.

Ha hasznos volt a hozzászólásom számodra, nyugodtan megnyomhatod lent a „Köszönet” gombot :)
Skype: zotius
Utolsó szerkesztés: 2014 dec. 13 18:33 Írta: Zotius. Indoklás: kiegészítés

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
2014 dec. 13 18:54 #3 Írta: kocsislaci
kocsislaci válaszolt a témára: DD Garden 40 téma responsive (mobil) megjelenítés szerkesztése
Üdv!

1.) A háttérkép jelenleg mobil nézetben nem jelenik meg, ez maximum a webes nézetet lassítja, de köszönöm megnézem, hogyan lehetne kicsit kiesebbre venni a méretét.
2.) Teljességgel igazad van. JPG formában is tökéletesek lesznek a képek, itt is lehet pár megát spórolni.
3.) Húú ezt sürgősen kellett felrakni, de hó végén lesz egy torna ott már rendesen táblázatba szeretném felvinni az adatokat.
4.) Ide mit javasolsz egyébként?
5.) Ez külön menüből állítható így valószínűleg bele kell nyúlni a css fájlba.... bár nem tudom a "menüs" beállítás milyen hatással lesz rá. Itt nem lehet a template.responsive.css fájlban megadni neki, hogy ne az eredeti logót vegye át hanem egy belinkeltet?

Modulok: Lényegében nagy segítség lenne ha egyszerűen nem jelennének meg mobil nézetben a modulok. Első lépésnek legalább is jó lenne, de akár hogy módosítom a template.responsive.css fájlt nem akarja kivenni.......

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
2014 dec. 13 19:17 - 2014 dec. 13 19:20 #4 Írta: Zotius
Zotius válaszolt a témára: DD Garden 40 téma responsive (mobil) megjelenítés szerkesztése
4.)-hez:
Én a helyedben ezt a nivo slidert teljesen kidobnám. Elég lenne egy statikus kép egy modulba a Csapatról, a másik képen látható szöveget (téli teremfoci kupa), meg más hasonló híreket akár egy news scrollerben is ki lehet iratni, mondjuk a breadcrumb pozícióban.
5.)-höz: ezt körültekintően át kell nézni a sablonban. Magának a képnek a szétvágása nem nagy kunszt, csak a behelyezése.

... és még pár dolog:
6.) Szerintem a Facebook két helyen való megjelenítése (headerben az 'f' betű és sidebar1-ben a Facebook LikeBox) is felesleges. A headerből szerintem nyugodtan kiveheted, responsive elrendezésnél úgysem látszik. Van még ennél "karcsúbb" megoldás is, ami szintén byte-takarékos. :)
7.) Kipróbáltam a szavazást, én is szavaztam. :D Ekkor derült ki, hogy külső szavazógépet használsz, ami ráadásul nem jól kódolja a magyar szövegeket (szinte olvashatatlan). Érdemesebb lenne egy Joomla bővítényt használni e célra (a poll-maker.com-mal való kommunikáció is bájtokat emészt fel!).

Ha hasznos volt a hozzászólásom számodra, nyugodtan megnyomhatod lent a „Köszönet” gombot :)
Skype: zotius
Utolsó szerkesztés: 2014 dec. 13 19:20 Írta: Zotius.

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
2014 dec. 13 19:26 #5 Írta: kocsislaci
kocsislaci válaszolt a témára: DD Garden 40 téma responsive (mobil) megjelenítés szerkesztése
Hali!
4.) Meglátjuk ezt el is mentem, ha odaérek ez is megvalósításra kerül....
5.) Pont ettől félek..... ha valamit kihagyok akkor szétesik az oldal... már tesztelgettem.... de feladni nem adom..

6.) Facebook "F" betüs megoldás a sablon része... de egy katt kivenni nem gond....
7.) Szavazás húúú hallod tudod mit szívok ezzel ..... valami nagyon ütközik az oldalon ugyanis szinte egyik szavazó bővítmény se akar működni... megjelenni megjelenik de semmi... sexy poll se... valószínűleg jquery ütközés, de az oldalon ajánlott szűrő bővítmény sem segített eddig.....

Arra esetleg, hogy "egyszerűen kivehetőek" e a modulok a mobil megjelenítésből van ötleted?

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
2014 dec. 13 19:36 #6 Írta: Zotius
Zotius válaszolt a témára: DD Garden 40 téma responsive (mobil) megjelenítés szerkesztése
Ezt már próbáltad? http://www.joomace.net/joomla-extensions/acepolls-joomla-polls-component
Modul kivételére nincs jobb ötletem. Az az igazság, hogy ezt a DD Garden sablont a tervezője (Diablo Design) Artisteer-rel csinálta. Ez az oka az egésznek. A Gantry keretrendszer és a RocketTheme sokkal perfektebb módon kezeli ezeket a modul-dolgokat...

Ha hasznos volt a hozzászólásom számodra, nyugodtan megnyomhatod lent a „Köszönet” gombot :)
Skype: zotius

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
2014 dec. 13 19:46 #7 Írta: kocsislaci
kocsislaci válaszolt a témára: DD Garden 40 téma responsive (mobil) megjelenítés szerkesztése
A szavazást próbálom már is! Köszönöm!

Pont azon gondolkoztam hogy úgy is fent van a Gantry ...... Lehetséges lenne hozzávetőleg hasonlóan megszerkeszteni mint most az oldal a kinézetet?

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
2014 dec. 13 19:55 - 2014 dec. 13 19:57 #8 Írta: Zotius
Zotius válaszolt a témára: DD Garden 40 téma responsive (mobil) megjelenítés szerkesztése
Óóóóóóóóóó! Ha fent van a Gantry, feleslegesen küszködsz ezzel a DD Garden sablonnal... :(
Igaz, Jócskán bele kell nyúlnod az alap sablonba, de egyáltalán nem előírás, hogy pont úgy kell kinéznie, mint ennek a mostaninak.
A RocketTheme -nél most a 10 éves születésnapjuk alkalmából 30% kedvezményt adnak... :D

Ha hasznos volt a hozzászólásom számodra, nyugodtan megnyomhatod lent a „Köszönet” gombot :)
Skype: zotius
Utolsó szerkesztés: 2014 dec. 13 19:57 Írta: Zotius.

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
2014 dec. 13 20:03 - 2014 dec. 13 20:28 #9 Írta: Zotius
Zotius válaszolt a témára: DD Garden 40 téma responsive (mobil) megjelenítés szerkesztése
Sablon javaslatom: Ionosphere (Vess rá egy pillantást!)

Innen letöltheted. ;)

És ami számodra a legfontosabb a problémád miatt, erre ezt írják e sablonnál:
"Note: If no modules are assigned to the Sidebar positions, the Mainbody will become full width."
Azaz: Ha nincsenek modulok a Sidebar pozíciókban, a Mainbody teljes szélességű lesz.

Ha hasznos volt a hozzászólásom számodra, nyugodtan megnyomhatod lent a „Köszönet” gombot :)
Skype: zotius
Mellékletek:
Utolsó szerkesztés: 2014 dec. 13 20:28 Írta: Zotius.

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
2014 dec. 13 20:40 #10 Írta: kocsislaci
kocsislaci válaszolt a témára: DD Garden 40 téma responsive (mobil) megjelenítés szerkesztése
Marad a Gantry ugyanis egyelőre "ingyen" készítem az oldalt..... csinálok egy aldomaint és próbálgatom ott hogy mit tudok kihozni belőle!

Tudom relatíve nem nagy összeg egy sablon, de saját pénzből nem tudok áldozni rá.

Köszönöm az eddigieket!

Jelentkezz be, hogy te is részt vehess beszélgetésben!