Adaptieve lay-out verandert het pagina-ontwerp afhankelijk van gebruikersgedrag, platform, schermgrootte en apparaatoriëntatie en is een integraal onderdeel van moderne webontwikkeling. Hiermee kunt u aanzienlijk besparen en hoeft u niet voor elke resolutie een nieuw ontwerp te tekenen, maar wijzigt u de grootte en locatie van afzonderlijke elementen.

In dit artikel worden de belangrijkste elementen van de site besproken en hoe u deze kunt aanpassen.

Schermresolutie aanpassen

In principe kun je apparaten in verschillende categorieën verdelen en voor elk afzonderlijk ontwerpen, maar dit zal te veel tijd kosten, en wie weet wat de normen over vijf jaar zullen zijn? Bovendien hebben we volgens de statistieken een hele reeks verschillende resoluties:

Het wordt duidelijk dat we niet voor elk apparaat afzonderlijk kunnen blijven ontwerpen. Maar wat moet je dan doen?

Deeloplossing: maak alles flexibel

Dit is natuurlijk geen perfecte methode, maar het elimineert de meeste problemen.

Ethan Marcotte heeft een eenvoudige sjabloon gemaakt die het gebruik van een responsieve lay-out demonstreert:

Op het eerste gezicht lijkt het misschien dat alles gemakkelijk is, maar dat is het niet. Kijk eens naar het logo:

Als u de hele afbeelding verkleint, worden de inscripties onleesbaar. Om het logo op te slaan, is de afbeelding daarom in twee delen verdeeld: het eerste deel (illustratie) wordt als achtergrond gebruikt, het tweede (logo) verandert proportioneel van grootte.

Het h1-element bevat een afbeelding als achtergrond en de afbeelding is uitgelijnd met de achtergrond van de container (header).

Flexibele afbeeldingen

Het werken met afbeeldingen is een van de belangrijkste problemen bij het werken met responsive design. Er zijn veel manieren om het formaat van afbeeldingen te wijzigen, en de meeste zijn vrij eenvoudig te implementeren. Eén oplossing is om max-width in CSS te gebruiken:

Img (max-breedte: 100%;)

De maximale breedte van een afbeelding is 100% van de breedte van het scherm of browservenster, dus hoe kleiner de breedte, hoe kleiner de afbeelding. Houd er rekening mee dat max-with niet wordt ondersteund in IE, dus gebruik width: 100% .

De gepresenteerde methode is een goede optie voor het maken van adaptieve afbeeldingen, maar door alleen de grootte te wijzigen, laten we het gewicht van de afbeelding hetzelfde, wat de laadtijd op mobiele apparaten zal verlengen.

Een andere manier: responsieve afbeeldingen

De techniek, geïntroduceerd door Filament Group, past niet alleen het formaat van afbeeldingen aan, maar comprimeert ook de resolutie van afbeeldingen op kleine schermen om het laden te versnellen.

Voor deze techniek zijn verschillende bestanden vereist die beschikbaar zijn op Github. Eerst nemen we het JavaScript-bestand ( rwd-images.js), bestand .htaccess En rwd.gif(afbeeldingsbestand). Vervolgens gebruiken we wat HTML om grote en kleine resoluties te associëren: eerst een kleine afbeelding met een voorvoegsel .R(om aan te geven dat de afbeelding responsief moet zijn), link dan naar de grote afbeelding met behulp van data-fullsrc:

Voor elk scherm breder dan 480 px wordt een afbeelding met een hogere resolutie geladen ( largeRes.jpg), en op kleine schermen wordt het geladen ( smallRes.jpg).

De iPhone en iPod Touch hebben een functie: een ontwerp dat voor grote schermen is gemaakt, wordt eenvoudigweg kleiner in een browser met lage resolutie, zonder te scrollen of extra mobiele lay-out. Afbeeldingen en tekst zijn echter niet zichtbaar:

Om dit probleem op te lossen, gebruikt u de metatag:

Als de initiële schaal gelijk is aan één, wordt de breedte van de afbeeldingen gelijk aan de breedte van het scherm.

Aanpasbare pagina-indelingsstructuur

Bij aanzienlijke wijzigingen in het paginaformaat moet u mogelijk de algehele rangschikking van de elementen wijzigen. Dit kan gemakkelijk worden gedaan via een afzonderlijk stijlenbestand of, efficiënter, via een CSS-mediaquery. Er zouden geen problemen moeten zijn, aangezien de meeste stijlen hetzelfde blijven en slechts een paar zullen veranderen.

U hebt bijvoorbeeld een hoofdstijlbestand dat #wrapper , #content , #sidebar , #nav specificeert, samen met kleuren, achtergrond en lettertypen. Als uw hoofdstijlen uw lay-out te smal, kort, breed of hoog maken, kunt u dat identificeren en nieuwe stijlen toevoegen.

stijl.css (hoofd):

/* Basisstijlen die worden overgenomen door het onderliggende stijlblad */ html,body( achtergrond... lettertype... kleur... ) h1,h2,h3() p, blockquote, pre, code, ol, ul () /* Structurele elementen */ #wrapper( breedte: 80%; marge: 0 auto; achtergrond: #fff; opvulling: 20px; ) #content( breedte: 54%; float: links; marge-rechts: 3%; ) # zijbalk-links( breedte: 20%; zwevend: links; marge-rechts: 3%; ) #zijbalk-rechts( breedte: 20%; zwevend: links; )

mobiel.css (kind):

#wrapper( breedte: 90%; ) #content( breedte: 100%; ) #sidebar-left( breedte: 100%; clear: beide; /* Extra stijlen voor het nieuwe ontwerp */ border-top: 1px solid #ccc ; margin-top: 20px; ) #sidebar-right( breedte: 100%; clear: beide; /* Extra stijl voor onze nieuwe lay-out */ border-top: 1px solid #ccc; margin-top: 20px; )

Op een breedbeeldscherm passen de linker- en rechterzijbalk mooi aan de zijkant. Op smallere schermen zijn deze blokken voor meer gemak onder elkaar geplaatst.

