Jump to content

Setai International (first finished PW project)


ptjedi
 Share

Recommended Posts

Hi everyone,

Just wanted to share this project I finished last month for a client. The design is not mine. I've implemented and converted the Illustrator mock-up into Processwire, and it went very well. There are some things regarding the design I would have change, but I could not go against the designer.

Here's the link: http://www.setaiasia.com

Special thanks to diogo, soma, yellowled for the support and, of course, Ryan for creating this wonderful tool.

  • Like 3
Link to comment
Share on other sites

You must have mistaken me for a PW developer, which I am most definitely not. :)

This is very neat. I didn't actually realize it's responsive until I resized the browser, which is always a good thing. Sometimes, you can spot that it's responsive from the "desktop" layout. Not with this one.

Link to comment
Share on other sites

Still it does behave nicely when resizing the brower. I would just put a transparent 2px border under all the nav links, so you don't have the behavior that it's happening now (because there is a border only on the active link, the others don't flow well under it). Like this they will stack nicely under each other. Also wouldn't hurt to make the image smaller when the browser is resized. You can do this for instance:

#photo{
width:100%
max-width:1000px
}

EDIT: concerning the image. Even nicer would be to have the logo as a transparent png above it, and crop the left part of the image as the browser is resized down, keping the logo in place. Like this you will have a responsive website without any media query ;)

Link to comment
Share on other sites

Wow. That's embarrassing (for me) and even better (for you) at the same time. It indeed behaves very nicely on smaller viewports without a single @media.

While I'm looking at the code: If you want to score some performance bonus points, you might want to concatenate javascripts and stylesheets (not with each other, of course), minify the concatenated files which and put all the JS at the bottom. (Disclaimer: Yes, I know there are other ways to boost JS/CSS performance, but this is the most simple one, and it's usually pretty effective.)

Link to comment
Share on other sites

Thanks you both for the valuable tips and suggestions. I used most of Processwire's default template because this was a cheap project. But it was great to try PW for the first time, implementing a bilingual structure and other interesting (yet simple) features such as the dynamic gallery and news section.

I'm already picking up other work, and one thing I realize that PW isn't very good at is about exporting/importing a template+fields. Copying the php file plus adapting all fields is an enduring task. Isnt' there a way to to this faster?

Link to comment
Share on other sites

F

Thanks you both for the valuable tips and suggestions. I used most of Processwire's default template because this was a cheap project. But it was great to try PW for the first time, implementing a bilingual structure and other interesting (yet simple) features such as the dynamic gallery and news section.

I'm already picking up other work, and one thing I realize that PW isn't very good at is about exporting/importing a template+fields. Copying the php file plus adapting all fields is an enduring task. Isnt' there a way to to this faster?

wooot PW isn't good at? ;) You mean for on a new site? Something like Profile Exporter could come in handy. Also you could pretty easy create a field template creator via API. Limitless and simple.

Edit: For locally tasks, also there's clone feature in PW. Go to /site/config.php and enable advanced mode. Welcome to advanced pro mode! Now you can under the tab advanced, clone fields and templates using a checkbox and save, then rename.

Link to comment
Share on other sites

I'm already picking up other work, and one thing I realize that PW isn't very good at is about exporting/importing a template+fields. Copying the php file plus adapting all fields is an enduring task. Isnt' there a way to to this faster?

Soma had some good suggestions here. I also wanted to mention I'm planning to include json-text based exports of templates and fields in 2.3, so that you could copy/paste these things easily between sites.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By Markus Thomas
      One of my first projects with ProcessWire.
      Online for a while, but still up to date and currently new features are being developed again.
      The most interesting feature of the site is the integration of the external tool and the PDF creation of the registration form with integrated API connection to always be able to directly output the most current dates.
       
      External Service:
      SEMCO ( https://www.semcosoft.com/de/ )
      Used Modules:
      HannahCode Pages2PDF AIOM+ MarkupSitemap XML and some others In Development:
      Shop with Padloper Site: https://www.school-dynamic.de/
      At this point I like to say Processwire makes it so easy for me to solve even more complicated tasks and get impressive results. Because I must confess, my PHP skills are unfortunately not yet where I would like to be.  

    • By Markus Thomas
      My wife loves to cook, and I always like to further my knowledge around Processwire. So I thought I'll build a small page with the some small function to learn something.
      Used modules:
      ProMailer RepeaterMatrix Pages2PDF AIOM and some other litte modules Current functions:
      JSON-LD for recipes and page search Automatic ingredient calculation when changing the number of servings Creation of a PDF of the recipe Basic PWA (here is something to do, actually) Planned functions:
      a lot 😉  
      Site: https://www.dothiscookingthing.de

    • By benbyf
      https://www.tandc.games/
      New website for my games design company. We're currently working on Grace Hopper: Bug Rescue about computer science history, check it out and let me know if you have any suggestions for historic characters or topics/hardware.
      Built with PW, and is heavy built upon my other website https://www.ethicalby.design/ basically taking it as a base and building on it.

    • By schwarzdesign
      We recently finished a relaunch of  the website of the consulting firm Engfer Consulting: engfer-consulting.de. Built with ProcessWire 3 and Bootstrap 4.
      Features
      Bilingual website (UPDATE: The English page is now available! the English page is inactive at the moment, as the content is not ready yet) A strong, simple data structure for job offers and news, allowing for a custom search page and fulltext search Sectioned content-blocks built with a Repeater Matrix (ProFields) Reusable components available as page reference fields Automatic generation of open graph-tags, with manual overrides available on each page Contact forms with a custom recipient depending on the current page Modules used:
      ProFields ProForms Sitemap Cookie Management Banner Duplicator Tracy Debugger Wire Mail SMTP Admin Links in FrontEnd Technical insights
      Most of the content is built using a Repeater Matrix field. Each section has an optional heading and a select-field for background colors. Some of the sections available include:
      Text blocks (a repeater-field for multi-column text) Feeds / listing of the latest job offers or news (with a field to control the number of entries shown) Displaying a team member or quote (selected through a page reference field) Downloadable files (a multivalue field for file uploads) Those sections can be combined and stringed together arbitrarily, so any number of page templates showing different contents can be built. The job offers template, in contrast, features fixed fields for taxonomy assignment, description, contact person, preview image and so on, making the job offer pages uniform and easily accesible.
      The (technically) most interesting part of the site is the job overview page, which contains custom filters that are automatically generated from the available taxonomy terms.
      The stylesheets are written in SASS, built with Bootstrap 4. Only the base and grid SASS files of Bootstrap are included, along with the Bootstrap components that we ended up using. Using Bootstrap 4 as a framework in this way makes development & styling blazingly fast, once all the utility classes are commited to muscle memory ...
      > Our Agency.
      Screenshots









    • By benbyf
      Not new, but a website I've worked on for a year or so in continous development.
      http://supercarownerscircle.com/
      I originally inherited the site from another web design company - upgraded PW and over the year added ecommerce using the Stripe module and a custom integration, revamped the frontend and added lots of new templates.
      Also did some frontend work on the shopify shop.

       
       
×
×
  • Create New...