43
Hjälp min webb är responsiv! Ida Franceen, Interface Developer Maja Myrenås, Project Manager

Hjälp! Min webbplats är responsiv! (Gbg)

Embed Size (px)

DESCRIPTION

Har du också tittat på besökssiffrorna för webben och insett att nära hälften av besökarna surfar in med en smartphone eller surfplatta? Responsiva lösningar, webbsidor som anpassar layout efter besökarnas skärmar har funnits i ett par år nu, men hur ser egentligen dina texter, bilder och diagram ut på en iPad Mini, HTC One eller Smart-TV? Den här dragningen riktar sig till dig som är webbredaktör eller på annat sätt jobbar praktiskt med innehållet på en webbplats. Du får tips på hur du jobbar för att ditt innehåll ska funka och se bra ut – för alla! Talare Maja Myrenås Project Manager Creuna Ida Franceen Interface Developer Creuna

Citation preview

Page 1: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Insert client logo 1.  Select placeholder 2.  Choose Insert from top menu 3.  Choose Picture from file 4.  Select client logo 5.  Click OK

To view drawing guides 1.  Right click on slide and select

’Grid and Guides...’ 2.  Check ’Display drawing

guides on screen’ 3.  Select OK

Insert image in background 1. Click on image placeholder

2. Choose Insert/Click Picture-button 3. Select image and click OK

Size of image=1500x844 px (2000x1126 px for even better quality)

Hjälp min webb är responsiv!

Ida Franceen, Interface Developer Maja Myrenås, Project Manager

© Creuna

Page 2: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Darker colours You’re basically free to use the different saturations

of the colours, but we still recommend these second to darkest ones

Our five basic colours Yellow, Blue, Red, Green and Grey

These are the colours we use for backgrounds

Change background colour 1. Click on slide

2. Choose Format Background 3. Select Fill and choose your colour

4. Click OK

Gissa Procenten!

Page 3: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Page 4: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

In some cases you may want background images and you can repeat the agenda throughout

the presentation and highlight the coming section

Insert image in background 1. Click on lower Picture icon

2. Find image, select OK Size of image=1500x844 px

(2000x1126 px for even better quality)

Desktop 36% Mobil 64%

Desktop 72% Mobil 28%

Desktop 57% Mobil 43%

Page 5: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Our five basic colours Yellow, Blue, Red, Green and Grey

These are the colours we use for backgrounds

Darker colours You’re basically free to use the different

saturations of the colours, but we still recommend these second to darkest ones

Change colour of numbering 1.  Select all text with numbering

2. Choose Format/Bullets and Numbering 3. Select colour from ‘Color’ dropdown.

4. Click OK

Change background colour 1. Right click outside slide

2. Choose Format Background 3. Select Fill and choose your colour

4. Click OK

Agenda

© Creuna

1  En kort blick bakåt 2  Vad är responsiv webb? 3  Hur jobba med innehåll i stort 4  …och i din editor 5  Testa och utvärdera ditt innehåll

Page 6: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Darker colours You’re basically free to use the different saturations

of the colours, but we still recommend these second to darkest ones

Our five basic colours Yellow, Blue, Red, Green and Grey

These are the colours we use for backgrounds

Change background colour 1. Click on slide

2. Choose Format Background 3. Select Fill and choose your colour

4. Click OK

Förr i tiden…

© Creuna

Page 7: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Darker colours You’re basically free to use the different saturations

of the colours, but we still recommend these second to darkest ones

Our five basic colours Yellow, Blue, Red, Green and Grey

These are the colours we use for backgrounds

Change background colour 1. Click on slide

2. Choose Format Background 3. Select Fill and choose your colour

4. Click OK

© Creuna

Page 8: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Darker colours You’re basically free to use the different saturations

of the colours, but we still recommend these second to darkest ones

Our five basic colours Yellow, Blue, Red, Green and Grey

These are the colours we use for backgrounds

Change background colour 1. Click on slide

2. Choose Format Background 3. Select Fill and choose your colour

4. Click OK

© Creuna

Page 9: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Page 10: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Page 11: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Page 12: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Darker colours You’re basically free to use the different saturations

of the colours, but we still recommend these second to darkest ones

Our five basic colours Yellow, Blue, Red, Green and Grey

These are the colours we use for backgrounds

Change background colour 1. Click on slide

2. Choose Format Background 3. Select Fill and choose your colour

4. Click OK

