Feedback

How to Use the WYSIWYG Web Builder Cascading Style Sheet Responsive Website Design for Mobile and Standard websites.

More and more every day, mobile design in website creations are requiring a smooth, flawless transition between mobile, tablet, and wide screen computer monitors.  In fact most of your search engines are refusing to catalog your website unless you are fully mobile / portable device compliant. In fact it is said as of this writing that 50% percent of all website viewing is from a cell phone or similar device.

Starting with version 12 of What you See if What You Get Web Builder  has a responsive website design feature has been added to the software package. This web page was designed with it.  Check out the source code on this page.  This page is a fully wide screen to mobile screen size compliant website.

Responsive web design
Responsive web design is the practice of building a website suitable to work on every device and every screen size, no matter how large or small, mobile or desktop. Responsive web design is focused around providing an intuitive and gratifying experience for everyone. Desktop computer and cell phone users alike all benefit from responsive websites.

Responsive vs. Adaptive vs. Mobile
For some the term responsive may not be new, and others might be even more acquainted with the terms adaptive or mobile. Which may leave you wondering what exactly is the difference between all of them.

Responsive and adaptive web design are closely related, and often transposed as one in the same. Responsive generally means to react quickly and positively to any change, while adaptive means to be easily modified for a new purpose or situation, such as change.

With responsive design websites continually and fluidly change based on different factors, such as viewport width, while adaptive websites are built to a group of preset factors. A combination of the two is ideal, providing the perfect formula for functional websites. Which term is used specifically doesn’t make a huge difference.

Mobile, on the other hand, generally means to build a separate website commonly on a new domain solely for mobile users. While this does occasionally have its place, it normally isn’t a great idea. Mobile websites can be extremely light but they do come with the dependencies of a new code base and browser sniffing, all of which can become an obstacle for both developers and users.

Currently the most popular technique lies within responsive web design, favoring design that dynamically adapts to different browser and device viewports, changing layout and content along the way. This solution has the benefits of being all three, responsive, adaptive, and mobile.

Flexible Layouts
Responsive web design is broken down into three main components, including flexible layouts, media queries, and flexible media. The first part, flexible layouts, is the practice of building the layout of a website with a flexible grid, capable of dynamically resizing to any width. Flexible grids are built using relative length units, most commonly percentages or em units. These relative lengths are then used to declare common grid property values such as width, margin, or padding.

Flexible layouts do not advocate the use of fixed measurement units, such as pixels or inches. Reason being, the viewport height and width continually change from device to device. Website layouts need to adapt to this change and fixed values have too many constraints.

Create a responsive website with floating layers
The Layer object in WYSIWYG Web Builder is a very powerful feature for advanced web layouts and it can be used for many different layout types. This can be used to create 'responsive' layouts. Responsive means that the layout will adapt itself automatically based on the available screen size. For example on mobile devices with different screen sizes.

The Floating Layer mode of a Layer will make the layer 'float' instead of having a fixed position. If multiple floating layers are placed on the page then they will be placed next to each other (from left to right) depending on the available screen space. If the layer does not fit on the current row then it will be wrapped to the next row.

The WYSIWYG Web Builder property Floating mode can be used to control the 'float behavior':

• Default
The layer will be positioned to the right side of the previous floating object. If the object does not fit on the current row the it will move to the next row.

• Clear Left
The layer will be forced to the next row (even if there is still space on the current row). The layer can have other objects on the right side of the row (unless the next floating object is also set to clear left).

• Full Width
The layer will use the full width (100%) of the page. No other objects can be on the same row. This mode can be useful for headers or footers. Please Note: Floating layers can be part of another (floating) layer. However currently only one nesting level is supported at this time.

To sum all of this up, I have created an example / tutorial video (YouTube) to show you just how easy it is to create a website that is 100% mobile and Wide Screen compatible at the same time.  It is 100% compliant with Google, Bing, Yahoo, Duck Duck Go, and many other search engines.

Please view the video below to learn how you too can easily create fully responsive websites on the go with little effort and time.

.

