QUICK INTRODUCTION People call me GONZ QUICK INTRODUCTION 1. Never - - PowerPoint PPT Presentation

▶
quick introduction
SMART_READER_LITE
LIVE PREVIEW

QUICK INTRODUCTION People call me GONZ QUICK INTRODUCTION 1. Never - - PowerPoint PPT Presentation

Dec 28, 2022 621 likes •1.91k views

QUICK INTRODUCTION People call me GONZ QUICK INTRODUCTION 1. Never went to Art School QUICK INTRODUCTION 1. Never went to Art School 2. Never took Computer Science class QUICK INTRODUCTION 1. Never went to Art School 2. Never took Computer

slide-1
SLIDE 1
slide-2
SLIDE 2

QUICK INTRODUCTION

People call me “GONZ”

slide-3
SLIDE 3

QUICK INTRODUCTION

  • 1. Never went to Art School
slide-4
SLIDE 4

QUICK INTRODUCTION

  • 1. Never went to Art School
  • 2. Never took Computer Science class
slide-5
SLIDE 5

QUICK INTRODUCTION

  • 1. Never went to Art School
  • 2. Never took Computer Science class
  • 3. Never won an Award
slide-6
SLIDE 6
slide-7
SLIDE 7

QUICK INTRODUCTION

slide-8
SLIDE 8

SOME CLIENTS

slide-9
SLIDE 9

SOME CLIENTS

slide-10
SLIDE 10

SOME CLIENTS

slide-11
SLIDE 11

SOME CLIENTS

slide-12
SLIDE 12

SOME CLIENTS

slide-13
SLIDE 13

SOME CLIENTS

slide-14
SLIDE 14

SOME CLIENTS

slide-15
SLIDE 15
slide-16
SLIDE 16

QUICK INTRODUCTION

We’re Hiring

(shameless plug)

slide-17
SLIDE 17
slide-18
SLIDE 18

WARNING:

slide-19
SLIDE 19

WARNING:

slide-20
SLIDE 20
slide-21
SLIDE 21

So why this session?

slide-22
SLIDE 22
slide-23
SLIDE 23

As ¡website ¡developers ¡working ¡in ¡a ¡ Content ¡Management ¡System ¡like ¡ Drupal, ¡WordPress ¡or ¡Magento ¡we ¡ are ¡poised ¡with ¡2 ¡main ¡challenges.

slide-24
SLIDE 24

As ¡website ¡developers ¡working ¡in ¡a ¡ Content ¡Management ¡System ¡like ¡ Drupal, ¡WordPress ¡or ¡Magento ¡we ¡ are ¡poised ¡with ¡2 ¡main ¡challenges.

  • 1. How ¡can ¡we ¡get ¡the ¡project ¡to ¡work ¡well ¡on ¡

the ¡front-­‑end

slide-25
SLIDE 25
slide-26
SLIDE 26

As ¡website ¡developers ¡working ¡in ¡a ¡ Content ¡Management ¡System ¡like ¡ Drupal, ¡WordPress ¡or ¡Magento ¡we ¡ are ¡poised ¡with ¡2 ¡main ¡challenges.

  • 1. How ¡can ¡we ¡get ¡the ¡project ¡to ¡work ¡well ¡on ¡

the ¡front-­‑end ¡

  • 2. How ¡can ¡we ¡get ¡the ¡project ¡to ¡work ¡well ¡on ¡

the ¡back-­‑end

slide-27
SLIDE 27
slide-28
SLIDE 28
slide-29
SLIDE 29
slide-30
SLIDE 30

What we will cover:

  • Think Like an Admin
slide-31
SLIDE 31

What we will cover:

  • Think Like an Admin
  • Building Admin UX
slide-32
SLIDE 32

What we will cover:

  • Think Like an Admin
  • Building Admin UX
  • Common Mistakes
slide-33
SLIDE 33

What we will cover:

  • Think Like an Admin
  • Building Admin UX
  • Common Mistakes
  • Personal Mission
slide-34
SLIDE 34

As DevSigners – It is

  • ur responsibility to

create the total web experience.

