I make my personal website with kirby but I’m not a professional webdesigner or so.
That’s way I have a question about the best way to make the website ready.
My way of writing is actually so:
1.) Write a function or code
2.) Put the content in the fields
3.) Write the corresponding css
But I see now that is not very efficient because as a Newby the Code and CSS isn’t really clean on the first time. So I have to re-write many of the code.
So I want to know if it is better when I go this way:
1.) Write all functions and codes
2.) Put all content in the fields
3.) Write the complete css
I hope you understand my little problem and can me help a little bit.
The best approach (for me at least) for new sites and when trying new ideas is to create a static HTML version of your templates first. Basically without Kirby at all. You can then write all the CSS for it and optimize until you think that the template is ready.
So the approach is the following:
Write static template HTML
Style it with CSS
Convert the static HTML to a Kirby template by creating fields in the blueprint and using them in place of the static HTML content
My approach is completely different, I never write static HTML and I don’t start out with the CSS either. I do everything with Kirby right from the start.
I think about the sort of content I need first and the sort of fields that content would require
next is the structure of the website as a whole, recreated as a folder structure in Kirby
if I have content, I insert the actual content once the structure and blueprints are defined, otherwise I use placeholders
scribble sketches of how it could look on the page
break structure down to patterns (love using the patterns plugin)
design those patterns both HTML- and CSS-wise
But this is a recursive process, not done in one go.
For me, the most important thing is structure, or a concept. That does not only apply to creating a website, but to writing academical papers, an article, a manual, or whatever.
Having a good concept right from the start helps you to get an overall picture and to stay focussed, and I think this can also help beginners.
Ok, patterns are probably not so much a beginner thing …
The concept for my website is clear and very simple. I want to use flexbox css and a little bit of jquery.
1.) Home
2.) About me
3.) Blog with different post types
4.) Contact
And pages for imprint and so on.
You can see that isn’t so much. But for a Newby like me is it better to read something about others working process to find a good way for myself. It can be an inspiration.
And so I hope more of you can give me some examples of a better working process.
I wouldn’t make those decisions part of your concept. What kind of technology to use is generally decided after you know what you are actually building. But: Flexbox is a very good idea in general!
When I understand you right then it is better when I make the following steps:
1.) Thinking about the content (e.g. images, text, facts and so on)
2.) Sorting the content to special pages (e.g. home, about me and so on)
3.) Thinking about the functions I need for the presentation of the content (e.g. Slider or so)
4.) Thinking about the whole design and how I will present me on the website (Structure of the Website, Colors and so on)
5.) Thinking about snippets (what content will be reusable)
6.) Build the website
Since today I work on the first steps and I find the results really good and different to my way before.
Today I have make a brainstorming about the content of the website. And the result is that I have many more content to produce as I think before.
Also I have make a list of pages which will be visible in the main navigation and which will be not visible but have to be in another menu, e.g. imprint.
I have sorted all the content ideas to the special pages and now I have to think about the way I want to show the content on each page.
So, that’s it for now. I will write in the next days again.
Actually I write all ideas on different papers. So I can change details faster as before. I think you have made my working process for this project much better.
This is how I like learning new things. Discus about something and create a new thinking process out of these ideas.
The content is sorted and I now I think about the presentation of the content.
While I think about it there are some questions which will be answered.
1.) For the gallery post type I want to have a grid system. So I have found the jQuery masonry plugin and Photoswipe. Which will be the better solution?
2.) For my video post type I think about the Kirby Plugin oEmbed 2.0.
3.) For the comments in my blog I will use a comment plugin for Kirby.
4.) For the blog main page I think about a timeline structure with Icons and so. I have found this one: Zoom Timeline on Codecanyon.
This is it for the moment. I hope you can give me some tipps.
As next I think about Accessibility, schema.org, Lazy Load and Tooltips.
It’s hard to say which is the best solution. It’s good to know though that you don’t need any external plugins to build a grid. A responsive grid can be designed in very few lines of css code.
That’s a great plugin if you need to host your own images. If you don’t, Kirby includes youtube and vimeo tags out of the box.
There are several plugins, and you can also include comments from a third party such as Disqus (see this cookbook recipe)
That plugin feels really heavy to me. Both in terms of UX and overhead.
It requires bootstrap and 4 other css files… just for a timeline. Why don’t you inspire yourself of that and build your own with just what you need?
You’re in the best position to think about accessibility and structured data for schema.org. Baking this in straight from the beginning is by far easier than adding it after you’re done. Good thking
I think about it. Especially I want to use flexbox css and I think with that a responsive grid is not so complicated.
Ok. This is what I forgot. So I have save time.
The comments are a very special thing. I will think about the right solution a few days. I will make me a list with my needs for the comments.
As a Newby I have many to learn to make a timeline or something like that. But you’re right. This solution is to big for my little blog. I will think about this idea again.
I think it’s better for me to think about all these points before I will start to create my website. My advantage is that it is my personal website so I have many time to make it right.
I see. I have many to learn in the next weeks. And I’m happy that I have found this community and Kirby it’s much easier to learn as Wordpress or so.
Q 1: Regarding the grid itself, you probably don’t need masonry or the like. As a lighter alternative to masonry, check out Salvattore.
Q2: oEmbed is great if you want to include media from several different sources (YouTube, Vimeo, Soundcloud). If not, the YouTube and Vimeo video tags might indeed suffice.
Q3: This depends on your needs. A third party solution like Disqus has certain advantages like spam protection etc. As far as I am informed, the Kirby plugins are lacking this kind of functionality, but you could of course enhance them. It all depends on your use case and on the number of comments you expect.
Q4: I agree with @Thiousi on that, don’t use a timeline with such an overhead. You can do that yourself.
Q5: Yeah, considering accessibility right from the start is the way to go.
Have a nice weekend. Unfortunately, we are having a rainy day today.
I written down so many ideas and thoughts about my website. I think this time I plan so much better as never before.
Actually I have planned many snippets which are used often, e.g. information about the author (meta.php) or social media buttons and many more.
Also I re-think about the image grid and timeline. I will take the time and write an own solution for my needs. thx @texnixe and @Thiousi
Next step in my working process is to plan the layout structure inclusive accessibility and structured data and so on. After that I will start to write the code for the website.
