[part of the MA Digital Media & Society, University of Sheffield] Slides for lecture given as part of the Digital Practices Module. 8/2/108

1. PRACTICESstairwell
stairwell
castle towers stairwell
castle towers
stairwell
stairwell
stairwell
stairwell
Content
SCS6079 Digital Practices MA Digital Media & Society
DIGITAL
eyelearn.org/workshops/digital-practices2018

2. DIGITAL PRACTICESINTRODUCTION
1 hr lecture
2½ workshop (group split: 4)
2½ workshop (group split: 3)
weeks 1-3, 5 & 7-8:
weeks 4 & 6:
delivered by Prisca & Lulu
delivered by Creative Media Team
Digital Practices Sessions:
Thursday & Friday
RESOURCES
check MOLE for all official info
eyelearn.org/workshops/digital-practices2018session material:

3. DIGITAL PRACTICESPROJECT BRIEFS
1. A site plan to outline the information architecture
(this can be in form of a tree chart diagram or a well
structured written document)
2. A website with at least five pages presented online,
containing: text, images/video as appropriate
3. A 500-word document describing considerations for
each main part of the website, the content structure,
tone of copy and why you chose to include certain
elements.
deliverables:
to be delivered by deadline via TURNITIN
Digital Practices Project:
Select one of three briefs
Get Active!
BRIEF 1
Bringing up children in a digital age
BRIEF 2
Being an international student
BRIEF 3
Check Handbook on MOLE for
official submission deadline.
!
→ eyelearn.org/workshops/digital-practices2018

4. DIGITAL PRACTICESINTRODUCTION
who am I?
— graphic designer since 1996
~ transition to digital ~
— web designer since 2000
— teaching web design since 2002
Additional resources
a little bit about me:
design for people
love the sharing spirit of the web
support web as free and open platform to empower people
open source all the way
Why WordPress? ~ all of the above :)
— studio launched 2013
DESIGN LONDON
WordPress
STUDIO
EYEDEA
eyedeastudio.london
design work

5. DIGITAL PRACTICES
PRACTICESstairwell
stairwell
castle towers stairwell
castle towers
stairwell
stairwell
stairwell
stairwell
Content
eyelearn.org/workshops/digital-practices2018
DIGITAL

6. DIGITAL PRACTICESWebsites… how do they work?
national audience
international audience
many users
many preferences
many devices

7. DIGITAL PRACTICESWebsites… how do they work?
SERVER / SITE HOST
DOMAIN NAME SERVER
128.168.68.192
https://website.com
stairwell
way finding
content

8. DIGITAL PRACTICESWebsites… how do they work?
enter web address /or/
click on search result link1
https://website.com

9. DIGITAL PRACTICESWebsites… how do they work?
https://website.com
DOMAIN NAME SERVER
browser looks up the IP address
on the DNS (domain name server)2
128.168.68.192

10. DIGITAL PRACTICESWebsites… how do they work?
https://website.com
DOMAIN NAME SERVER
browser looks up the IP address
on the DNS (domain name server)2
128.168.68.192
SERVER / SITE HOST
content
all files are located
in dedicated
folder/database on server
stairwell
way finding

11. DIGITAL PRACTICESWebsites… how do they work?
128.168.68.192
SERVER / SITE HOST
browser communicates
with server3
site displayed
in browser4
content
all files are located
in dedicated
folder/database on server
stairwell
way finding

12. DIGITAL PRACTICESWebsites… how do they work?
↓ website setup
1. domain name 2. server/host
registration
manage name server
file hosting
server functions
view site →

13. DIGITAL PRACTICESWebsites… how do they work?
enter web address /or/
click on search result link1
browser looks up the IP address
on the DNS (domain name server)2 browser communicates
with server3 site displayed
in browser4
content
SERVER / SITE HOST
DOMAIN NAME SERVER
128.168.68.192
all files are located
in dedicated
folder/database on serverhttps://website.com
stairwell
way finding

14. DIGITAL PRACTICESYour website… how does it work?
Your website
Provided by the University, accessible on campus or via VPN from outside
(see CiCS instructions for details).
URL / website address
ma-dms.sheffield.ac.uk/digp + your unique number
admin / WordPress login
ma-dms.sheffield.ac.uk/digp##/wp-admin
eyelearn.org/workshops/digital-practices2018

15. DIGITAL PRACTICES
PRACTICESstairwell
stairwell
castle towers stairwell
castle towers
stairwell
stairwell
stairwell
stairwell
Content
eyelearn.org/workshops/digital-practices2018
DIGITAL