© Creuna

Nuförtiden

Page 13: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Page 14: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Responsiv eller

Följsam design?

Page 15: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Page 16: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

In some cases you may want background images 1. Click on Picture icon

2. Find image, select OK Size of image=1500x844 px

(2000x1126 px for even better quality)

Click Increase Indent button to get predefined ‘quote-name’ font

Måste man bygga responsivt?

Page 17: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Darker colours You’re basically free to use the different saturations

of the colours, but we still recommend these second to darkest ones

Our five basic colours Yellow, Blue, Red, Green and Grey

These are the colours we use for backgrounds

Change background colour 1. Click on slide

2. Choose Format Background 3. Select Fill and choose your colour

4. Click OK

Innehållet

Page 18: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

80% skumläser

Foto: Flickr.com / MichaelFitz

Page 19: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

viktigaste först - skippa allt som är irrelevant

Page 20: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Page 21: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Page 22: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Page 23: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Hamburgermeny överallt?

Page 24: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

http://theoatmeal.com

Page 25: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

http://theoatmeal.com

Page 26: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Darker colours You’re basically free to use the different saturations

of the colours, but we still recommend these second to darkest ones

Our five basic colours Yellow, Blue, Red, Green and Grey

These are the colours we use for backgrounds

Change background colour 1. Click on slide

2. Choose Format Background 3. Select Fill and choose your colour

4. Click OK

Redigera innehåll

Page 27: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Lär dig HTML

Page 28: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

In some cases you may want background images and you can repeat the agenda throughout

the presentation and highlight the coming section

Insert image in background 1. Click on lower Picture icon

2. Find image, select OK Size of image=1500x844 px

(2000x1126 px for even better quality)

16 bra taggar att hålla koll på

Lätt! <h1>-<h6> <p> <a> <img>

<strong> <b> <em> <i> <table> <tr> <th> <td> <ul> <ol> <li>

<blockquote>

Page 29: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Editor

Page 30: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Page 31: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Page 32: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Page 33: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Page 34: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Bara Att Klistra In

Page 35: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Page 36: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Men min sajt är gammal!

Page 37: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

To add pre-formatted bullet text please use the Increase/Decrease Indent

buttons found in the Top-PowerPoint menu

Att beställa en responsiv webb

Tät dialog med redaktörerna tidigt

Utbildningar Innehållsverkstäder

Page 38: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Darker colours You’re basically free to use the different saturations

of the colours, but we still recommend these second to darkest ones

Our five basic colours Yellow, Blue, Red, Green and Grey

These are the colours we use for backgrounds

Change background colour 1. Click on slide

2. Choose Format Background 3. Select Fill and choose your colour

4. Click OK

Gör jag rätt?

Page 39: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Page 40: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

To add pre-formatted bullet text please use the Increase/Decrease Indent

buttons found in the Top-PowerPoint menu

Hur testar jag?

Använd riktiga apparater Simulator t. ex. Screenfly Ändra storleken på din webbläsare

Page 41: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

© Creuna

Arbets-skrivbordet! :p

Page 42: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Our five basic colours Yellow, Blue, Red, Green and Grey

These are the colours we use for backgrounds

Darker colours You’re basically free to use the different

saturations of the colours, but we still recommend these second to darkest ones

Change colour of numbering 1.  Select all text with numbering

2. Choose Format/Bullets and Numbering 3. Select colour from ‘Color’ dropdown.

4. Click OK

Change background colour 1. Right click outside slide

2. Choose Format Background 3. Select Fill and choose your colour

4. Click OK

Sammanfattning

© Creuna

+ Stäng inte ute någon, göm inget! + Viktigaste innehållet först, och på direkten. + Märk upp innehållet rätt. + Testa i riktiga telefoner och surfplattor. + Följ upp med statistik, och optimera!

Page 43: Hjälp! Min webbplats är responsiv! (Gbg)

Choose among many Layouts Right-click on slide and select Layout

Change background colour 1. Click on slide

2. Choose Format Background 3. Select Fill and choose your colour and click OK

Make a new slide to add or change the icons by using graphics from www.iconmonstr.com

Our five basic colours Yellow, Blue, Red, Green and Grey

These are the colours we use for backgrounds

Darker colours You’re basically free to use the different saturations of

the colours, but we still recommend these second to darkest ones

Frågor?

© Creuna

Make a new slide to add or change the icons by using graphics from www.iconmonstr.com