Streaming live at 10am (PST)

Best practices for creating a site


#1

I would love some guidance on best practices for creating a site. What is the process / layout you experts do when you create a site. I learn by example, and unfortunately, my site clearly reflects that as I take bits and pieces of learning as I go - and throw things in to get it working. Now that I know what I want my site to look like, etc - I want to re-create it from scratch - so that IT is my example to go forward from.

Here's my site: https://preview.webflow.com/preview/firsthandtraining?preview=ffcd5cf1daac4809df0748a647523bf9

In recreating from scratch - I'm trying to understand the proper hierarchy - this is what I imagine:
Section
Container
Div

then everything in the div - is that right? I find this very helpful as a guideline: http://sab.webflow.io/nested-siblings but again am not quite sure.

So in addition to just cleaning up my site so that I can make sense of things and find things and not break a whole bunch of stuff when I change the font size on something ( blush ) - I want to make sure that it appears well in mobile (with the minimal custom changes to the mobile layout as necessary), I also want to make sure it works properly at any window size. You'll notice how messed up it is if you play with the window size: FHTraining.net

Would LOVE some guidance on the best practice for me to recreate my site from scratch.

Thanks!

Sandy


#2

Hi @Sandy

I think this videos might help you
http://tutorials.webflow.com/intro-series/site-structure-1
http://tutorials.webflow.com/intro-series/site-structure-2
http://tutorials.webflow.com/intro-series/site-structure-3

blush


#3

Yes, it's a good practice and kind of what Webflow pushes you to do.

You can also set the HTML5 tag of each element. It doesn't affect the look at all, it's only for engines, readers, devices to know how your content is architecturized. Read about HTML5 tags on Google.

And don't be afraid of nesting divs into another, and again and again. There is no reason why not and it's better to breakdown as much as you can instead of giving a lot of property on one div/level. Also never style columns, put a div inside and style that.

I looked at your project very quickly, you got the structure clean. Try to have one Navbar, if possible kep the webflow navbar element, it comes with certain parameters that are useful.


#4

I don't think it's a "bad site".
It's a little "in your face"... but it works.

My own preference... but I would tone it down a little... more subtle I guess.
But again... that's my preference.

On a side note:
Interesting info on there... I'm a former Microsoft employee as well...
and oddly enough... I use to do a lot BI with SAP and Oracle.

The 9/26 class (Alpharetta) is right up the street from me.


#5

Thanks for the suggestions and feedback, Sabanna and Vincent.

Revolution - I'm not a web designer and for budget reasons - am doing it on my own. I am going to be recreating the site this weekend from scratch - following the best practice advice. I would deeply appreciate any design suggestions you'd be willing to share about the 'in your face' and 'tone it down a little ... more subtle' perspective. If you have some example sites I might look at that might exemplify what you mean - please share.

That's interesting the connection to MS and BI. If you've done BI in the past - not sure how long ago - but do check out Power BI - it is THE coolest. It's so easy to connect to different types of datasources now and create visuals - self-service business intelligence - it's just amazing.


#6

Here you go. Both of are live examples and clients of ours. (We work on contract).

Both of these are single page websites... technically lead funnel pages...

They are designed to provide "just enough information" --- "to get you click for more info".

Notice how similar both funnel pages look. They are both based of 1 template I created - in Webflow.

As far as "tone"... "more subtle"... I speaking of the colors - the boldness - the images... and the positioning of the elements.

Let the images and the format "speak for you".

You know the term... sometimes less is more.

I haven't done BI in quite some time. It involved a lot of travel... world-wide. It was fun but very tiring.

I use to work for SAP... left there to be a sr. systems architect for M$. I was part of the Visual Basic and later dotNet dev teams.

iDoctor

Mac Keeper


#7

Ah! Gotcha! Thanks for the clarification and guidance. I'll see what I can do. Our colors / branding is intentional to align with Power BI (www.powerbi.com) - with the yellow and black. Indeed - when they first presented those colors to us (I'm a PM for Power BI) - we all hated it -- but it's grown on us (PMs) - and now it is the solid branding across everything Power BI - so for First Hand Training - as Power BI is our feature offering and what we are basing most / all of our training around - we want similar branding.

But I will see what I can do otherwise.

Thanks again!


#8

I'm re-creating my site a piece at a time and want to make sure I'm doing everything right so that I am building a good foundation as I go. I can't figure out what I'm doing wrong that my headings won't scale when the screen is resized.

https://preview.webflow.com/preview/fhtraining?preview=dc87a53aad8170fc32dc9c0d689f1270

I feel it's something simple, but I've looked at a similar site where it's working and can't find the differences.

Potentially - it's not really sizing dynamically - I just need to set the size in each 'mode'?


#9

Hi @Sandy, are you still having issues with the resizing text?

You can use either adaptive sizing of the font on different viewports, or you can trying using vw and vh units to get dynamic sizing of the text, in relation to the viewport size. Let us know if you need some further help smile I took a quick peek at your preview link, and it looked fine to me.

Maybe there was something specific styling that has since been corrected smile Cheers, Dave


#10

I just need to set the size in each 'mode
- yes. It looks like you have done that already. Seems to be resizing.


#11

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.