CSS3-mediaquery's

Laten we eens kijken hoe u CSS3-mediaquery's kunt gebruiken om responsieve ontwerpen te maken. min-with specificeert de minimale breedte van het browservenster of scherm waarop bepaalde stijlen worden toegepast. Als een waarde lager is dan min-width , worden de stijlen genegeerd. max-width doet het tegenovergestelde.

@mediascherm en (min-breedte: 600px) ( .hereIsMyClass ( breedte: 30%; zwevend: rechts; ) )

De mediaquery werkt alleen als de minimale breedte groter is dan of gelijk is aan 600 px.

@mediascherm en (max. breedte: 600px) ( .aClassforSmallScreens ( duidelijk: beide; lettergrootte: 1.3em; ) )

In dit geval is de klasse ( aKlasse voor kleine schermen) werkt als de schermbreedte kleiner dan of gelijk is aan 600 px.

Hoewel de minimale en maximale breedte van toepassing kunnen zijn op zowel de schermbreedte als de breedte van het browservenster, hoeven we mogelijk alleen met de apparaatbreedte te werken. Om bijvoorbeeld browsers te negeren die in een klein venster zijn geopend. Hiervoor kunt u min-device-width en max-device-width gebruiken:

@mediascherm en (max. apparaatbreedte: 480px) ( .classForiPhoneDisplay ( lettergrootte: 1.2em; ) ) @mediascherm en (min. apparaatbreedte: 768px) ( .minimumiPadWidth ( clear: beide; marge-onder : 2px effen #ccc;

Vooral voor iPad hebben mediaquery's de eigenschap oriëntatie, waarvan de waarden beide kunnen zijn landschap(horizontaal), of portret(verticaal):

@mediascherm en (oriëntatie: liggend) ( .iPadLandscape ( breedte: 30%; zwevend: rechts; ) ) @mediascherm en (oriëntatie: staand) ( .iPadPortrait ( helder: beide; ) )

U kunt ook mediaquerywaarden combineren:

@media scherm en (min-breedte: 800px) en (max-breedte: 1200px) ( .classForaMediumScreen ( achtergrond: #cc0000; breedte: 30%; zwevend: rechts; ) )

Deze code wordt alleen uitgevoerd voor schermen of browservensters tussen 800 en 1200 px breed.

U kunt als volgt een specifiek blad met stijlen voor verschillende mediaquerywaarden laden:

JavaScript

Als uw browser geen CSS3-mediaquery's ondersteunt, kan stijlvervanging worden uitgevoerd met behulp van jQuery:

$(document).ready(function())( $(window).bind("resize", resizeWindow); function resizeWindow(e)( var newWindowWidth = $(window).width(); // Als de breedte gelijk is minder dan 600 px, wordt een mobiel stylesheet gebruikt if(newWindowWidth< 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth >600)( // Als de breedte groter is dan 600 px, wordt het bureaubladstylesheet gebruikt $("link").attr((href: "style.css")); ) ) ));

Optionele inhoudsweergave

De mogelijkheid om elementen te verkleinen en opnieuw in te delen zodat ze op kleine schermen passen, is geweldig. Maar dit is niet de beste optie. Mobiele apparaten hebben doorgaans een bredere reeks wijzigingen: vereenvoudigde navigatie, meer gerichte inhoud, lijsten of rijen in plaats van kolommen.

Gelukkig geeft CSS ons de mogelijkheid om inhoud met ongelooflijk gemak weer te geven en te verbergen.

Weergave: geen;

weergave: geen wordt gebruikt voor objecten die verborgen moeten worden.

Dit is onze opmaak:

Inhoud linkerzijbalk | Inhoud rechterzijbalk

Hoofdinhoud Een linkerzijbalk Een rechterzijbalk

stijl.css (hoofd):

#content( breedte: 54%; zwevend: links; marge-rechts: 3%; ) #zijbalk-links( breedte: 20%; zwevend: links; marge-rechts: 3%; ) #zijbalk-rechts( breedte: 20 %; zwevend: links; .sidebar-nav(weergave: geen; )

mobiel.css (vereenvoudigd):

#content( breedte: 100%; ) #sidebar-left( weergave: geen; ) #sidebar-right( weergave: geen; ) .sidebar-nav( weergave: inline; )

Als de schermgrootte wordt verkleind, kunt u bijvoorbeeld een script of een alternatief stijlbestand gebruiken om de witruimte te vergroten of de navigatie te vervangen voor meer gemak. Doordat u de mogelijkheid heeft om elementen te verbergen en weer te geven, de grootte van afbeeldingen, elementen en nog veel meer te wijzigen, kunt u het ontwerp aanpassen aan elk apparaat en scherm.

Hoe Yandex uw gegevens en machine learning gebruikt om services te personaliseren -.

Op dit moment is ongeveer 11-12% van de 100.000 meest bezochte sites responsive, en er bestaat geen twijfel over dat dit aantal de komende jaren zal toenemen.

Nu steeds meer organisaties de handen uit de mouwen steken om de realiteit van het internet op meerdere apparaten te omarmen, is het de moeite waard om eens te kijken naar de verschillende strategieën die worden gebruikt om dat nirvana te bereiken:

Adaptieve modernisering

Responsief herontwerp is het proces waarbij een bestaande desktop-only website wordt overgenomen en in wezen 'responsief wordt verbouwd'.

Als het gaat om kant-en-klare sites (vooral commerciële sites), hebben teams niet altijd de mogelijkheid om alles weg te gooien en opnieuw te bouwen.
Dan Cederholm

Voor de meeste organisaties wordt het op grote schaal creëren van een nieuw ontwerp vanuit het niets niet eens overwogen. Dit is de reden waarom responsieve modernisering een populaire aanpak is om een ​​goede ervaring voor mobiele apparaten te creëren.

Voordelen

• Relatief snel.
  Er zijn nogal wat manieren om responsieve modernisering uit te voeren. Deze strategie zou het toevoegen van een small-screens.css-bestand aan de site kunnen zijn. Ondanks dit nogal grove voorbeeld is adaptieve modernisering voor een groot aantal organisaties een aantrekkelijke optie, omdat het niet nodig is dat alles vanaf nul opnieuw opgebouwd moet worden.
• Bekend.
  Brengt gebruikers niet in verwarring. Mensen hebben jarenlang aan de interface moeten wennen, en door de bestaande te moderniseren behouden organisaties een vertrouwde aanpak en verbeteren ze tegelijkertijd de levens van mensen met mobiele apparaten.
• Organisatorisch sneller.
  Politiek gezien is het moderniseren van de interface veiliger dan helemaal opnieuw beginnen. Er zal minder discussie zijn over welke kleur groen we moeten kiezen, welke triviale stockfoto's we moeten gebruiken, en het management zal de armen niet hoeven te draaien. Hierdoor kunnen teams sneller responsieve sites lanceren.

Gebreken

• Heeft slechts invloed op een klein deel.
  Nogmaals, er zijn veel opties om een ​​verbouwing uit te voeren, maar het doel van de meeste daarvan is om ‘het mooi te maken’. Door zich te concentreren op het opnieuw ontwerpen van de lay-out, missen herontwerpen vaak de talloze andere factoren waarmee rekening moet worden gehouden bij het maken van een succesvol ontwerp voor een verscheidenheid aan apparaten.
• 10 liter water in een pot van drie liter.
  Omdat desktopsites alleen voor desktopcomputers zijn ontworpen (en vaak lang meegaan), kunnen ze veel rommel bevatten. En aangezien modernisering vooral bestaat uit het opnieuw smelten van de lay-out, wordt met de meeste inhoudelijke problemen niet volledig rekening gehouden.
• Prestatie.
  Er is iets vreemds aan het schrijven van code om kleine apparaten beter te ondersteunen. Het verwijderen van onnodige spullen kan te ver gaan, maar zonder focus op productiviteit zal het niet vanzelf groeien.
• Slechtste ondersteuning.
  Mediaquery's, oorspronkelijk ontworpen voor desktopcomputers, worden op de meeste mobiele apparaten slecht ondersteund.
• Tijdelijke oplossingen.
  Ik heb het gevoel dat ik doodga als ik mensen hoor die mij vragen om iets ‘responsive’ te maken, alsof het slechts een selectievakje in het projectplan is (wat het soms ook is). Dit soort beperkt denken mist de echte kansen die responsive design biedt.

Responsieve mobiele sites

Responsieve mobiele websites, of zoals ik ze ‘zaadjes voor een responsieve toekomst’ noem, zijn de praktijk waarbij een afzonderlijke website in het ‘m.uwdomein.ru’-formaat wordt gemaakt met behulp van responsieve ontwerptechnieken. Sites als The BBC, The Guardian en Entertainment Weekly (waar ik aan heb gewerkt) gebruiken deze strategie.

De mobiele versie geeft u de mogelijkheid om een ​​zaadje te planten dat zal groeien vanuit uw oude website.

Na verloop van tijd kan een verouderde site worden verwijderd en zal de site evolueren van mobile-first, responsief en rekening houdend met toekomstige trends.

Voordelen

• Lager risico.
  De meeste organisaties beschouwen verkeer van mobiele apparaten nog steeds als een minderheid. Door een mobiel responsieve website te lanceren, kunnen deze organisaties de wateren testen zonder eerst op het onderwerp in te gaan.
• Een kans om flexibel te leren zijn.
  Ontwerpers kunnen leren flexibeler te denken. Ontwikkelaars zullen de talloze trucs van Android-apparaten leren. Managers kunnen erachter komen hoe ze afstand kunnen nemen van pixelperfectie. Een responsieve mobiele site kan een geweldige leeromgeving zijn.
• Infrastructuur.
  Teams kunnen leren hoe ze contentmanagementproblemen, zoals het maken van afbeeldingen, voor eens en voor altijd kunnen oplossen
• Overtollig verwijderen.
  Deze aanpak biedt teams een geweldige kans om zich af te vragen “hebben we dit echt nodig” en zich tegelijkertijd op de prestaties te concentreren. Waarom? Omdat hun primaire focus ligt op het verbeteren van de gebruikerservaring van hun site op mobiele apparaten.
• De toekomst is mobile-first websites.
  Hoewel ze aanvankelijk weinig inhoud of functionaliteit hebben, kunnen deze mobiele sites met voldoende tijd en moeite uiteindelijk hun voorouders die een volledige pagina beslaan, vervangen.

Gebreken

• Het is nog steeds een mobiele site.
  Of deze nu responsief is of niet, deze aanpak heeft nog steeds een groot aantal nadelen van mobiele sites: problemen met URL-omleiding, inhoudsbeheer, consistente inhoud, consistentie, SEO-optimalisatie en andere.
• Tijdelijke oplossingen.
  Veel mobiele sites zijn gemaakt als pleister - om het bloeden te stoppen. Dergelijke sites zijn gemaakt met als doel het groeiende verkeer afkomstig van mobiele apparaten te ontlasten. Deze oplossingen voldoen misschien nog steeds aan bestaande behoeften, maar gezien toekomstige trends is het onwaarschijnlijk dat ze u op de lange termijn zullen redden.
• Kans op verdorren aan de wijnstok.
  Sommige organisaties starten dergelijke projecten, zijn halverwege en laten het geheel achterwege totdat de begroting voor het volgende jaar is aangenomen.
• Ontwerp voor kleine schermen.
  Omdat de initiële focus op kleine schermen ligt, kan het later een uitdaging zijn om de interface over te zetten naar grotere schermen zonder kwaliteitsverlies.

Responsief ontwerp voor mobiele apparaten

"Hermitage" is niet alleen een moderne interface voor websitebeheer - het is een concept dat interface-oplossingen combineert met een "pakket" met aanbevelingen voor webontwikkelaars. “Hermitage” is een set regels waarmee u een snel, veilig, handig en gemakkelijk te beheren webproject kunt maken.

JavaScript is uitgeschakeld in uw browser

“Wij werken al jaren aan de productinterface en proberen deze eenvoudig en handig te maken voor gebruikers bij het dagelijkse beheer van de site. We houden ook rekening met de belangen van webontwikkelaars, die voor de moeilijke taak staan ​​om snel functionele websites met een grote verscheidenheid aan ontwerpen te creëren.

En hoe graag we ook hopen, elke klant wil zijn eigen, individuele vormgeving en structuur van de site. En natuurlijk wil iedereen dat de site snel wordt geopend en veel verkeer kan verwerken. Door deze problemen stap voor stap op te lossen, ontwikkelden we een concept dat technologieën en interface-oplossingen combineert, en noemden het “1C-Bitrix: Hermitage”

"Hermitage" is: Herontwerp van de “kap” - Re:Hermitage
De interface van het administratieve deel van het product is stijlvol en expressief, maar het allerbelangrijkste: het is op het eerste gezicht begrijpelijk en vereist geen training. Het werken met het “adminpanel” is prettig en gemakkelijk. Het ontwerp is aangepast om te werken met touchscreen-interfaces van mobiele apparaten - smartphones en tablets.

Ontwerp van administratieve secties

Het ontwerpconcept is ontwikkeld door AIC. De slimme interface is esthetisch aantrekkelijk en roept bij de eerste blik op het “adminpanel” meteen aangename emoties op. Zelfs met een snelle kennismaking met het “beheerderspaneel” kunt u snel de belangrijkste bedieningselementen identificeren, de werking ervan begrijpen en de trainingstijd aanzienlijk verkorten.

Controle

Interface-concept voor websitebeheer Informatiebeheer is een dagelijks werk en wij doen er alles aan om dit werk leuk te maken! Elke nieuwe versie van het product onderneemt stappen om het Configuratiescherm te ontwikkelen. Hierbij wordt rekening gehouden met de ervaring met het gebruik van dit paneel door zowel ontwikkelaars als klanten van 1C-Bitrix. Als gevolg hiervan is het configuratiescherm verbeterd: het krijgt niet alleen een nieuw uiterlijk, maar ook nieuwe mogelijkheden.

Het paneel bevat twee bladwijzers, waartussen u eenvoudig kunt schakelen en de inhoud kunt beheren precies daar waar u deze nodig heeft. Het Configuratiescherm en beide modi zijn uiteraard alleen beschikbaar voor geregistreerde gebruikers en verschijnen onmiddellijk zodra u zich aanmeldt op de site.

Configuratiescherm van de site. Interface "Hermitage"

Sitebeheer is verdeeld in twee hoofdmodi:

Werkmodus “Boven de site”

"Hermitage" omvat qua beheer de volgende functies:
Functionaliteit van het Configuratiescherm in het kader van het 1C-Bitrix: Hermitage-concept Houd er rekening mee dat de functionaliteit van het Configuratiescherm afhankelijk is van de rechten die aan u als sitegebruiker zijn verleend. Maar u kunt overal op de site en in elke modus van het Configuratiescherm naar de sectie Beheer gaan. Bewerkingsmodus Door op de knop Bewerkingsmodus te klikken, schakelt u over naar de bewerkingsmodus. En wat vooral moet worden opgemerkt, is dat u de opname van deze modus zowel met als zonder herladen van de pagina kunt configureren.

Beheer alle elementen en componenten op openbare pagina's! De bewerkingsmodus omvat immers niet alleen de mogelijkheid om de huidige pagina of elementen van informatieblokken, zoals nieuws of producten in de catalogus, te wijzigen. In de bewerkingsmodus kunt u net zo gemakkelijk – direct “boven de site” – de componenten beheren die zijn opgenomen in de sitesjabloon en in het hoofdwerkgebied van een specifieke pagina.

verschijnt wanneer de muis eroverheen gaat. Dit menu kan worden verplaatst, vastgezet of verticaal of horizontaal worden weergegeven. De adaptieve interface van het systeem onthoudt het gewijzigde uiterlijk van het contextmenu voor dit onderdeel, deze pagina, deze gebruiker en zal het de volgende keer in precies dezelfde vorm en op dezelfde plaats openen.

Componentgegevens rechtstreeks vanuit het openbare gedeelte van de site toevoegen, bewerken en verwijderen. Voor deze acties is het absoluut niet nodig om naar het Administratieve gedeelte te gaan. U kunt alle elementen in de lijst bewerken of verwijderen met behulp van de knoppen die verschijnen wanneer u met uw muis over deze elementen beweegt.

U hoeft niet bang te zijn dat u iets verkeerd doet op de pagina, omdat u altijd de mogelijkheid heeft om de laatste actie ongedaan te maken. Deze implementatie van de winkelwagenfunctionaliteit op uw site omvat alle bewerkingen op de inhoud ervan. Na het toevoegen en eventueel wijzigen van de pagina annuleert u eenvoudig uw laatste actie. Geminimaliseerde modus De geminimaliseerde bedieningsmodus is handig voor degenen die al weten hoe ze met het systeem moeten werken. Minimaliseer eenvoudigweg het Configuratiescherm om schermruimte vrij te maken. Tegelijkertijd behoudt zelfs een geminimaliseerd paneel de beheerfuncties!

U kunt met Menu werken, het product bijwerken, de bewerkingsmodus in- of uitschakelen, de cache opnieuw instellen of naar de beheermodus gaan. Kortom: het gevouwen paneel blijft functioneel! Overigens kunt u het paneel samenvouwen en weer uitvouwen met de gebruikelijke dubbelklik.

Beheer Het administratieve gedeelte van het product is ontworpen voor een volledig beheer van het gehele internetproject. De desktop in het administratieve gedeelte is individueel aanpasbaar, uitgerust met gadgets en uitgerust met een menuzoeksysteem. U kunt in het product zoveel “Desktops” maken als u wilt.

Ontwikkelaars kunnen hun eigen gadgets maken en deze vervolgens aan hun bureaublad toevoegen. U kunt bijvoorbeeld gadgets gebruiken om lijsten met recente bestellingen, bedrijfsnieuws, verzamelingen documenten, enz. weer te geven. “Live zoeken” werkt rechtstreeks vanaf het “Bureaublad” in het beheerdersmenu. Zoeken brengt u direct naar het gewenste menu-item. En het maakt niet uit hoeveel secties en subtakken het menu bevat.

Transliteratie

U hoeft zich geen zorgen te maken over welke bestandsnaam u aan een pagina moet toewijzen! En je hebt geen vertaalprogramma's nodig om de naam in het Engels te vertalen. Maak gewoon een pagina aan en stel de titel in - u krijgt automatisch de bestandsnaam.

De wizard voor het maken van pagina's translitereert en vertaalt automatisch de paginatitel en stelt deze voor als de documentbestandsnaam voor een betere zoekmachineoptimalisatie. Toegang tot de pagina Een nieuwe pagina op de site mag niet meteen aan de wereld worden getoond. Eerst moet u het controleren en bespreken met collega's, en vervolgens goedkeuren door het management. Publiceer het niet. Wanneer u het maakt, vinkt u gewoon het vakje 'Toegang tot pagina beperken' aan. Specificeer de gebruikersgroepen aan wie u het wilt tonen - selecteer gewoon deze groepen.

De mogelijkheid om onmiddellijk na het aanmaken van een pagina toegangsbeperkingen in te stellen, zal het werk van contentmanagers aanzienlijk vergemakkelijken bij het werken met inhoud die langdurige coördinatie en bewerking vereist.

Interface

Beheer uw website eenvoudig en professioneel!

De Hermitage-productinterface past zich aan uw dagelijkse werk met de site aan, onthoudt uw voorkeuren en zorgt ervoor dat u minder tijd aan technische taken hoeft te besteden. De interface lijkt boven de site te ‘zweven’, waardoor je kunt zien wat je doet en meteen de resultaten kunt zien.

“Beweeg boven de site, voer eenvoudig acties uit, verlies de context van je werk niet en krijg direct zichtbare resultaten. De interface onthoudt uw voorkeuren: lijstinstellingen, filters, invoerformulieren... En de volgende keer zult u minder tijd aan deze actie besteden.

Gebruik de bekende “Menu”-knop om met één klik toegang te krijgen tot alle functies van uw site. Alles is duidelijk voor beginners en handig voor professionals. Je went niet aan de site, maar de site went aan jou, past zich aan jouw gewoonten en taken aan"

Algemeen directeur, 1C-Bitrix, Sergey Ryzhikov

Al jouw energie gaat naar creativiteit, niet naar het zoeken naar een knop!

Het dagelijks beheren van informatie wordt routineuzer en u besteedt uw energie aan creatieve taken in plaats van aan het technisch publiceren van pagina's, secties en menu's.

“Van versie tot versie verschijnt er steeds meer functionaliteit in het product, steeds meer acties in de interface. We hebben veel werk verricht om de productinterface opnieuw te ontwerpen, vooral het gebruikersbedieningspaneel.

De nieuwe adaptieve interface vereenvoudigt het zoeken naar de gewenste actie, groepeert acties op basis van gebruikersrollen en benadrukt de meest voorkomende acties om het werkpaneel niet onoverzichtelijk te maken en het voor de gebruiker gemakkelijker te maken om het te begrijpen.”

• Vadim Dumbravanu, projectmanager bij Bitrix
• Een adaptieve interface is:
• De “Menu”-knop is een vertrouwde en snelle toegang met één klik tot alle functies van uw site. Het is erg handig! Als u bovendien met de knop "Menu" naar "" gaat, wordt de pagina onthouden van waaruit de overgang is gemaakt - dit is niet minder prettig!
• Rolaanpassing - voor zelfverzekerde uitvoering van het dagelijkse werk. Ontwikkelaars hebben toegang tot alle tools voor het ontwikkelen en aanpassen van een website. Site-editors werken alleen met inhoud, zonder angst de technische werkzaamheden van het project te verstoren. Iedereen voert duidelijk zijn taak uit.
• Wizards voor het maken van inhoud helpen u bij het kiezen van bestands- en sectienamen, vullen het sitemenu aan en helpen u bij het invullen van eigenschappen. Complexe dagelijkse handelingen worden eenvoudig. Wij kunnen de inhoud alleen niet voor u schrijven; de master doet de rest voor u.

De adaptieve interface is ontworpen om:

• verlaag de kosten voor het opleiden van nieuwe gebruikers - er is geen training vereist, u heeft alleen tijd nodig om de site aan u te laten wennen. De gewenningsperiode aan de interface bedraagt ​​slechts 1 uur!
• routinetaken omzetten in een creatief proces, energie besteden aan creatieve taken in plaats van aan de technische publicatie van pagina's, secties en menu's;
• de tijd die aan websitebeheer wordt besteed verminderen door dagelijks projectbeheer een gewoonte te maken;
• neem de angst weg van nieuwe gebruikers om “het project kapot te maken” en vermijd de meeste fouten bij het beheren van inhoud.

Het werk aan de administratieve interface van het product gaat door. Gebruikers van 1C-Bitrix: Site Management kunnen alle interface-updates downloaden met behulp van SiteUpdate-technologie. Op de website en in onze nieuwsbrieven blijft u altijd op de hoogte van nieuwe mogelijkheden.

Ingebouwde visuele editor De visuele HTML-editor is al in het product ingebouwd en u hoeft deze niet te installeren. Met deze editor kunt u uw pagina's op de site in realtime wijzigen - rechtstreeks via uw browser. Met de editor kunt u niet alleen gewone tekst bewerken en opmaken, maar ook met visuele componenten werken.

De visuele editor is al ingebouwd in uw website!

Structuurbeheer Alle functies Gebruiksvriendelijke interface Mooi, lichtgewicht, modern!

De visuele editor bevat een lichtgewicht, mooie en ergonomische interface. Dankzij gebruiksvriendelijke editorscripts kunt u gemakkelijk en snel met inhoud werken, bijvoorbeeld door links en afbeeldingen in te voegen.

Wanneer u dus een afbeelding in een pagina invoegt, kunt u onmiddellijk de locatie en het formaat ervan selecteren. Hoe het eruit ziet, zie je meteen in de tekst.

WYSIWYG (uitgesproken als “wee-zee-wig”, uit het Engels. What You See Is What You Get - “what you see is what you get”) is een montagemethode waarbij het gecorrigeerde materiaal tijdens het montageproces er precies hetzelfde uitziet als en het eindresultaat.

Realtime bewerken De editor bevat alle tools die een contentmanager nodig heeft

Plaats componenten op de pagina door ze eenvoudigweg met de muis vanuit een speciaal paneel te slepen en configureer onmiddellijk hun parameters, die nauwkeurig de weergave bepalen van de informatie die dynamisch op uw site verandert.

Visuele editor: componentparameters bewerken

De editor beschikt over uitgebreide hulpmiddelen voor het bewerken van pagina's

Een handig zoekmechanisme helpt u direct het benodigde onderdeel te vinden om op de pagina te plaatsen. Bij het kopiëren van tekst van internet en andere bronnen, bijvoorbeeld Word, wordt de code 'geschoond' van overtollige tags. Bovendien wordt deze geplakte code een geldige en correcte HTML5-code. Tegelijkertijd is het resultaat van het werk van de redacteur altijd hetzelfde - welke browser u ook gebruikt!

Op basis van de resultaten van het verwerken van gebruikerswensen wordt de editor voortdurend verbeterd. Het is handig om er veel bewerkingen in uit te voeren en te werken aan het maken van pagina's en het opmaken van teksten!

Codemarkering en regelnummering

Het is erg handig om pagina's zoals PHP te bewerken, omdat de in het systeem ingebouwde editor de code markeert en de regels nummert. En de pagina's zelf worden "voor onze ogen" in Ajax-stijl opgeslagen - zonder de pagina opnieuw te laden en zonder de focus te verliezen!

Donker editorschema

• syntaxis met nadruk op HTML + PHP + Javascript + SQL;
• de achtergrondverlichting is schakelbaar en u kunt deze uitschakelen zonder de pagina opnieuw te laden;
• 2 kleurenthema's - licht en donker;
• snel naar een regel springen op basis van het nummer;
• Tab/Shift+Tab om tabbladen in te voegen en ongedaan te maken.

Informatiebeheer is een dagelijks werk, wij doen er alles aan om dit werk leuk te maken!

“Split”-modus Verticaal en horizontaal

Nu heeft uw editor twee volwaardige “split”-modi: verticaal en horizontaal. Het is erg handig om in de gecombineerde modus te werken.

U kunt tegelijkertijd de paginacode en de weergave ervan zien. U kunt in elk deel van het venster wijzigingen aanbrengen - de pagina visueel bewerken of de code ervan bewerken.

Splitsen - een venster in twee delen splitsen - visuele bewerking en codebewerking.

Handig zoeken/vervangen Vind een onderdeel in een seconde!

De editor heeft een ingebouwde handige zoek-/vervangfunctie - de droom van elke contentmanager. Nu kunt u bijvoorbeeld direct het gewenste onderdeel vinden en naar de pagina “slepen”. U hoeft niet te onthouden waar het zich in de componentenstructuur bevindt. Dit is vooral waardevol als er een groot aantal componenten wordt gebruikt.

Hetzelfde resultaat in alle browsersGebruik elke browser!

De visuele editor die in het product is ingebouwd, is compatibel met alle populaire browsers. De editor werkt in alle populaire browsers even correct en gebruikt dezelfde functies. U kunt pagina's op de site in elke browser bewerken - het resultaat zal hetzelfde zijn.

“Opschonings”-code bij het invoegen van Clean-code!

De editor zorgt voor het invoegen van tekst uit verschillende bronnen met automatische inhoudopschoning. Bij het kopiëren van tekst uit bijvoorbeeld Word wordt de code omgezet naar HTML5. Alle onnodige – onbeduidende tags – worden uit de code verwijderd.

Voor ontwikkelaars

Webontwikkelaars zullen de implementatie van de functionaliteit van het componentenpaneel en het fragmentpaneel (in één dia) waarderen. Ze krijgen ook de mogelijkheid om aan te passen op JS-niveau en een uitgebreid evenementenmodel.

Geldige en correcte HTML5 Met validatie - alles is in orde!

HTML5 komt niet zomaar, het is er al. Met uw ingebouwde visuele editor hoeft u zich geen zorgen te maken over de geldigheid en juistheid van de paginacode op uw site. De editor genereert precies het soort code dat door moderne browsers correct wordt waargenomen.

U hoeft niet handmatig de juiste code te schrijven

Deze editor wordt in uw website ingebouwd en uw contentmanager hoeft niet na te denken over welke structuurelementen er worden gebruikt om teksten te markeren.

Waarom heb je geldige HTML5 nodig?
De voordelen van het overstappen op geldige HTML5 vallen niet te ontkennen; ze worden al lang besproken door webontwikkelaars (bijvoorbeeld door webontwikkelaars).

Dit alles is te danken aan de nieuwe beheerde caching-technologie (Cache Dependencies), die juist dient voor een gemakkelijke bediening van de inhoudseditor en het automatisch bijwerken van gegevens onmiddellijk nadat deze zijn gewijzigd. Met deze technologie kunnen wijzigingen op de site worden weergegeven zonder te wachten tot de cache is bijgewerkt, wat op bepaalde tijdstippen door het systeem wordt uitgevoerd. Daarom is dit een van de belangrijkste technologische componenten van een gemakkelijke gebruikerservaring met de site.

• Om de site te versnellen en het project te schalen, raden we aan om Autocaching-technologie te ondersteunen en Managed Caching-technologie te gebruiken.
• Automatisch+beheerd

Voor ontwikkelaars

"Hermitage" voor webontwikkelaars Het "Hermitage"-concept omvat een hele reeks technologische aanbevelingen voor webontwikkelaars. Dit is een indrukwekkende lijst met aanbevelingen voor het ‘juist’ maken van uw applicaties. Dit is een Hermitage-concept voor ontwikkelaars, dat precies laat zien hoe applicaties voor het Bitrix-platform kunnen worden ontwikkeld. Ontwikkel zo dat deze applicaties gemak en werkgemak bieden in de Hermitage-interface. De meeste van deze aanbevelingen zijn bekend bij ervaren ontwikkelaars.

Aanbevelingen voor webontwikkelaars:

• Ontwerp. Uitgevoerd in overeenstemming met. Vooral op die momenten die betrekking hebben op het maken van uw eigen ontwerpsjabloon en de toepassing ervan. We hebben geprobeerd de besturingsinterfaces zo te ontwikkelen dat webontwikkelaars niet worden beperkt in de lay-out- en ontwerpopties.
• Het wordt aanbevolen om standaardmenucomponenten met caching in de sitesjabloon te gebruiken. ()
• Het wordt aanbevolen om een ​​website te maken met . Gebruik standaardcomponenten of maak voor de doeleinden van het project aangepaste componenten voor de specifieke behoeften ervan.
• Wij raden dit aan bij het aanpassen van het uiterlijk. Dit garandeert hun veiligheid bij het updaten van het product. U kunt de sjabloon rechtstreeks vanuit de openbare interface kopiëren in de bewerkingsmodus. Een component kan een onbeperkt aantal sjablonen hebben.
• We raden u aan deze te maken als u de 1C-Bitrix-component wijzigt of uw eigen component maakt.
• Bij het ontwikkelen van componenten kunt u rekening houden met .
• Gebruik wordt aanbevolen bij het creëren van complexe functionaliteit of weergaven van meerdere pagina's, waarbij het koppelen van afzonderlijke componenten moeilijk zal zijn voor gebruikers.
• Om de site te versnellen en het project te schalen, raden we aan om Autocaching-technologie te ondersteunen en Managed Caching-technologie te gebruiken.
• Bij het instellen van componenten is het raadzaam om de componentparameters in te stellen op Auto+Managed met een lange cachingtijd (1-12 maanden als u volledig met de Cache Dependencies-technologie werkt).
• Het is wenselijk dat de component in de Autocaching-modus geen query's naar de database uitvoert, of alleen die query's uitvoert waarvoor caching irrationeel is.
• Waar mogelijk is ondersteuning voor zowenselijk.
• We raden ondersteuning aan voor het beheren van lijstitems via de product-API. Hierdoor kunnen gebruikers elementen rechtstreeks op sitepagina's bewerken en verwijderen.
• Het is aan te raden om grote ontwikkelingen in uw eigen modules te ontwerpen met een API en daarin uw eigen componenten op te nemen. Met hun daaropvolgende plaatsing op MarketPlace en de mogelijkheid om te updaten met behulp van SiteUpdate-technologie. ()
• Het wordt aanbevolen om de platform-API te gebruiken om met systeemobjecten te werken. Zeer ongewenste directe zoekopdrachten naar de database. Dit kan ertoe leiden dat productupdates niet compatibel zijn met de implementatie van de partner.
• Het handhaven van de integriteit van de productkern en het gebruiken van onze aanbevelingen bij de implementatie van het project om ervoor te zorgen dat het product kan worden bijgewerkt met behulp van de SiteUpdate-updatetechnologie. Gebruik het interne evenementensysteem om de logica van het product te wijzigen of om de verschijning van nieuwe evenementen aan te vragen. (

Het ontwikkelen van een website in overeenstemming met deze aanbevelingen zal voor klanten van fundamenteel belang zijn: beheergemak, mogelijkheid om te updaten, hoge prestaties en veiligheid van het project.

Op dit moment is ongeveer 11-12% van de 100.000 meest bezochte sites responsive, en er bestaat geen twijfel over dat dit aantal de komende jaren zal toenemen.

Nu steeds meer organisaties de handen uit de mouwen steken om de realiteit van het internet met meerdere apparaten te omarmen, is het de moeite waard om een ​​paar strategieën te overwegen die worden gebruikt om nirvana te bereiken:

Adaptieve modernisering

Responsief herontwerp is het proces waarbij een bestaande desktop-only website wordt overgenomen en in wezen 'responsief wordt verbouwd'.

Als het gaat om kant-en-klare sites (vooral commerciële sites), hebben teams niet altijd de mogelijkheid om alles weg te gooien en opnieuw te bouwen.
Dan Cederholm

Voor de meeste organisaties wordt het op grote schaal creëren van een nieuw ontwerp vanuit het niets niet eens overwogen. Dit is de reden waarom responsieve modernisering een populaire aanpak is om een ​​goede ervaring voor mobiele apparaten te creëren.

Voordelen

• Relatief snel.
  Er zijn nogal wat manieren om responsieve modernisering uit te voeren. Deze strategie zou het toevoegen van een small-screens.css-bestand aan de site kunnen zijn. Ondanks dit nogal grove voorbeeld is adaptieve modernisering voor een groot aantal organisaties een aantrekkelijke optie, omdat het niet nodig is dat alles vanaf nul opnieuw opgebouwd moet worden.
• Bekend.
  Brengt gebruikers niet in verwarring. Mensen hebben jarenlang aan de interface moeten wennen, en door de bestaande te moderniseren behouden organisaties een vertrouwde aanpak en verbeteren ze tegelijkertijd de levens van mensen met mobiele apparaten.
• Organisatorisch sneller.
  Politiek gezien is het moderniseren van de interface veiliger dan helemaal opnieuw beginnen. Er zal minder discussie zijn over welke kleur groen we moeten kiezen, welke triviale stockfoto's we moeten gebruiken, en het management zal de armen niet hoeven te draaien. Hierdoor kunnen teams sneller responsieve sites lanceren.

Gebreken

• Heeft slechts invloed op een klein deel.
  Nogmaals, er zijn veel opties om een ​​verbouwing uit te voeren, maar het doel van de meeste daarvan is om ‘het mooi te maken’. Door zich te concentreren op het opnieuw ontwerpen van de lay-out, missen herontwerpen vaak de talloze andere factoren waarmee rekening moet worden gehouden bij het maken van een succesvol ontwerp voor een verscheidenheid aan apparaten.
• 10 liter water in een pot van drie liter.
  Omdat desktopsites alleen voor desktopcomputers zijn ontworpen (en vaak lang meegaan), kunnen ze veel rommel bevatten. En aangezien modernisering vooral bestaat uit het opnieuw smelten van de lay-out, wordt met de meeste inhoudelijke problemen niet volledig rekening gehouden.
• Prestatie.
  Er is iets vreemds aan het schrijven van code om kleine apparaten beter te ondersteunen. Het verwijderen van onnodige spullen kan te ver gaan, maar zonder focus op productiviteit zal het niet vanzelf groeien.
• Slechtste ondersteuning.
  Mediaquery's, oorspronkelijk ontworpen voor desktopcomputers, worden op de meeste mobiele apparaten slecht ondersteund.
• Tijdelijke oplossingen.
  Ik heb het gevoel dat ik doodga als ik mensen hoor die mij vragen om iets ‘responsive’ te maken, alsof het slechts een selectievakje in het projectplan is (wat het soms ook is). Dit soort beperkt denken mist de echte kansen die responsive design biedt.

Responsieve mobiele websites Responsieve mobiele websites, of zoals ik ze ‘zaadjes voor een responsieve toekomst’ noem, zijn de praktijk waarbij een afzonderlijke website in het ‘m.uwdomein.ru’-formaat wordt gemaakt met behulp van responsieve ontwerptechnieken. Sites als The BBC, The Guardian en Entertainment Weekly (waar ik aan heb gewerkt) gebruiken deze strategie.

De mobiele versie geeft u de mogelijkheid om een ​​zaadje te planten dat zal groeien vanuit uw oude website.

Na verloop van tijd kan een verouderde site worden verwijderd en zal de site evolueren van mobile-first, responsief en rekening houdend met toekomstige trends.

Voordelen

• Lager risico.
  De meeste organisaties beschouwen verkeer van mobiele apparaten nog steeds als een minderheid. Door een mobiel responsieve website te lanceren, kunnen deze organisaties de wateren testen zonder eerst op het onderwerp in te gaan.
• Een kans om flexibel te leren zijn.
  Ontwerpers kunnen leren flexibeler te denken. Ontwikkelaars zullen de talloze trucs van Android-apparaten leren. Managers kunnen erachter komen hoe ze afstand kunnen nemen van pixelperfectie. Een responsieve mobiele site kan een geweldige leeromgeving zijn.
• Infrastructuur.
  Teams kunnen leren hoe ze contentmanagementproblemen, zoals het maken van afbeeldingen, voor eens en voor altijd kunnen oplossen
• Overtollig verwijderen.
  Deze aanpak biedt teams een geweldige kans om zich af te vragen “hebben we dit echt nodig” en zich tegelijkertijd op de prestaties te concentreren. Waarom? Omdat hun primaire focus ligt op het verbeteren van de gebruikerservaring van hun site op mobiele apparaten.
• De toekomst is mobile-first websites.
  Hoewel ze aanvankelijk weinig inhoud of functionaliteit hebben, kunnen deze mobiele sites met voldoende tijd en moeite uiteindelijk hun voorouders die een volledige pagina beslaan, vervangen.

Gebreken

• Het is nog steeds een mobiele site.
  Of deze nu responsief is of niet, deze aanpak heeft nog steeds een groot aantal nadelen van mobiele sites: problemen met URL-omleiding, inhoudsbeheer, consistente inhoud, consistentie, SEO-optimalisatie en andere.
• Tijdelijke oplossingen.
  Veel mobiele sites zijn gemaakt als pleister - om het bloeden te stoppen. Dergelijke sites zijn gemaakt met als doel het groeiende verkeer afkomstig van mobiele apparaten te ontlasten. Deze oplossingen voldoen misschien nog steeds aan bestaande behoeften, maar gezien toekomstige trends is het onwaarschijnlijk dat ze u op de lange termijn zullen redden.
• Kans op verdorren aan de wijnstok.
  Sommige organisaties starten dergelijke projecten, zijn halverwege en laten het geheel achterwege totdat de begroting voor het volgende jaar is aangenomen.
• Ontwerp voor kleine schermen.
  Omdat de initiële focus op kleine schermen ligt, kan het later een uitdaging zijn om de interface over te zetten naar grotere schermen zonder kwaliteitsverlies.

Responsief ontwerp voor mobiele apparaten
Gebreken

• 50 tinten imperfectie.
  Deze aanpak kan mislukken omdat gebruikers te maken krijgen met een Frankenstein-interface die zowel oud als nieuw is.
• De mogelijkheid om aan de wijnstok te verdorren.
  Dit soort projecten hebben duidelijke einddoelen nodig, anders kunnen ze voor altijd in het vagevuur blijven hangen.
• Technische coëxistentie.
  Wat gebeurt er als een module, gebruikmakend van de nieuwste technologieën en technieken, frontaal botst met een verouderde module? Er zijn veel architectonische uitdagingen voor deze aanpak.

“Ik ben Chevy Chase, jij niet.” Natuurlijk is elke organisatie anders, dus welk pad je moet kiezen, hangt van verschillende factoren af. Tijd, budget, reikwijdte, organisatiestructuur, vaardigheden en vele andere factoren beïnvloeden welke strategie het beste kan worden geïmplementeerd.

Maar in de loop van de tijd is het steeds duidelijker geworden dat organisaties moeten werken aan een steeds grotere verscheidenheid aan apparaten die toegang hebben tot internet.

Dit is een vertaling van een artikel getiteld "Responsive Strategy" van Brad Frost. Vertaald door UXDepot met goedkeuring van de auteur. PS van de vertalers: Ik hoop dat je het artikel leuk vond. Wij stellen het op prijs als u ons op eventuele fouten in de vertaling wijst, zodat wij deze snel kunnen corrigeren. Schrijf ons op[e-mailadres beveiligd]