How to Use the WYSIWYG Web Builder Cascading Style Sheet Responsive Website Design for Mobile and Standard websites.

More and more every day, mobile design in website creations are requiring a smooth, flawless transition between mobile, tablet, and wide screen computer monitors.  In fact most of your search engines are refusing to catalog your website unless you are fully mobile / portable device compliant. In fact it is said as of this writing that 50% percent of all website viewing is from a cell phone or similar device.

Starting with version 12 of What you See if What You Get Web Builder  has a responsive website design feature has been added to the software package. This web page was designed with it.  Check out the source code on this page.  This page is a fully wide screen to mobile screen size compliant website.

Responsive web design
Responsive web design is the practice of building a website suitable to work on every device and every screen size, no matter how large or small, mobile or desktop. Responsive web design is focused around providing an intuitive and gratifying experience for everyone. Desktop computer and cell phone users alike all benefit from responsive websites.

Responsive vs. Adaptive vs. Mobile
For some the term responsive may not be new, and others might be even more acquainted with the terms adaptive or mobile. Which may leave you wondering what exactly is the difference between all of them.

Responsive and adaptive web design are closely related, and often transposed as one in the same. Responsive generally means to react quickly and positively to any change, while adaptive means to be easily modified for a new purpose or situation, such as change.

With responsive design websites continually and fluidly change based on different factors, such as viewport width, while adaptive websites are built to a group of preset factors. A combination of the two is ideal, providing the perfect formula for functional websites. Which term is used specifically doesn’t make a huge difference.

Mobile, on the other hand, generally means to build a separate website commonly on a new domain solely for mobile users. While this does occasionally have its place, it normally isn’t a great idea. Mobile websites can be extremely light but they do come with the dependencies of a new code base and browser sniffing, all of which can become an obstacle for both developers and users.

Currently the most popular technique lies within responsive web design, favoring design that dynamically adapts to different browser and device viewports, changing layout and content along the way. This solution has the benefits of being all three, responsive, adaptive, and mobile.

Flexible Layouts
Responsive web design is broken down into three main components, including flexible layouts, media queries, and flexible media. The first part, flexible layouts, is the practice of building the layout of a website with a flexible grid, capable of dynamically resizing to any width. Flexible grids are built using relative length units, most commonly percentages or em units. These relative lengths are then used to declare common grid property values such as width, margin, or padding.

Flexible layouts do not advocate the use of fixed measurement units, such as pixels or inches. Reason being, the viewport height and width continually change from device to device. Website layouts need to adapt to this change and fixed values have too many constraints.

Create a responsive website with floating layers
The Layer object in WYSIWYG Web Builder is a very powerful feature for advanced web layouts and it can be used for many different layout types. This can be used to create 'responsive' layouts. Responsive means that the layout will adapt itself automatically based on the available screen size. For example on mobile devices with different screen sizes.

The Floating Layer mode of a Layer will make the layer 'float' instead of having a fixed position. If multiple floating layers are placed on the page then they will be placed next to each other (from left to right) depending on the available screen space. If the layer does not fit on the current row then it will be wrapped to the next row.

The WYSIWYG Web Builder property Floating mode can be used to control the 'float behavior':

• Default
The layer will be positioned to the right side of the previous floating object. If the object does not fit on the current row the it will move to the next row.

• Clear Left
The layer will be forced to the next row (even if there is still space on the current row). The layer can have other objects on the right side of the row (unless the next floating object is also set to clear left).

• Full Width
The layer will use the full width (100%) of the page. No other objects can be on the same row. This mode can be useful for headers or footers. Please Note: Floating layers can be part of another (floating) layer. However currently only one nesting level is supported at this time.

To sum all of this up, I have created an example / tutorial video (YouTube) to show you just how easy it is to create a website that is 100% mobile and Wide Screen compatible at the same time.  It is 100% compliant with Google, Bing, Yahoo, Duck Duck Go, and many other search engines.

Please view the video below to learn how you too can easily create fully responsive websites on the go with little effort and time.

.
End
Just and old fashion personal website sharing information.
Responsive Website Design
Responsive Website Design
Just and old fashion personal
website sharing information.