slide-35
SLIDE 35

THINK LIKE AN ADMIN

THINK LIKE AN ADMIN

slide-36
SLIDE 36

THINK LIKE AN ADMIN

  • 1. Admin’s 1st Impression
slide-37
SLIDE 37
slide-38
SLIDE 38

THINK LIKE AN ADMIN

VS.

slide-39
SLIDE 39
slide-40
SLIDE 40

THINK LIKE AN ADMIN

  • 1. Admin’s 1st Impression

– Branded vs Blah UI

slide-41
SLIDE 41

THINK LIKE AN ADMIN

  • 1. Admin’s 1st Impression

– Branded vs Blah UI – Keep it Simple (KISS)

slide-42
SLIDE 42

THINK LIKE AN ADMIN

  • 1. Admin’s 1st Impression

– Branded vs Blah UI – Keep it Simple (KISS) – Customer Login vs Admin Login

slide-43
SLIDE 43

THINK LIKE AN ADMIN

  • 2. Admin’s Key Objectives
slide-44
SLIDE 44

THINK LIKE AN ADMIN

  • 2. Admin’s Key Objectives
slide-45
SLIDE 45

THINK LIKE AN ADMIN

  • 2. Admin’s Key Objectives
slide-46
SLIDE 46

THINK LIKE AN ADMIN

  • 2. Admin’s Key Objectives
slide-47
SLIDE 47

THINK LIKE AN ADMIN

  • 2. Admin’s Key Objectives
slide-48
SLIDE 48

THINK LIKE AN ADMIN

  • 2. Admin’s Key Objectives
slide-49
SLIDE 49

THINK LIKE AN ADMIN

  • 2. Admin’s Key Objectives
slide-50
SLIDE 50

THINK LIKE AN ADMIN

  • 3. Provide Training
slide-51
SLIDE 51

THINK LIKE AN ADMIN

  • 3. Provide Training

– Video Tutorials

slide-52
SLIDE 52

THINK LIKE AN ADMIN

slide-53
SLIDE 53

THINK LIKE AN ADMIN

  • 3. Provide Training

– Video Tutorials – Blog Posts (restricted access)

slide-54
SLIDE 54

THINK LIKE AN ADMIN

  • 3. Provide Training

– Video Tutorials – Blog Posts (restricted access) – Book Module (old school)

slide-55
SLIDE 55

THINK LIKE AN ADMIN

  • 3. Provide Training

– Video Tutorials – Blog Posts (restricted access) – Book Module (old school) – Keep Front & Center

slide-56
SLIDE 56

THINK LIKE AN ADMIN

slide-57
SLIDE 57
slide-58
SLIDE 58
slide-59
SLIDE 59
slide-60
SLIDE 60
slide-61
SLIDE 61

AWESOME CUSTOM ADMIN MENU

slide-62
SLIDE 62

SUPER HELPFUL HINTS

slide-63
SLIDE 63

BUILDING ADMIN UX

BUILDING ADMIN UX

slide-64
SLIDE 64

BUILDING ADMIN UX

BUILDING ADMIN UX

( Using Drupal Core )

slide-65
SLIDE 65

Drupal Dashboard Module

slide-66
SLIDE 66

Drupal Dashboard Module

slide-67
SLIDE 67

Drupal Dashboard Module

slide-68
SLIDE 68

Drupal Dashboard Module

Get Creative Here

slide-69
SLIDE 69

Drupal Shortcuts Module

slide-70
SLIDE 70

Drupal Menu BUILDING ADMIN UX

slide-71
SLIDE 71

Drupal Menu Block BUILDING ADMIN UX

slide-72
SLIDE 72

BUILDING ADMIN UX

Some Helpful Tips:

slide-73
SLIDE 73

BUILDING ADMIN UX

Some Helpful Tips:

– Keep Content Types Easy to Populate

slide-74
SLIDE 74

BUILDING ADMIN UX

Some Helpful Tips:

– Keep Content Types Easy to Pupulate

slide-75
SLIDE 75

BUILDING ADMIN UX

Some Helpful Tips:

