Streaming live at 10am (PST)

My Webflow, My Workflow, My 2 Cents


#1

Good Morning Everyone,

I am just posting a little post to maybe help others be more productive and also think better when dealing with webflow, design, animations etc.

If you don’t enjoy it its not my fault @PixelGeek said I could post it.

A bit about myself, I have been in the development, design, animation industry for over 20 years. from ColdFusion, CGI, Perl, Macromedia flash, Swift 3D etc…

My Experience

Adobe Professional
Zbrush Artist
Digital Artist
Graphic Artist
Zend Certified Engineer (PHP / Database)
and a few others

Look getting off topic already, anyway I just would like to share my experience as well as my thoughts and design process so that it may help the community grow together.

Webflow is a briliant software, I had my issues at first because hey I was set in my ways, webflow does what it says and more, there are things its not suppose to do in the first place. The code is clean, but I would give a shinny new nickel if I could add a span tag in the element settings, but with any design process you have to pick your battles, I would love to get up in the morning sit down at my desk and say webflow design me 3 sites today!!! Now that I mentioned it I think I’ll add that to wishlist :rofl:

Webflow meets and exceeds current standards, I see a lot of posts in the forums that are immediately posted in bugs as an old instructor told me its not a bug its a feature! Little nerd humor… so I want to point out some things that will hopefully help you be more productive.

My Design Process

Don’t create problems that don’t exist!!

  1. I figure out if i need a database or not, if you do write the tables and assets you need, I do this because if i design my site first with specific sizes but i need another field in a form then I have to back track… This may not apply to you because I havent used the CMS feature on webflow.

  2. I sketch everything with pen and paper nothing like a picasso but it gives me a skeletal structure, I even draw stick figures and moons what ever i want images to be, don’t forget to browse other sites for ideas.

  3. Now that I got my general idea I gather my images I am going to use or resources and put them in a idea folder I also create a color chart, I use shutter stock, you can find a really nice color chart here Color Ideas , gather fonts to, I use adobe.

  4. Then I get in my webflow editor and make it do its thing. I build the site to my notes & specifications. I host my own sites do to current requirements from certain clients so I may modify my code a bit out of webflow, more organizational then anything else.

  5. This is an important step for me, I view my site live in different browsers on the webflow link. not the editor, I see how it responds is everything OK, if not I can correct it with very little effort.

  6. If everything is OK with my site now its time for animations WOOHOO IX2!!! If you think out your animation you can make 1 animation do 10 different things. without having to write 10 different animations… My motto is work smarter not harder. DON’T create problems that are not there.
    The reason I do my animation in this step is because if there is something wrong I know that it didnt happen until i animated so its easier to find the issue.

  7. I do my little odds and ends and adjustments if needed, make a font smaller or little more padding because of and animation.

  8. Finally get feed back, that is pretty much it for me.

I try to help everyone I can, lets change the web together.

Sometimes you may have to add an extra step custom js regardless of what you use, webflow dont have limits only your thought process does.

Keep in mind!

When designing period it doesn’t matter if its Webflow, handwriting etc, webflow follows the exact standards. not all browsers do, cross-browse everything! I use this but there are other solutions Browser Testing

Cross-browser compatibility has nothing to do with webflow. I cannot walk in to a dealership and buy a car and expect them to keep the gas tank filled.

Safari is the main culprit… Sorry Apple Love you though!!!
example: overflow hidden on body works beautiful on all browsers with the exception of Safari. but that is not the only property that has issues in safari.

Which brings us to work- arounds and fallbacks… these things fall under cross browser compatibility.
back to the overflow: hidden example read this article,

https://benfrain.com/preventing-body-scroll-for-modals-in-ios

There are always fallbacks to make sure our webflow sites function in all aspects of todays current standards and browsers.

it works in Mozilla but not in Safari is not a bug, its a cross browser compatibility issue.

Getting help in the forums

I try to help everyone, the best way to get help when posting is this for me and I am sure for others.
share a editor link and a live link. We don’t have the time to sort through 100 lines of divs and styles in the editor to find the issue, with a live link there are tools we can use to get straight to the problem.
if it looks fine in the editor its going to look fine for us to so please post a live link also.

Be specific!!! don’t just say HEY! my animations are not working. this is not specific. is one animation not working? is it not working in mobile but works in desktop? be more clear.

Also let us know what browser the issue is seen in plus version if possible.

And please mark topics resolved if they are! if people find a post and it has been resolved but not marked and they have the same issue, they wont know if it will fix there problem.

If I am searching for a issue and its not marked Answered or Resolved in a community I am in I’ll keep looking.

As a community Imagine the possibilities…

And at last my shout out to @webflow & staff awesome work, awesome people… But I was serious about that shinny new nickel for a span element setting like you did for header footer etc.

P.S. on the website profile side, can we add about 8 boxes for links to our social sites? I have an extra shinny nickel :smiley: