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 ofïŹcial 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 ïŹve 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
ofïŹcial 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
7. DIGITAL PRACTICESWebsites⊠how do they work?
SERVER / SITE HOST
DOMAIN NAME SERVER
128.168.68.192
https://website.com
stairwell
way finding
content
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 ïŹles 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 ïŹles 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
ïŹle 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 ïŹles 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.shefïŹeld.ac.uk/digp + your unique numberâš
admin / WordPress loginâš
ma-dms.shefïŹeld.ac.uk/digp##/wp-admin
eyelearn.org/workshops/digital-practices2018
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 conïŹdential 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 ïŹnd links??
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?
?
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 ïŹles:âš
collect / optimise for display on web
all material for downloadâš
edited for suitable ïŹle 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 ïŹles:âš
collect / optimise for display on web
all material for downloadâš
edited for suitable ïŹle 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 ïŹles 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 ïŹles 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 ïŹlesâš
â 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 ïŹexibility in updating content structure and designâš
â backups involve database, design and settings
content
all ïŹles 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
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
ïŹexible, 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
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