– Keep Content Types Easy to Populate – Keep Logic on the Backend

slide-76
SLIDE 76

BUILDING ADMIN UX

slide-77
SLIDE 77

BUILDING ADMIN UX

Some Helpful Tips:

– Keep Content Types Easy to Populate – Keep Logic on the Backend

Favorite Modules:

slide-78
SLIDE 78

BUILDING ADMIN UX

Some Helpful Tips:

– Keep Content Types Easy to Populate – Keep Logic on the Backend

Favorite Modules:

– Good ol’ Taxonomy

slide-79
SLIDE 79

BUILDING ADMIN UX

Some Helpful Tips:

– Keep Content Types Easy to Populate – Keep Logic on the Backend

Favorite Modules:

– Good ol’ Taxonomy – Field Collection Module

slide-80
SLIDE 80

BUILDING ADMIN UX

Some Helpful Tips:

– Keep Content Types Easy to Populate – Keep Logic on the Backend

Favorite Modules:

– Good ol’ Taxonomy – Field Collection Module #thankyou

slide-81
SLIDE 81

BUILDING ADMIN UX

Some Helpful Tips:

– Keep Content Types Easy to Populate – Keep Logic on the Backend

Favorite Modules:

– Good ol’ Taxonomy – Field Collection Module #thankyou – Entity Reference

slide-82
SLIDE 82

BUILDING ADMIN UX

Huge Fan of Landing Page Editors

slide-83
SLIDE 83

BUILDING ADMIN UX

slide-84
SLIDE 84

BUILDING ADMIN UX

Keep the Admin in one place & make it easy as possible

slide-85
SLIDE 85

BUILDING ADMIN UX

Admin input fields should have meaningful instructions.

slide-86
SLIDE 86

BUILDING ADMIN UX

slide-87
SLIDE 87

BUILDING ADMIN UX

<?php ¡global ¡$user; ¡ ¡ if ¡(is_array($user-­‑>roles) ¡&& ¡in_array('administrator', ¡ $user-­‑>roles)) ¡{ ¡ ¡ ¡ print ¡'<a ¡href="/node/' ¡. ¡$node-­‑>nid ¡. ¡'/edit" ¡ class="blogEdit">Edit</a>'; ¡ ¡ } ¡ ?> ¡

Quick Edit Links for Admin

Edit Link

slide-88
SLIDE 88

BUILDING ADMIN UX

<?php ¡global ¡$user; ¡ ¡ if ¡(is_array($user-­‑>roles) ¡&& ¡in_array('administrator', ¡ $user-­‑>roles)) ¡{ ¡ ¡ ¡ print ¡'<a ¡href="/node/' ¡. ¡$node-­‑>nid ¡. ¡'/edit" ¡ class="blogEdit">Edit</a>'; ¡ ¡ } ¡ ?> ¡

Quick Edit Links for Admin

slide-89
SLIDE 89

BUILDING ADMIN UX

Take it a Step Further

slide-90
SLIDE 90

BUILDING ADMIN UX

Take it a Step Further

– Design Your Own Admin Dashboard

slide-91
SLIDE 91

BUILDING ADMIN UX

Take it a Step Further

– Design Your Own Admin Dashboard – Wireframe it Out

slide-92
SLIDE 92

BUILDING ADMIN UX

Take it a Step Further

– Design Your Own Admin Dashboard – Wireframe it Out

slide-93
SLIDE 93

BUILDING ADMIN UX

slide-94
SLIDE 94

BUILDING ADMIN UX

Take it a Step Further

– Design Your Own Admin Dashboard – Wireframe it Out – /user-template.tpl.php

slide-95
SLIDE 95

BUILDING ADMIN UX

Take it a Step Further

– Design Your Own Admin Dashboard – Wireframe it Out – /user-template.tpl.php

