01
Brief
We understand the audience, pages and goals.
RESPONSIVE WEB DESIGN
The same brand.An experience designed for every screen.
We design how your website looks and works on phone, tablet and desktop. We adapt the structure, navigation and visual details so information stays clear at different screen sizes.
Illustrative concept
Atelier LineaStudioProjectsServicesContact
Spaces that feel like home.
Interior design for homes and offices.
Book a consultation
Services
- Design
- Furnishing
- Lighting
Selected projects
Apartment in Tirana · 120 m²
Office in Durrës · 260 m²
Atelier LineaStudioProjectsServicesContact
Spaces that feel like home.
Interior design for homes and offices.
Book a consultationServices
- Design
- Furnishing
- Lighting
Selected projects
Apartment in Tirana · 120 m²
Office in Durrës · 260 m²
Atelier Linea
Spaces that feel like home.
Interior design for homes and offices.
Book a consultationServices
- Design
- Furnishing
- Lighting
Selected projects
Apartment in Tirana · 120 m²
- Columns
- Menu
- Order
- Text size
- CTA placement
- Flexible structure
- Navigation for each screen
- Responsive screens and prototypes
WHAT RESPONSIVE DESIGN IS
More than shrinking a desktop page.
Responsive design defines how content is reorganised when screen space changes. A multi-column layout can become a vertical flow; navigation changes shape, and elements adapt to touch or to mouse and keyboard.
At ENOR, we design these changes as part of one experience. We keep the identity and the important information, while adapting how they are presented.
This service covers design: the screens, the rules and the prototype. Programming and launching the website are development work.
Services
Design
Furnishing
Lighting
Mobile · 1 columnCards one after another; 15 px text.
Services
Design
Furnishing
Lighting
Tablet · 2 columnsThe third card wraps to the next row.
Services
Design
Furnishing
Lighting
Desktop · 3 columnsAll cards in one row; 22 px title.
Illustrative concept
PROBLEMS WE SOLVE
When the screen changes, content should stay usable.
Each problem has a design approach and a section where we explain it.
Problem: Small text on phones
Design approach: Suitable hierarchy and sizesProblem: A menu that takes over the screen
Design approach: Navigation organised around contentProblem: Buttons too close together
Design approach: Spacing and touch-friendly targetsProblem: Hard-to-use forms
Design approach: Clear flow and labelsProblem: Photos that lose their subject
Design approach: Cropping and treatment per layoutProblem: Content overflowing the screen
Design approach: Reorganisation and defined behaviour
WHAT THE SERVICE INCLUDES
The screens and rules that make the design adaptable.
The number of unique pages and screen variants is set out in the proposal.
- 01
Review of the existing design
We identify problems at different sizes.
- 02
Mobile-first structure
We set priorities for limited space.
- 03
Responsive screens
We design the agreed pages and components.
- 04
Navigation and interactions
We adapt menus, forms and controls.
- 05
Prototype and review
We assess the key flows.
- 06
Handoff for implementation
We prepare the files and behaviour notes.
THE MOBILE-FIRST APPROACH
We start with the content that matters most.
On a small screen, every decision about order and space becomes more visible. A mobile-first approach helps us define the key message, information and actions before expanding the layout.
- Content hierarchy
- Navigation
- Calls to action
- Forms
- Supporting information
- Expansion to larger screens
Illustrative concept
- 1Title and offer
- 2Main CTA
- 3Services
- 4Projects
- 5Contact
Switch from phone to desktop: the priority order stays, the layout expands.
Mobile-first is a way of designing. It is not the same as Google’s mobile-first indexing.
Mobile-first does not mean removing key content from phones; the order and presentation change.
LAYOUT & BREAKPOINTS
The design changes when the content needs it.
We set the points where the layout changes based on the content, not just on device names. For each component we note its behaviour between sizes, not just three screenshots.
In the design notes we show
- 01What expandsThe project grid and the main photo follow the width.
- 02What stays fixedThe maximum text width and button sizes.
- 03What wraps to the next rowService cards when there is no room for three.
- 04When the layout changesWhen the title and photo no longer fit side by side.
- Columns
- Content width
- Spacing
- Order
- Element stretching
- Component behaviour
- Landscape and portrait orientation
TYPOGRAPHY & CONTENT
Readable without losing identity.
We set sizes, line length and line height for every screen size, and test them with real or representative content, including long titles and other languages.
- Size and hierarchy
- Line length
- Line height
- Spacing
- Long titles
- Multilingual text
- Links
- Lists
- Secondary information
We do not shrink text until it becomes unreadable, and we do not cut essential information for aesthetic reasons.
Illustrative concept
Interior design for homes and offices in Tirana
We start from how you live and work, then choose materials, furniture and light.
- Title
- 26 px
- Body
- 15 px
- Line length
- ≈ 40 characters
Change the screen and the language: see how the long title wraps and how sizes change.
IMAGES & MEDIA
Visuals that keep their subject and meaning.
For every place an image appears, we define the ratio, the crop and the focal point so the subject is not lost when the shape changes.
- Image ratios
- Crops per layout
- Focal point
- Galleries
- Video
- Text over photos
- Room for captions and descriptions
Illustrative concept
The subject is kept
Turn the focal point on or off and compare the crops for each screen.
Important text is never placed only inside an image.
We deliver guidance for visual variants and assets; technical optimisation of files and loading belongs to implementation. A prototype does not measure speed.
FORMS & COMPONENTS
Clear interactions, even when space is limited.
We design fields, buttons, filters, tabs, accordions and dialogs for touch and keyboard, with the states each one needs.
- Fields
- Labels
- Hints
- Selections
- Buttons
- Filters
- Tabs
- Accordions
- Dialogs
- Messages
States per component
- Default
- Focus
- Active
- Disabled
- Loading
- Error
- Success
- A placeholder never replaces the label.
- The error appears next to its field.
- The field stays visible when the phone keyboard opens.
- We avoid cramped multi-column forms.
Illustrative concept
Open the keyboard, submit the form with an empty field and see where the error appears.
TABLES & COMPLEX CONTENT
Dense information needs a plan too.
We adapt tables, catalogues, pricing plans and dashboards according to their meaning, not with one solution for all.
Illustrative concept
Plan
Details
- Unique screens
- 3
- Screen variants
- 2
- Prototype
- —
- Review rounds
- 1
The packages are illustrative, not prices.
Switch the phone layout: a priority column with details, or local scrolling.
- Comparison tables
- Catalogues
- Filters
- Pricing plans
- Documents
- Dashboards
- Reorganisation
- Summary
- Expandable details
- Local scrolling when the table needs it
- Priority columns
We do not automatically turn every table into cards if the comparison would be lost.
When a table needs horizontal scrolling, it is local and visible, not the whole page.
RESPONSIVE & ACCESSIBILITY
Adapting to the screen is part of an accessible experience.
During design we define the order, contrast, focus and spacing that support an accessible implementation.
- Logical content order
- Contrast
- Visible focus
- Distinguishable controls
- Touch spacing
- Labels
- Text zoom
- Content that reflows
- Alternatives to animation
Status is not shown by colour alone
- Confirmed
- Pending
- Error
Mobile-first does not guarantee accessibility.
Design specifications support an accessible implementation; final compliance also requires coding and testing.
RESPONSIVE DEMO
See how the same design changes.
The same content, with different layouts. Pick a screen or change the width.
Illustrative concept
Atelier LineaStudioProjectsServicesContact
Spaces that feel like home.
Interior design for homes and offices.
Book a consultationServices
- Design
- Furnishing
- Lighting
Selected projects
Apartment in Tirana · 120 m²
Office in Durrës · 260 m²
Desktop: Title and photo side by side · 3 columns
This demo shows a concept; it does not test your website and is not an audit.
DELIVERABLES
A design organised for the team that will implement it.
Depending on the scope, we deliver the material the development team needs to follow the designed behaviour.
- Source file
- Approved screens
- Components
- Responsive variants
- Prototype
- Navigation notes
- Behaviour between sizes
- Image guidance
- Interaction states
- Export-ready assets
Handoff · Atelier LineaIllustrative concept
Source file
- 01 Priorities and flows
- 02 Mobile screens
- 03 Tablet screens
- 04 Desktop screens
- 05 Components and states
- 06 Responsive prototype
Export-ready assets
- Image variants per ratio
- SVG icons
- Fonts per licence
Note for the implementation team
- — Switch to 2 columns when cards are narrower than 280 px.
- — The menu becomes a button when the links no longer fit on one line.
- — Photos keep their focal point in every crop.
Three different things
- 01The designScreens, rules and components.
- 02The prototypeA simulation of navigation and key flows.
- 03A working websiteThe result of implementation; not automatically included in this service.
Implementation and launch are not included automatically. Ownership, licences and handoff are set out in the agreement.
PROCESS
From contentto a system of connected screens.
The number of screens and review rounds is set out in the proposal.
02
Review
We examine the existing design and its problems, if any.
03
Priorities
We define the hierarchy and flows.
04
Design
We create the responsive screens and components.
05
Prototype and review
We assess the experience with representative content.
06
Handoff
We organise the files and guidance for implementation.
Which pages need to adapt better?
Discuss the designA visual review after implementation can be offered separately.
SEO
How does responsive design relate to SEO?
Responsive design helps organise the same content for different screen sizes. This creates a more consistent foundation for users and for managing the website.
Google uses the mobile version of content for indexing. That is why, during design, we keep the key information and the necessary links on mobile screens too.
Rankings depend on content, technical implementation and other factors. Responsive design is not a guarantee of a position in search results.
FAQ
Frequently asked questions.
Other services
More solutions for your business needs.
- Custom DesignA dedicated visual identity for your website.
- UI/UX DesignStructure, navigation and interfaces for the right actions.
- eCommerce DesignA clear catalogue, product page and checkout.
- Landing PagesFocused pages for one offer or campaign.
- Website RedesignImproving the existing look and structure.
- Multilingual DesignExperiences adapted to different languages and audiences.
Let’s think about your website for the screens it is used on.
Tell us which pages you want designed or improved. We will define the screens, components and deliverables needed.
What our clients say
5.0
AArben Hoxha, CEO
Sample Logistics Co.
“They translated complex technical concepts into clear decisions for our team.”