16. DIGITAL PRACTICES
What makes a good website?
Which aspects do you consider important?
?
What makes a good website?

17. DIGITAL PRACTICESWhat makes a good website?
provides sought-for information.
isaccessible.
is easy to use.
is clearly presented as secure.
shows up-to-date content.loads fast.
is professional.
A good website
presents a strong brand image.
features images and videos.
caters for its audience.
is engaging & informative.
looks attractive.
presents legible text and clearly structured content.
complies with applicable laws.
keeps data confidential and secure.
functions well and as expected. appeals to personal taste.
...

18. DIGITAL PRACTICESWhat makes a good website?
TEXT
stairwell
stairwell
castle towers stairwell
castle towers
stairwell
stairwell
stairwell
stairwell
PHOTOS
content technical aesthetic
User perspective - where do the priorities lie?

19. DIGITAL PRACTICESWhat makes a good website?
content
provides sought-for information.
shows up-to-date content.
is professional.
features images and videos.
caters for its audience.
is engaging & informative.
presents legible text and clearly
structured content.
complies with applicable laws.
technical
is easy to use.
is clearly presented as secure.
loads fast.
keeps data confidential and secure.
functions well and as expected.
aesthetics
is engaging & informative.
looks attractive.
appeals to personal taste.
User perspective - where do the priorities lie?

20. DIGITAL PRACTICESBrowsing habits
Which device do you use most often?
?— Are you mostly going online with your mobile or your PC?
Would you say that you access the web mainly via mobile devices?
Or are you happier browsing on a desktop computer / larger screen?
Which browser or app do you use to access content?
— Do you have any favourite apps to access the web with?
Do you mainly use a web browser? Or do you rely on other sites,
such as social media sites to access content and find links??

21. DIGITAL PRACTICESBrowsers
Firefox Waterfox Brave Vivaldi Edge Opera
Maxthon Yandex TOR Safari Cliqz Chrome

22. DIGITAL PRACTICESBrowsing habits
How do you browse the internet?
?— Do you have a routine of sites to visit?
for example:
Are there any websites you visit daily or very frequently?
Or do you vary your browsing more often than not?
for example:
Do you type or copy/paste links into the browser’s address bar?
Or do you primarily use a search engine? Or click on links in emails?
— Are there any typical patterns in how you browse?
?

23. DIGITAL PRACTICESSearch Engines
How do you search?
?Which search engines do you use?

24. DIGITAL PRACTICESSearch Engines

25. DIGITAL PRACTICESSearch Engines
TIP
explore
alternatives
& find better
sources
creativecommons
DuckDuckGo ECOSIA

26. DIGITAL PRACTICESWhat makes a good website?
TEXT
stairwell
stairwell
castle towers stairwell
castle towers
stairwell
stairwell
stairwell
stairwell
PHOTOS
content
provides sought-for information.
shows up-to-date content.
is professional.
features images and videos.
caters for its audience.
is engaging & informative.
presents legible text and clearly
structured content.
complies with applicable laws.

27. DIGITAL PRACTICES
Content precedes design.
Design in the absence of
content is not design,
it’s decoration.”
“
Jeffrey Zeldman
Content-out approach

28. DIGITAL PRACTICES
stairwell
stairwell TEXT
stairwell
stairwell
castle towers stairwell
castle towers
stairwell
stairwell
stairwell
stairwell
PHOTOS
content creation
editing for target group & context1
all copy for the site:
main content as well as micro copy
all media files:
collect / optimise for display on web
all material for download
edited for suitable file formats (PDF/ZIP)
Content-out approach

29. DIGITAL PRACTICES
stairwell
stairwell TEXT
stairwell
stairwell
castle towers stairwell
castle towers
stairwell
stairwell
stairwell
stairwell
PHOTOS
content creation
editing for target group & context1
all copy for the site:
main content as well as micro copy
all media files:
collect / optimise for display on web
all material for download
edited for suitable file formats (PDF/ZIP)
ongoing feedback & testing,
iterations/edits of content
Content-out approach

30. DIGITAL PRACTICESContent-out approach
content creation
editing for target group & context1
content review / revision
site planning for content structure2
ongoing feedback & testing,
iterations/edits of content
SITE MAP
WIREFRAME
site map for content structure
informs the wireframe for
content layout & design
stairwell
stairwell TEXT
stairwell
stairwell
castle towers stairwell
castle towers
stairwell
stairwell
stairwell
stairwell
PHOTOS

