DOAG 2017, Nuremberg (Germany) This talk gives a short overview of best practices in design in general such as design in Oracle APEX related projects.

1. Professional UI Design with APEX 5.1
DOAG 2017

2. First things first
English?
Deutsch?

3. About me
• Freelancer, Steven Grzbielok IT-Solutions
• Software Developer and Architect, Oliver Funk Myjur
Software Entwicklung
• Chairman, Entrepreneursclub Darmstadt e.V.
• Oracle since 4 years
• Microsoft since 3 months 🙃

4. Agenda
1. Design in General
2. APEX Best Practices
3. Chrome Dev Tools
4. APEX NITRO

5. Requirements
1. Should have worked with Oracle APEX (obviously)
2. Basic HTML knowledge
3. Basic CSS knowledge
4. Not very afraid of the command line
If not, look here: https://www.slideshare.net/StevenGrzbielok/apex-51-ui-design-crashkurs

6. UI Design: What is it?
Jesse James Garret: Elements of User Experience

7. Design Process

8. Lo-Fi Prototyping
Adobe Xd, invisoinapp, Sketch

9. High-Fi
Prototyping

10. High-Fi
Prototyping
Quick SQL for DB mockups
Blueprint for generating big apps
without effort

11. 🚀

12. Basic concepts in APEX
Theme Template Template
Options

13. Don‘t unchain your theme!

14. Best practice: Customizing
1. Theme Roller
2. Templates & Template Options
3. Custom CSS-Classes
1. CSS-Code in Theme Roller
2. CSS-/JavaScript files
4. Custom templates
1. Define and adjust template options  flexible to use or use not
the change
2. Adjust template structure

17. Custom code: Always stay responsive!
1. Media Queries
@media screen and (max-device-width: 480px) { .column
{ float: none; } }
2. Flexible Images
img
{ height: auto; max-width: 100%; }
3. Fluid Grid
#region
{ max-width: 61.75em;
margin-top: 0.5%; }

18. Your new best friend

19. Your new best friendYour new best friend

20. Demo time!

22. LESS
.class1 {
background-color: #2d5e8b;
}
.class1 .class2 {
border-color: #fff;
color: #2d5e8b;
}
@color-base: #2d5e8b;
.class1 {
background-color: @color-base;
.class2 {
border-color: #fff;
color: @color-base;
}
}
Less CSS

23.  Less/Sass
Like CSS but
with…
•Variables
•Nesting
•Importing
•Mixins
•Functions
•Operations
•Scopes
Easier to maintain

24. 😎

25. Looking for help?
https://apex.world https://thedesignership.com

26. Contact me!