{"id":245,"date":"2025-09-17T13:14:41","date_gmt":"2025-09-17T13:14:41","guid":{"rendered":"https:\/\/portfolio.mariesb.dk\/?page_id=245"},"modified":"2025-09-19T05:44:15","modified_gmt":"2025-09-19T05:44:15","slug":"responsive-webdesign","status":"publish","type":"page","link":"https:\/\/portfolio.mariesb.dk\/index.php\/responsive-webdesign\/","title":{"rendered":"Responsive Webdesign"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull is-style-section-2 has-custom-color-3-background-color has-background has-global-padding is-layout-constrained wp-block-group-is-layout-constrained is-style-section-2--1\" style=\"margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-633b684a wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:40%\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"201\" height=\"251\" src=\"https:\/\/portfolio.mariesb.dk\/wp-content\/uploads\/2025\/09\/gulecafe.png\" alt=\"\" class=\"wp-image-246\" style=\"width:224px;height:auto\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-container-core-column-is-layout-0c22cdd7 wp-block-column-is-layout-flow\" style=\"flex-basis:60%\">\n<h2 class=\"wp-block-heading has-text-align-center has-custom-color-5-color has-text-color has-link-color has-playfair-display-font-family wp-elements-1\" style=\"font-style:normal;font-weight:700\">Den Gule Caf\u00e9<\/h2>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignfull are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-794e3cfa wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-794e3cfa wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"macbook-wrapper\">\n  <video autoplay loop muted playsinline>\n    <source src=\"http:\/\/portfolio.mariesb.dk\/wp-content\/uploads\/2025\/09\/responsivweb.mp4\" type=\"video\/mp4\">\n  <\/video>\n  <img decoding=\"async\" src=\"http:\/\/portfolio.mariesb.dk\/wp-content\/uploads\/2025\/09\/mac-png.webp\" alt=\"MacBook frame\">\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-custom-color-1-color has-text-color has-link-color has-inter-font-family wp-elements-2 wp-block-paragraph\" style=\"margin-right:var(--wp--preset--spacing--40);margin-left:var(--wp--preset--spacing--40)\">I dette projekt arbejdede vi med at udvikle en responsiv hjemmeside til Den Gule Caf\u00e9 i J\u00e6gerg\u00e5rdsgade, Aarhus. Form\u00e5let var at skabe en digital l\u00f8sning, der afspejler caf\u00e9ens hyggelige stemning og g\u00f8r det let for brugerne at finde information om caf\u00e9en p\u00e5 b\u00e5de mobil, tablet og desktop.<\/p>\n\n\n\n<p class=\"has-custom-color-1-color has-text-color has-link-color has-inter-font-family wp-elements-3 wp-block-paragraph\" style=\"margin-right:var(--wp--preset--spacing--40);margin-left:var(--wp--preset--spacing--40)\">Projektet havde to hovedm\u00e5l:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-custom-color-1-color has-text-color has-link-color has-inter-font-family wp-elements-4\" style=\"margin-right:var(--wp--preset--spacing--40);margin-left:var(--wp--preset--spacing--40)\">At anvende responsive webdesign-strategier i praksis og udvikle et website, der tilpasser sig forskellige sk\u00e6rmst\u00f8rrelser.<\/li>\n\n\n\n<li class=\"has-custom-color-1-color has-text-color has-link-color has-inter-font-family wp-elements-5\" style=\"margin-right:var(--wp--preset--spacing--40);margin-left:var(--wp--preset--spacing--40)\">At skabe en brugerorienteret l\u00f8sning baseret p\u00e5 analyser af m\u00e5lgruppen og caf\u00e9ens eksisterende digitale tilstedev\u00e6relse.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-custom-color-1-color has-text-color has-link-color has-inter-font-family wp-elements-6 wp-block-paragraph\" style=\"margin-right:var(--wp--preset--spacing--40);margin-left:var(--wp--preset--spacing--40)\">I udviklingsprocessen gennemf\u00f8rte vi brugerunders\u00f8gelser og udarbejdede personaer for at f\u00e5 indblik i de typiske g\u00e6sters behov og adf\u00e6rd. Med afs\u00e6t i Value Proposition Canvas identificerede vi de funktioner og det indhold, der kunne skabe st\u00f8rst v\u00e6rdi for brugerne \u2013 fx tydelige \u00e5bningstider, menukort og kontaktoplysninger.<\/p>\n\n\n\n<p class=\"has-custom-color-1-color has-text-color has-link-color has-inter-font-family wp-elements-7 wp-block-paragraph\" style=\"margin-right:var(--wp--preset--spacing--40);margin-left:var(--wp--preset--spacing--40)\">P\u00e5 designniveau arbejdede vi med moodboards, skitser og wireframes til b\u00e5de mobil, tablet og desktop. Vi valgte en visuel stil, der underst\u00f8tter caf\u00e9ens identitet gennem varme farver, store billeder og en enkel typografi, s\u00e5 hjemmesiden fremst\u00e5r indbydende og overskuelig.<\/p>\n\n\n\n<p class=\"has-custom-color-1-color has-text-color has-link-color has-inter-font-family wp-elements-8 wp-block-paragraph\" style=\"margin-right:var(--wp--preset--spacing--40);margin-left:var(--wp--preset--spacing--40)\">P\u00e5 det tekniske plan implementerede vi en responsiv menu, flere breakpoints i CSS samt semantisk HTML-struktur. Billeder blev optimeret for performance, og vi testede l\u00f8sningen med Lighthouse for at sikre kort page load time. Koden blev l\u00f8bende versioneret og udviklet via GitHub, hvor alle gruppemedlemmer bidrog aktivt.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading alignfull has-custom-color-4-color has-custom-color-1-background-color has-text-color has-background has-link-color has-playfair-display-font-family wp-elements-9\" style=\"font-style:normal;font-weight:700\">Marie Schriver Bjerrehuus<\/h2>\n\n\n\n<div class=\"wp-block-columns alignfull has-custom-color-1-background-color has-background is-layout-flex wp-container-core-columns-is-layout-71693221 wp-block-columns-is-layout-flex\" style=\"margin-top:0;margin-bottom:0\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-align-left has-custom-color-3-color has-custom-color-1-background-color has-text-color has-background has-link-color has-playfair-display-font-family wp-elements-10 wp-block-paragraph\" style=\"padding-top:0;padding-right:var(--wp--preset--spacing--50);padding-bottom:0;padding-left:var(--wp--preset--spacing--50);font-size:clamp(1.039rem, 1.039rem + ((1vw - 0.2rem) * 0.88), 1.6rem);font-style:normal;font-weight:700\">Kontakt:<\/p>\n\n\n\n<p class=\"has-text-align-left has-custom-color-3-color has-custom-color-1-background-color has-text-color has-background has-link-color has-inter-font-family wp-elements-11 wp-block-paragraph\" style=\"padding-top:0;padding-bottom:0;font-style:normal;font-weight:700\"><br>Mail: mariebjerrehuus@hotmail.com<br><br>Telefon: 20677796<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image alignright size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"500\" src=\"http:\/\/portfolio.mariesb.dk\/wp-content\/uploads\/2025\/09\/linkedinfarvet-removebg-preview.png\" alt=\"\" class=\"wp-image-71\" style=\"width:224px\" srcset=\"https:\/\/portfolio.mariesb.dk\/wp-content\/uploads\/2025\/09\/linkedinfarvet-removebg-preview.png 500w, https:\/\/portfolio.mariesb.dk\/wp-content\/uploads\/2025\/09\/linkedinfarvet-removebg-preview-300x300.png 300w, https:\/\/portfolio.mariesb.dk\/wp-content\/uploads\/2025\/09\/linkedinfarvet-removebg-preview-150x150.png 150w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Den Gule Caf\u00e9 I dette projekt arbejdede vi med at udvikle en responsiv hjemmeside til Den Gule Caf\u00e9 i J\u00e6gerg\u00e5rdsgade, Aarhus. Form\u00e5let var at skabe en digital l\u00f8sning, der afspejler caf\u00e9ens hyggelige stemning og g\u00f8r det let for brugerne at finde information om caf\u00e9en p\u00e5 b\u00e5de mobil, tablet og desktop. Projektet havde to hovedm\u00e5l: I [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-245","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/portfolio.mariesb.dk\/index.php\/wp-json\/wp\/v2\/pages\/245","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/portfolio.mariesb.dk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/portfolio.mariesb.dk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/portfolio.mariesb.dk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/portfolio.mariesb.dk\/index.php\/wp-json\/wp\/v2\/comments?post=245"}],"version-history":[{"count":3,"href":"https:\/\/portfolio.mariesb.dk\/index.php\/wp-json\/wp\/v2\/pages\/245\/revisions"}],"predecessor-version":[{"id":276,"href":"https:\/\/portfolio.mariesb.dk\/index.php\/wp-json\/wp\/v2\/pages\/245\/revisions\/276"}],"wp:attachment":[{"href":"https:\/\/portfolio.mariesb.dk\/index.php\/wp-json\/wp\/v2\/media?parent=245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}