<?php ¡global ¡$user; ¡ ¡ if ¡(is_array($user-­‑>roles) ¡&& ¡in_array('administrator', ¡ $user-­‑>roles)) ¡{ ¡ ¡ ¡ print ¡’YOUR ¡ADMIN ¡HTML ¡HERE'; ¡ ¡ } ¡ ?> ¡

slide-96
SLIDE 96

BUILDING ADMIN UX

Custom Admin Dashboard

slide-97
SLIDE 97

BUILDING ADMIN UX

Custom Admin Dashboard

– Create a Custom Module

slide-98
SLIDE 98

BUILDING ADMIN UX

Custom Admin Dashboard

– Create a Custom Module

slide-99
SLIDE 99

BUILDING ADMIN UX

Custom Admin Dashboard

– Create a Custom Module

slide-100
SLIDE 100

BUILDING ADMIN UX

Custom Admin Dashboard

– Create a Custom Module

slide-101
SLIDE 101

BUILDING ADMIN UX

Custom Admin Dashboard

– Create a Custom Module

slide-102
SLIDE 102

BUILDING ADMIN UX

Custom Admin Dashboard

– Create a Custom Module

slide-103
SLIDE 103

BUILDING ADMIN UX

Custom Admin Dashboard

– Create a Custom Module

slide-104
SLIDE 104

BUILDING ADMIN UX

Custom Admin Dashboard

– Create a Custom Module

slide-105
SLIDE 105

BUILDING ADMIN UX

Custom Admin Dashboard

– Render a User Login Form

slide-106
SLIDE 106

BUILDING ADMIN UX

Custom Admin Dashboard

– Render a User Login Form

slide-107
SLIDE 107

BUILDING ADMIN UX

Redirect Admin to Dashboard

slide-108
SLIDE 108

BUILDING ADMIN UX

Redirect Admin to Dashboard

– Login Destination URL

slide-109
SLIDE 109

BUILDING ADMIN UX

Redirect Admin to Dashboard

– Login Destination URL

  • If User Role = Admin
slide-110
SLIDE 110

BUILDING ADMIN UX

Redirect Admin to Dashboard

– Login Destination URL

  • If User Role = Admin

– Rules

slide-111
SLIDE 111

BUILDING ADMIN UX

Redirect Admin to Dashboard

– Login Destination URL

  • If User Role = Admin

– Rules

  • After Login -> If User Has Role = Admin => URL
slide-112
SLIDE 112

BUILDING ADMIN UX

Restricted Access

slide-113
SLIDE 113

BUILDING ADMIN UX

Restricted Access

– Drupal ACL + Content Access Modules

slide-114
SLIDE 114

BUILDING ADMIN UX

Restricted Access

– Drupal ACL + Content Access Modules – Training Videos – Book Pages – Etc.

slide-115
SLIDE 115

COMMON MISTAKES

COMMON MISTAKES

slide-116
SLIDE 116

COMMON MISTAKES COMMON MISTAKES

Robots.txt

User-agent: * Crawl-delay: 10 # Directories Disallow: /i/

slide-117
SLIDE 117

COMMON MISTAKES

– Not Everything Needs to be Editable

slide-118
SLIDE 118

COMMON MISTAKES

– Not Everything Needs to be Editable

  • Menus
  • Website Logo
  • Views
  • Taxonomy
  • Etc.
slide-119
SLIDE 119

COMMON MISTAKES

– Not Everything Needs to be Editable

  • Menus
  • Website Logo
  • Views
  • Taxonomy
  • Etc.
slide-120
SLIDE 120

COMMON MISTAKES

– Set Permissions

slide-121
SLIDE 121

COMMON MISTAKES

– Set Permissions – Set Per Admin Role Permissions

slide-122
SLIDE 122

COMMON MISTAKES

– Set Permissions – Set Per Admin Role Permissions – Test as if YOU were the Admin

slide-123
SLIDE 123

COMMON MISTAKES

<?php if ($user->uid): ?> LOGOUT HERE <?php endif; ?>

slide-124
SLIDE 124

PERSONAL MISSION

PERSONAL MISSION

slide-125
SLIDE 125

PERSONAL MISSION

Allocate project budget for Admin UX design & development

$$$

slide-126
SLIDE 126

PERSONAL MISSION

Create the total web experience.

slide-127
SLIDE 127

PERSONAL MISSION

Make it AWESOME!