31. DIGITAL PRACTICEScontent creation
editing for target group & context1
content review / revision
site planning for content structure2
ongoing feedback & testing,
iterations/edits of content
SITE MAP
WIREFRAME ongoing feedback & testing, iterations/edits of design + setup
design for layout, type and
presentation of all media3
stairwell
stairwell TEXT
stairwell
stairwell
castle towers stairwell
castle towers
stairwell
stairwell
stairwell
stairwell
PHOTOS
Content-out approach

32. DIGITAL PRACTICESUpcoming sessions on content
TEXT
stairwell
stairwell
castle towers stairwell
castle towers
stairwell
stairwell
stairwell
stairwell
PHOTOS
content
Digital Content Production
Writing web content
weeks 4 & 6
delivered by Creative Media Team
week 2
delivered by Lulu Pinney

33. DIGITAL PRACTICESOptions & considerations
a) static, self-hosted website
b) free-hosted website
c) CMS [content management system] driven setup
(can be free- or self-hosted)
Putting a site online -
which options are available?
Why do you need to know?
✓ you are responsible for your own data. Knowing how to
backup your site (content/setup/design) is vital.
✓ keep an eye on ownership. Knowing whether your uploaded
content remains your own is important.
content
all files are located
in dedicated
folder/database on server
stairwell
way finding

34. DIGITAL PRACTICESOptions & considerations
Putting a site online -
which options are available?
a) static, self-hosted website
— webpages created as standalone, containing all data and media
— design and content interlinked
— all files fully functioning independently and uploaded on server
b) free-hosted website
— website part of a bigger setup, shared server and settings
— often no direct access to files
— settings and data protection by third party
c) CMS [content management system] driven setup
(can be free- or self-hosted)
— content and design kept separated: content in database, design as theme
— more flexibility in updating content structure and design
— backups involve database, design and settings
content
all files are located
in dedicated
folder/database on server
stairwell
way finding

35. DIGITAL PRACTICESCMS & template-driven design
B
ACKUP
gif
js
php
stairwell
stairwell
CONTENT
DATABASE
TEMPLATES / DESIGN
jpg
svgcss
website in browser
https://website.com
TEXT
stairwell
stairwell
castle towers stairwell
castle towers
stairwell
stairwell
stairwell
stairwell
PHOTOS

36. DIGITAL PRACTICESCMS & template-driven design: practically speaking
content in hand
edited for web1 site admin
log in to update2 add/upload content
+ label by using admin options3 all content uploaded
database updated4
TEXT
stairwell
stairwell
castle towers stairwell
castle towers
stairwell
stairwell
stairwell
stairwell
PHOTOS
DATABASE

37. DIGITAL PRACTICES
install & activate design
via theme / template5 ready to view
browser will request content + design6
gif
js
php
DATABASE
TEMPLATES / DESIGN
jpg
svgcss
website in browser
https://website.com
gif
js
php
TEMPLATES / DESIGN
jpg
svgcss
CMS & template-driven design: practically speaking

38. DIGITAL PRACTICESCMS & template-driven design: practically speaking
BACKUP !!!
both content and design7
DATABASE
gif
js
php
TEMPLATES / DESIGN
jpg
svgcss
EXPORT VIA ADMIN
or server control panel
DOWNLOAD THEME FOLDER
TEXT
stairwell
stairwell
castle towers stairwell
castle towers
stairwell
stairwell
stairwell
stairwell
PHOTOS
content

39. DIGITAL PRACTICES
WordPress

40. DIGITAL PRACTICES
home of the hosted version
platform by Automattic
offers free and priced options
home of the software
free to download for self-hosting
developer documentation: CODEX
Matt Mullenweg
→ ma.tt

41. DIGITAL PRACTICES
WordPressfree as in freedom
& free as in money
open source | license: GPL
reliable and technically stable
flexible, adaptive and extendable
large community contributing to core and plugins
wide variety of plugins available
easy update and content management
easy change of design via theme

42. DIGITAL PRACTICESworking with
website in browser
https://website.com

43. DIGITAL PRACTICES

44. DIGITAL PRACTICES

45. DIGITAL PRACTICES

46. DIGITAL PRACTICES

47. DIGITAL PRACTICES
๏ always keep up-to-date!
update both core version of WordPress, plugins and themes
๏ keep your admin password safe!
when using a shared computer, remember to log out.
working with

48. DIGITAL PRACTICESworking with

49. DIGITAL PRACTICES
Prisca Schmarsow
prisca@eyedeastudio.london
eyedeastudio.london